foundation.ts 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. import { isObject, get } from 'lodash';
  2. import BaseFoundation, { DefaultAdapter } from '../base/foundation';
  3. import { numbers } from './constants';
  4. import { throttle } from 'lodash';
  5. export interface CarouselAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
  6. notifyChange: (activeIndex: number, preIndex: number) => void;
  7. setNewActiveIndex: (activeIndex: number) => void;
  8. setPreActiveIndex: (activeIndex: number) => void;
  9. setIsReverse: (isReverse: boolean) => void;
  10. setIsInit: (isInit: boolean) => void;
  11. }
  12. class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<CarouselAdapter<P, S>, P, S> {
  13. constructor(adapter: CarouselAdapter<P, S>) {
  14. super({ ...adapter });
  15. }
  16. _interval = null;
  17. play(interval: number): void {
  18. if (this._interval) {
  19. clearInterval(this._interval);
  20. }
  21. this._interval = setInterval(() => {
  22. this.next();
  23. }, interval);
  24. }
  25. stop(): void {
  26. if (this._interval){
  27. clearInterval(this._interval);
  28. }
  29. }
  30. goTo(activeIndex: number): void {
  31. const { activeIndex: stateActiveIndex } = this.getStates();
  32. const targetIndex = this.getValidIndex(activeIndex);
  33. this._adapter.setIsReverse(stateActiveIndex > targetIndex);
  34. if (this.getIsControledComponent()) {
  35. this._notifyChange(targetIndex);
  36. } else {
  37. this._notifyChange(targetIndex);
  38. this.handleNewActiveIndex(targetIndex);
  39. }
  40. }
  41. next(): void {
  42. const { activeIndex: stateActiveIndex } = this.getStates();
  43. const targetIndex = this.getValidIndex(stateActiveIndex + 1);
  44. this._adapter.setIsReverse(false);
  45. if (this.getIsControledComponent()) {
  46. this._notifyChange(targetIndex);
  47. } else {
  48. this._notifyChange(targetIndex);
  49. this.handleNewActiveIndex(targetIndex);
  50. }
  51. }
  52. prev(): void {
  53. const { activeIndex: stateActiveIndex } = this.getStates();
  54. const targetIndex = this.getValidIndex(stateActiveIndex - 1);
  55. this._adapter.setIsReverse(true);
  56. if (this.getIsControledComponent()) {
  57. this._notifyChange(targetIndex);
  58. } else {
  59. this._notifyChange(targetIndex);
  60. this.handleNewActiveIndex(targetIndex);
  61. }
  62. }
  63. destroy(): void {
  64. this._unregisterInterval();
  65. }
  66. _unregisterInterval() {
  67. if (this._interval) {
  68. clearInterval(this._interval);
  69. this._interval = null;
  70. }
  71. }
  72. _notifyChange(activeIndex: number): void {
  73. const { activeIndex: stateActiveIndex, isInit } = this.getStates();
  74. if (isInit){
  75. this._adapter.setIsInit(false);
  76. }
  77. if (stateActiveIndex !== activeIndex) {
  78. this._adapter.setPreActiveIndex(stateActiveIndex);
  79. this._adapter.notifyChange(activeIndex, stateActiveIndex);
  80. }
  81. }
  82. getValidIndex(index: number): number {
  83. const { children } = this.getStates();
  84. return (index + children.length) % children.length;
  85. }
  86. getSwitchingTime(): number {
  87. const { autoPlay, speed } = this.getProps();
  88. const autoPlayType = typeof autoPlay;
  89. if (autoPlayType === 'boolean' && autoPlay){
  90. return numbers.DEFAULT_INTERVAL + speed;
  91. }
  92. if (isObject(autoPlay)){
  93. return get(autoPlay, 'interval', numbers.DEFAULT_INTERVAL) + speed;
  94. }
  95. return speed;
  96. }
  97. getIsControledComponent(): boolean {
  98. return this._isInProps('activeIndex');
  99. }
  100. handleAutoPlay(): void {
  101. const { autoPlay } = this.getProps();
  102. const autoPlayType = typeof autoPlay;
  103. if ((autoPlayType === 'boolean' && autoPlay) || isObject(autoPlay)){
  104. this.play(this.getSwitchingTime());
  105. }
  106. }
  107. handleKeyDown(event: any): void{
  108. if (event.key === 'ArrowLeft') {
  109. this.prev();
  110. }
  111. if (event.key === 'ArrowRight') {
  112. this.next();
  113. }
  114. }
  115. onIndicatorChange(activeIndex: number): void {
  116. const { activeIndex: stateActiveIndex } = this.getStates();
  117. this._adapter.setIsReverse(stateActiveIndex > activeIndex);
  118. this._notifyChange(activeIndex);
  119. if (!this.getIsControledComponent()) {
  120. this.handleNewActiveIndex(activeIndex);
  121. }
  122. }
  123. handleNewActiveIndex(activeIndex: number): void {
  124. const { activeIndex: stateActiveIndex } = this.getStates();
  125. if (stateActiveIndex !== activeIndex) {
  126. this._adapter.setNewActiveIndex(activeIndex);
  127. }
  128. }
  129. getDefaultActiveIndex(): number {
  130. let activeIndex;
  131. const props = this.getProps();
  132. if ('activeIndex' in props) {
  133. activeIndex = props.activeIndex;
  134. } else if ('defaultActiveIndex' in props) {
  135. activeIndex = props.defaultActiveIndex;
  136. }
  137. return activeIndex;
  138. }
  139. }
  140. export default CarouselFoundation;