@momo-kits/carousel 0.151.2-beta.2 → 0.152.1-beta.2

package/index.tsx

@@ -1,840 +1,517 @@
-import React from 'react';
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
   Animated,
   Dimensions,
+  FlatList,
   GestureResponderEvent,
   LayoutChangeEvent,
   NativeScrollEvent,
   NativeSyntheticEvent,
   Platform,
-  View,
-  ViewStyle,
+  StyleSheet,
+  View
 } from 'react-native';
-import { defaultAnimatedStyles, defaultScrollInterpolator } from './animation';
-import { CarouselProps, CarouselRef, CarouselState, Position } from './types';
-import { Spacing } from '@momo-kits/foundation';
-
-const IS_ANDROID = Platform.OS === 'android';
-const IS_IOS = Platform.OS === 'ios';
-const screenWidth = Dimensions.get('window').width;
-
-class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
-  static defaultProps = {
-    activeSlideAlignment: 'start',
-    activeSlideOffset: 20,
-    apparitionDelay: 0,
-    autoplay: false,
-    autoplayDelay: 1000,
-    autoplayInterval: 3000,
-    callbackOffsetMargin: 5,
-    containerCustomStyle: {},
-    contentContainerCustomStyle: {},
-    enableSnap: true,
-    firstItem: 0,
-    hasParallaxImages: false,
-    loop: false,
-    loopClonesPerSide: 3,
-    scrollEnabled: true,
-    slideStyle: {},
-    shouldOptimizeUpdates: true,
-    vertical: false,
-    isCustomScrollWidth: false,
-    disableIntervalMomentum: IS_ANDROID,
-    useExperimentalSnap: IS_ANDROID,
-    visibleItem: 1,
-    full: false,
-  };
-
-  _activeItem;
-  _onScrollActiveItem;
-  _previousFirstItem;
-  _previousItemsLength;
-  _mounted;
-  _positions: Position[];
-  _currentScrollOffset;
-  _scrollEnabled;
-  _initTimeout?: ReturnType<typeof setTimeout>;
-  _apparitionTimeout?: ReturnType<typeof setTimeout>;
-  _enableAutoplayTimeout?: ReturnType<typeof setTimeout>;
-  _autoplayTimeout?: ReturnType<typeof setTimeout>;
-  _snapNoMomentumTimeout?: ReturnType<typeof setTimeout>;
-  _androidRepositioningTimeout?: ReturnType<typeof setTimeout>;
-  _scrollPos?: Animated.Value;
-  _onScrollHandler?: (...args: any[]) => void;
-  _autoplay?: boolean;
-  _autoplaying?: boolean;
-  _autoplayInterval?: ReturnType<typeof setInterval>;
-  _carouselRef: any;
-  _onLayoutInitDone?: boolean;
-
-  constructor(props: CarouselProps) {
-    super(props);
-
-    this.state = {
-      hideCarousel: !!props.apparitionDelay,
-      interpolators: [],
-      containerWidth: screenWidth,
-      itemWidth: screenWidth - Spacing.L * 2,
-    };
-
-    const initialActiveItem = this._getFirstItem(props.firstItem || 0);
-    this._activeItem = initialActiveItem;
-    this._onScrollActiveItem = initialActiveItem;
-    this._previousFirstItem = initialActiveItem;
-    this._previousItemsLength = initialActiveItem;
-
-    this._mounted = false;
-    this._positions = [];
-    this._currentScrollOffset = 0;
-    this._scrollEnabled = props.scrollEnabled;
-
-    this._getItemLayout = this._getItemLayout.bind(this);
-    this._getKeyExtractor = this._getKeyExtractor.bind(this);
-    this._onLayout = this._onLayout.bind(this);
-    this._onScroll = this._onScroll.bind(this);
-    this._onMomentumScrollEnd = this._onMomentumScrollEnd.bind(this);
-    this._onTouchStart = this._onTouchStart.bind(this);
-    this._onTouchEnd = this._onTouchEnd.bind(this);
-    this._renderItem = this._renderItem.bind(this);
-    this._setScrollHandler(props);
-  }
-
-  componentDidMount() {
-    const { apparitionDelay, autoplay } = this.props;
-
-    this._mounted = true;
-    this._initPositionsAndInterpolators();
-
-    // Without 'requestAnimationFrame' or a `0` timeout, images will randomly not be rendered on Android...
-    this._initTimeout = setTimeout(() => {
-      if (!this._mounted) {
-        return;
-      }
-
-      const apparitionCallback = () => {
-        if (apparitionDelay) {
-          this.setState({ hideCarousel: false });
-        }
-        if (autoplay) {
-          this.startAutoplay();
-        }
-      };
-
-      if (apparitionDelay) {
-        this._apparitionTimeout = setTimeout(() => {
-          apparitionCallback();
-        }, apparitionDelay);
-      } else {
-        apparitionCallback();
-      }
-    }, 1);
-  }
-
-  componentDidUpdate(prevProps: CarouselProps) {
-    const { interpolators } = this.state;
-    const { firstItem = 0, scrollEnabled } = this.props;
-    const itemsLength = this._getCustomDataLength(this.props);
-
-    if (!itemsLength) {
-      return;
-    }
-
-    const nextFirstItem = this._getFirstItem(firstItem, this.props);
-    let nextActiveItem =
-      typeof this._activeItem !== 'undefined'
-        ? this._activeItem
-        : nextFirstItem;
-
-    if (nextActiveItem > itemsLength - 1) {
-      nextActiveItem = itemsLength - 1;
+import { CarouselProps, CarouselRef } from './types';
+
+const { width: viewportWidth } = Dimensions.get('window');
+
+const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
+
+const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
+  const {
+    data,
+    renderItem,
+    keyExtractor,
+    firstItem = 0,
+    itemWidth: itemWidthProp,
+    visibleItem = 1,
+    full = false,
+    activeSlideOffset = 20,
+    scrollEnabled = true,
+    enableSnap = true,
+    snapToInterval: snapToIntervalProp,
+    disableIntervalMomentum = Platform.OS === 'android',
+    loop = false,
+    loopClonesPerSide = 3,
+    autoplay = false,
+    autoplayDelay = 1000,
+    autoplayInterval = 3000,
+    inactiveSlideOpacity = 1,
+    inactiveSlideScale = 1,
+    apparitionDelay = 0,
+    style,
+    slideStyle,
+    contentContainerStyle,
+    onSnapToItem,
+    onScrollIndexChanged,
+    onScroll: onScrollProp,
+    onMomentumScrollEnd: onMomentumScrollEndProp,
+    onTouchStart: onTouchStartProp,
+    onTouchEnd: onTouchEndProp,
+    onLayout: onLayoutProp,
+    getItemLayout: getItemLayoutProp,
+  } = props;
+
+  const flatListRef = useRef<FlatList>(null);
+  const autoplayTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const scrollXRef = useRef(new Animated.Value(0)).current;
+  const containerWidthRef = useRef(viewportWidth);
+  const isAutoplayPausedRef = useRef(false);
+  const currentIndexRef = useRef(firstItem);
+
+  const [currentIndex, setCurrentIndex] = useState(firstItem);
+  const [containerWidth, setContainerWidth] = useState(viewportWidth);
+  const [isVisible, setIsVisible] = useState(apparitionDelay === 0);
+  const [isLayoutReady, setIsLayoutReady] = useState(false);
+
+  const itemWidth = useMemo(() => {
+    if (full) {
+      return containerWidth;
     }
-
-    if (scrollEnabled !== prevProps.scrollEnabled) {
-      this._setScrollEnabled(scrollEnabled);
+    if (itemWidthProp) {
+      return itemWidthProp;
     }
+    const spacing = visibleItem > 1 ? 10 : 0;
+    return (containerWidth - spacing * (visibleItem - 1)) / visibleItem;
+  }, [containerWidth, full, itemWidthProp, visibleItem]);
 
-    if (interpolators.length !== itemsLength) {
-      this._activeItem = nextActiveItem;
-      this._previousItemsLength = itemsLength;
-
-      this._initPositionsAndInterpolators(this.props);
-    } else if (
-      nextFirstItem !== this._previousFirstItem &&
-      nextFirstItem !== this._activeItem
-    ) {
-      this._activeItem = nextFirstItem;
-      this._previousFirstItem = nextFirstItem;
-      this._snapToItem(nextFirstItem, false, true, true);
+  const snapToInterval = useMemo(() => {
+    if (snapToIntervalProp !== undefined) {
+      return snapToIntervalProp;
     }
+    return itemWidth;
+  }, [itemWidth, snapToIntervalProp]);
 
-    if (this.props.onScroll !== prevProps.onScroll) {
-      this._setScrollHandler(this.props);
+  const dataWithClones = useMemo(() => {
+    if (!loop || data.length === 0) {
+      return data;
     }
-  }
-
-  componentWillUnmount() {
-    this._mounted = false;
-    this.stopAutoplay();
-    if (this._initTimeout != null) clearTimeout(this._initTimeout);
-    if (this._apparitionTimeout != null) clearTimeout(this._apparitionTimeout);
-    if (this._enableAutoplayTimeout != null)
-      clearTimeout(this._enableAutoplayTimeout);
-    if (this._autoplayTimeout != null) clearTimeout(this._autoplayTimeout);
-    if (this._snapNoMomentumTimeout != null)
-      clearTimeout(this._snapNoMomentumTimeout);
-    if (this._androidRepositioningTimeout != null)
-      clearTimeout(this._androidRepositioningTimeout);
-  }
 
-  _setScrollHandler(props: CarouselProps) {
-    const scrollEventConfig = {
-      listener: this._onScroll,
-      useNativeDriver: true,
-    };
-    this._scrollPos = new Animated.Value(0);
-    const argMapping = [
-      { nativeEvent: { contentOffset: { x: this._scrollPos } } },
-    ];
-
-    if (props.onScroll && Array.isArray(props.onScroll._argMapping)) {
-      argMapping.pop();
-      const [argMap] = props.onScroll._argMapping;
-      if (argMap && argMap.nativeEvent && argMap.nativeEvent.contentOffset) {
-        this._scrollPos =
-          argMap.nativeEvent.contentOffset.x ||
-          argMap.nativeEvent.contentOffset.y ||
-          this._scrollPos;
-      }
-      argMapping.push(...props.onScroll._argMapping);
+    const clones = [];
+    for (let i = 0; i < loopClonesPerSide; i++) {
+      const startIndex = data.length - loopClonesPerSide + i;
+      const endIndex = i;
+      clones.push(data[startIndex >= 0 ? startIndex : data.length + startIndex]);
     }
-    this._onScrollHandler = Animated.event(argMapping, scrollEventConfig);
-  }
-
-  _enableLoop() {
-    const { data, enableSnap, loop } = this.props;
-    return enableSnap && loop && data && data.length && data.length > 1;
-  }
-
-  _shouldAnimateSlides(props = this.props) {
-    const { inactiveSlideOpacity = 1, inactiveSlideScale = 1 } = props;
-    return inactiveSlideOpacity < 1 || inactiveSlideScale < 1;
-  }
 
-  _shouldRepositionScroll(index: number) {
-    const { data, enableSnap, loopClonesPerSide = 3 } = this.props;
-    const dataLength = data && data.length;
-    return !(
-      !enableSnap ||
-      !dataLength ||
-      !this._enableLoop() ||
-      (index >= loopClonesPerSide && index < dataLength + loopClonesPerSide)
-    );
-  }
-
-  _isMultiple(x: number, y: number) {
-    return Math.round(Math.round(x / y) / (1 / y)) === Math.round(x);
-  }
+    const result = [...clones, ...data];
 
-  _getCustomData(props = this.props) {
-    const { data, loopClonesPerSide = 3 } = props;
-    const dataLength = data && data.length;
-
-    if (!dataLength) {
-      return [];
+    for (let i = 0; i < loopClonesPerSide; i++) {
+      result.push(data[i % data.length]);
     }
 
-    if (!this._enableLoop()) {
-      return data;
-    }
+    return result;
+  }, [data, loop, loopClonesPerSide]);
 
-    let previousItems = [];
-    let nextItems = [];
+  const getRealIndex = useCallback(
+    (index: number) => {
+      if (!loop) return index;
+      
+      const dataLength = data.length;
+      if (dataLength === 0) return 0;
 
-    if (loopClonesPerSide > dataLength) {
-      const dataMultiplier = Math.floor(loopClonesPerSide / dataLength);
-      const remainder = loopClonesPerSide % dataLength;
-
-      for (let i = 0; i < dataMultiplier; i++) {
-        previousItems.push(...data);
-        nextItems.push(...data);
+      let realIndex = index - loopClonesPerSide;
+      
+      if (realIndex < 0) {
+        realIndex = dataLength + realIndex;
+      } else if (realIndex >= dataLength) {
+        realIndex = realIndex % dataLength;
       }
 
-      previousItems.unshift(...data.slice(-remainder));
-      nextItems.push(...data.slice(0, remainder));
-    } else {
-      previousItems = data.slice(-loopClonesPerSide);
-      nextItems = data.slice(0, loopClonesPerSide);
-    }
-
-    return previousItems.concat(data, nextItems);
-  }
-
-  _getCustomDataLength(props = this.props) {
-    const { data, loopClonesPerSide = 3 } = props;
-    const dataLength = data && data.length;
-
-    if (!dataLength) {
-      return 0;
-    }
-
-    return this._enableLoop() ? dataLength + 2 * loopClonesPerSide : dataLength;
-  }
+      return realIndex;
+    },
+    [loop, loopClonesPerSide, data.length]
+  );
+
+  const getLoopIndex = useCallback(
+    (realIndex: number) => {
+      if (!loop) return realIndex;
+      return realIndex + loopClonesPerSide;
+    },
+    [loop, loopClonesPerSide]
+  );
+
+  const snapToItem = useCallback(
+    (index: number, animated = true, fireCallback = true) => {
+      if (!flatListRef.current || index < 0 || index >= data.length) {
+        return;
+      }
 
-  _getCustomIndex(index: number, props = this.props) {
-    const itemsLength = this._getCustomDataLength(props);
+      const loopIndex = getLoopIndex(index);
+      const offset = loopIndex * itemWidth;
 
-    if (!itemsLength || typeof index === 'undefined') {
-      return 0;
-    }
+      flatListRef.current.scrollToOffset({
+        offset,
+        animated,
+      });
 
-    return index;
-  }
+      currentIndexRef.current = index;
+      setCurrentIndex(index);
 
-  _getDataIndex(index: number) {
-    const { data, loopClonesPerSide = 3 } = this.props;
-    const dataLength = data && data.length;
-    if (!this._enableLoop() || !dataLength) {
-      return index;
+      if (fireCallback && onSnapToItem) {
+        onSnapToItem(index);
+      }
+    },
+    [data.length, getLoopIndex, itemWidth, onSnapToItem]
+  );
+
+  const snapToNext = useCallback(
+    (animated = true, fireCallback = true) => {
+      const nextIndex = (currentIndexRef.current + 1) % data.length;
+      snapToItem(nextIndex, animated, fireCallback);
+    },
+    [data.length, snapToItem]
+  );
+
+  const snapToPrev = useCallback(
+    (animated = true, fireCallback = true) => {
+      const prevIndex =
+        currentIndexRef.current === 0 ? data.length - 1 : currentIndexRef.current - 1;
+      snapToItem(prevIndex, animated, fireCallback);
+    },
+    [data.length, snapToItem]
+  );
+
+  const stopAutoplay = useCallback(() => {
+    if (autoplayTimerRef.current) {
+      clearInterval(autoplayTimerRef.current);
+      autoplayTimerRef.current = null;
+    }
+  }, []);
+
+  const pauseAutoPlay = useCallback(() => {
+    isAutoplayPausedRef.current = true;
+    stopAutoplay();
+  }, [stopAutoplay]);
+
+  const startAutoplay = useCallback(() => {
+    stopAutoplay();
+    isAutoplayPausedRef.current = false;
+
+    if (!autoplay || data.length <= 1) {
+      return;
     }
 
-    if (index >= dataLength + loopClonesPerSide) {
-      return loopClonesPerSide > dataLength
-        ? (index - loopClonesPerSide) % dataLength
-        : index - dataLength - loopClonesPerSide;
-    } else if (index < loopClonesPerSide) {
-      if (loopClonesPerSide > dataLength) {
-        const baseDataIndexes = [];
-        const dataIndexes = [];
-        const dataMultiplier = Math.floor(loopClonesPerSide / dataLength);
-        const remainder = loopClonesPerSide % dataLength;
-
-        for (let i = 0; i < dataLength; i++) {
-          baseDataIndexes.push(i);
+    const startTimer = () => {
+      autoplayTimerRef.current = setInterval(() => {
+        if (!isAutoplayPausedRef.current) {
+          snapToNext(true, true);
         }
+      }, autoplayInterval);
+    };
 
-        for (let j = 0; j < dataMultiplier; j++) {
-          dataIndexes.push(...baseDataIndexes);
+    if (autoplayDelay > 0) {
+      setTimeout(startTimer, autoplayDelay);
+    } else {
+      startTimer();
+    }
+  }, [autoplay, autoplayDelay, autoplayInterval, data.length, snapToNext, stopAutoplay]);
+
+  const handleLoopReposition = useCallback(
+    (index: number) => {
+      if (!loop || !flatListRef.current) return;
+
+      const dataLength = data.length;
+      if (dataLength === 0) return;
+
+      if (index < loopClonesPerSide) {
+        const realIndex = dataLength - (loopClonesPerSide - index);
+        const loopIndex = getLoopIndex(realIndex);
+        setTimeout(() => {
+          flatListRef.current?.scrollToOffset({
+            offset: loopIndex * itemWidth,
+            animated: false,
+          });
+        }, 50);
+      } else if (index >= dataLength + loopClonesPerSide) {
+        const realIndex = index - (dataLength + loopClonesPerSide);
+        const loopIndex = getLoopIndex(realIndex);
+        setTimeout(() => {
+          flatListRef.current?.scrollToOffset({
+            offset: loopIndex * itemWidth,
+            animated: false,
+          });
+        }, 50);
+      }
+    },
+    [loop, data.length, loopClonesPerSide, itemWidth, getLoopIndex]
+  );
+
+  const handleScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const offsetX = event.nativeEvent.contentOffset.x;
+      const index = Math.round(offsetX / itemWidth);
+      const realIndex = getRealIndex(index);
+
+      if (realIndex !== currentIndexRef.current) {
+        currentIndexRef.current = realIndex;
+        setCurrentIndex(realIndex);
+        
+        if (onScrollIndexChanged) {
+          onScrollIndexChanged(realIndex);
         }
-
-        dataIndexes.unshift(...baseDataIndexes.slice(-remainder));
-        return dataIndexes[index];
-      } else {
-        return index + dataLength - loopClonesPerSide;
       }
-    } else {
-      return index - loopClonesPerSide;
-    }
-  }
-
-  _getFirstItem(index: number, props = this.props) {
-    const { loopClonesPerSide = 3 } = props;
-    const itemsLength = this._getCustomDataLength(props);
-
-    if (!itemsLength || index > itemsLength - 1 || index < 0) {
-      return 0;
-    }
-
-    return this._enableLoop() ? index + loopClonesPerSide : index;
-  }
-
-  _getWrappedRef() {
-    return this._carouselRef;
-  }
-
-  _getScrollEnabled() {
-    return this._scrollEnabled;
-  }
-
-  _setScrollEnabled(scrollEnabled = true) {
-    this._scrollEnabled = scrollEnabled;
-  }
-
-  _getItemMainDimension() {
-    const { itemWidth } = this.state;
-    const { full } = this.props;
-    return full ? itemWidth : itemWidth + Spacing.S;
-  }
-
-  _getItemScrollOffset(index: number) {
-    return (
-      this._positions && this._positions[index] && this._positions[index].start
-    );
-  }
+    },
+    [itemWidth, getRealIndex, onScrollIndexChanged]
+  );
 
-  _getItemLayout(_: any, index: number) {
-    const itemMainDimension = this._getItemMainDimension();
-    return {
-      index,
-      length: itemMainDimension,
-      offset: itemMainDimension * index,
-    };
-  }
-
-  _getKeyExtractor(_: any, index: any) {
-    return `flatlist-item-${index}`;
-  }
-
-  _getScrollOffset(event: NativeSyntheticEvent<NativeScrollEvent>) {
-    return event.nativeEvent.contentOffset.x;
-  }
-
-  _getActiveSlideOffset() {
-    const { activeSlideOffset = 0 } = this.props;
-    const itemMainDimension = this._getItemMainDimension();
-    const minOffset = 10;
-    return itemMainDimension / 2 - activeSlideOffset >= minOffset
-      ? activeSlideOffset
-      : minOffset;
-  }
-
-  _getActiveItem(offset: number) {
-    const itemMainDimension = this._getItemMainDimension();
-    const center = offset + itemMainDimension / 2;
-    const activeSlideOffset = this._getActiveSlideOffset();
-    const lastIndex = this._positions.length - 1;
-    let itemIndex;
+  const handleMomentumScrollEnd = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const offsetX = event.nativeEvent.contentOffset.x;
+      const index = Math.round(offsetX / itemWidth);
+      const realIndex = getRealIndex(index);
 
-    if (offset <= 0) {
-      return 0;
-    }
+      currentIndexRef.current = realIndex;
+      setCurrentIndex(realIndex);
 
-    if (
-      this._positions[lastIndex] &&
-      offset >= this._positions[lastIndex].start
-    ) {
-      return lastIndex;
-    }
-
-    for (let i = 0; i < this._positions.length; i++) {
-      const { start, end } = this._positions[i];
-      if (
-        center + activeSlideOffset >= start &&
-        center - activeSlideOffset <= end
-      ) {
-        itemIndex = i;
-        break;
+      if (onSnapToItem) {
+        onSnapToItem(realIndex);
       }
-    }
 
-    return itemIndex || 0;
-  }
+      handleLoopReposition(index);
 
-  _initPositionsAndInterpolators(props = this.props) {
-    const { data } = props;
-    const itemMainDimension = this._getItemMainDimension();
-
-    if (!data || !data.length) {
-      return;
-    }
-
-    const interpolators: any[] = [];
-    this._positions = [];
-
-    this._getCustomData(props).forEach((_itemData, index) => {
-      const _index = this._getCustomIndex(index, props);
-      let animatedValue;
-
-      this._positions[index] = {
-        start: index * itemMainDimension,
-        end: index * itemMainDimension + itemMainDimension,
+      if (onMomentumScrollEndProp) {
+        onMomentumScrollEndProp(event);
+      }
+    },
+    [itemWidth, getRealIndex, onSnapToItem, handleLoopReposition, onMomentumScrollEndProp]
+  );
+
+  const handleTouchStart = useCallback(
+    (event: any) => {
+      if (autoplay) {
+        pauseAutoPlay();
+      }
+      if (onTouchStartProp) {
+        onTouchStartProp(event);
+      }
+    },
+    [autoplay, pauseAutoPlay, onTouchStartProp]
+  );
+
+  const handleTouchEnd = useCallback(
+    (event: GestureResponderEvent) => {
+      if (autoplay && !isAutoplayPausedRef.current) {
+        startAutoplay();
+      }
+      if (onTouchEndProp) {
+        onTouchEndProp(event);
+      }
+    },
+    [autoplay, startAutoplay, onTouchEndProp]
+  );
+
+  const handleLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      const { width } = event.nativeEvent.layout;
+      containerWidthRef.current = width;
+      setContainerWidth(width);
+      setIsLayoutReady(true);
+
+      if (onLayoutProp) {
+        onLayoutProp(event);
+      }
+    },
+    [onLayoutProp]
+  );
+
+  const getItemLayout = useCallback(
+    (data: any, index: number) => {
+      if (getItemLayoutProp) {
+        return getItemLayoutProp(data, index);
+      }
+      return {
+        length: itemWidth,
+        offset: itemWidth * index,
+        index,
       };
-
-      if (!this._shouldAnimateSlides(props) || !this._scrollPos) {
-        animatedValue = new Animated.Value(1);
-      } else {
-        let interpolator = defaultScrollInterpolator(
-          _index,
-          this.state.itemWidth,
+    },
+    [itemWidth, getItemLayoutProp]
+  );
+
+  const renderAnimatedItem = useCallback(
+    ({ item, index }: { item: any; index: number }) => {
+      const realIndex = getRealIndex(index);
+      const hasOpacityAnimation = inactiveSlideOpacity < 1;
+      const hasScaleAnimation = inactiveSlideScale < 1;
+
+      if (!hasOpacityAnimation && !hasScaleAnimation) {
+        return (
+          <View style={[{ width: itemWidth }, slideStyle]}>
+            {renderItem({ item, index: realIndex })}
+          </View>
         );
-
-        animatedValue = this._scrollPos.interpolate({
-          ...interpolator,
-          extrapolate: 'clamp',
-        });
-      }
-
-      interpolators.push(animatedValue);
-    });
-
-    this.setState({ interpolators });
-  }
-
-  _repositionScroll(index: number, animated = false) {
-    const { data, loopClonesPerSide = 3 } = this.props;
-    const dataLength = data && data.length;
-
-    if (typeof index === 'undefined' || !this._shouldRepositionScroll(index)) {
-      return;
-    }
-
-    let repositionTo = index;
-
-    if (index >= dataLength + loopClonesPerSide) {
-      repositionTo = index - dataLength;
-    } else if (index < loopClonesPerSide) {
-      repositionTo = index + dataLength;
-    }
-
-    this._snapToItem(repositionTo, animated, false);
-  }
-
-  _onTouchStart(event: any) {
-    const { onTouchStart } = this.props;
-
-    if (this._getScrollEnabled() !== false && this._autoplaying) {
-      this.pauseAutoPlay();
-    }
-
-    onTouchStart && onTouchStart(event);
-  }
-
-  _onTouchEnd(event: GestureResponderEvent) {
-    const { onTouchEnd } = this.props;
-
-    if (
-      this._getScrollEnabled() !== false &&
-      this._autoplay &&
-      !this._autoplaying
-    ) {
-      this.startAutoplay();
-    }
-
-    onTouchEnd && onTouchEnd(event);
-  }
-
-  _onScroll(event: NativeSyntheticEvent<NativeScrollEvent>) {
-    const { onScroll, onScrollIndexChanged, onSnapToItem } = this.props;
-    const scrollOffset = event
-      ? this._getScrollOffset(event)
-      : this._currentScrollOffset;
-    const nextActiveItem = this._getActiveItem(scrollOffset);
-    const dataLength = this._getCustomDataLength();
-    const lastItemScrollOffset = this._getItemScrollOffset(dataLength - 1);
-
-    this._currentScrollOffset = scrollOffset;
-
-    if (nextActiveItem !== this._onScrollActiveItem) {
-      this._onScrollActiveItem = nextActiveItem;
-      onScrollIndexChanged &&
-        onScrollIndexChanged(this._getDataIndex(nextActiveItem));
-
-      onSnapToItem && onSnapToItem(this._getDataIndex(nextActiveItem));
-    }
-
-    if (
-      (IS_IOS && scrollOffset > lastItemScrollOffset) ||
-      (IS_ANDROID &&
-        Math.floor(scrollOffset) > Math.floor(lastItemScrollOffset))
-    ) {
-      this._activeItem = nextActiveItem;
-      this._repositionScroll(nextActiveItem);
-    }
-
-    if (typeof onScroll === 'function' && event) {
-      onScroll(event);
-    }
-  }
-
-  _onMomentumScrollEnd(event: NativeSyntheticEvent<NativeScrollEvent>) {
-    const { autoplayDelay, onMomentumScrollEnd, onSnapToItem } = this.props;
-    const { itemWidth } = this.state;
-    const scrollOffset = event
-      ? this._getScrollOffset(event)
-      : this._currentScrollOffset;
-    const nextActiveItem = this._getActiveItem(scrollOffset);
-    const hasSnapped = this._isMultiple(scrollOffset, itemWidth);
-
-    if (nextActiveItem !== this._activeItem) {
-      this._activeItem = nextActiveItem;
-      onSnapToItem && onSnapToItem(this._getDataIndex(nextActiveItem));
-
-      if (hasSnapped && IS_ANDROID) {
-        this._repositionScroll(nextActiveItem);
-      } else if (IS_IOS) {
-        this._repositionScroll(nextActiveItem);
       }
-    }
-
-    onMomentumScrollEnd && onMomentumScrollEnd(event);
-
-    if (IS_ANDROID && this._autoplay && !this._autoplaying) {
-      if (this._enableAutoplayTimeout != null)
-        clearTimeout(this._enableAutoplayTimeout);
-      this._enableAutoplayTimeout = setTimeout(() => {
-        this.startAutoplay();
-      }, autoplayDelay);
-    }
-  }
-
-  _onLayout(event: LayoutChangeEvent) {
-    const { onLayout, visibleItem = 1 } = this.props;
-
-    if (this._onLayoutInitDone) {
-      this._initPositionsAndInterpolators();
-      this._snapToItem(this._activeItem, false, false, true);
-    } else {
-      this._onLayoutInitDone = true;
-    }
-    const containerWidth = event.nativeEvent.layout.width;
-    let itemWidth =
-      this.props.visibleItem === 1
-        ? screenWidth - Spacing.M * 2
-        : Math.ceil(
-            (containerWidth * 0.9 - visibleItem * Spacing.S) / visibleItem,
-          );
-    if (this.props.itemWidth) {
-      itemWidth = this.props.itemWidth;
-    }
-    if (this.props.full) {
-      itemWidth = containerWidth;
-    }
-
-    this.setState({ containerWidth, itemWidth });
-
-    onLayout && onLayout(event);
-  }
-
-  _getPositionIndex(index: number) {
-    const { loop, loopClonesPerSide = 3 } = this.props;
-    return loop ? index + loopClonesPerSide : index;
-  }
-
-  _snapToItem(
-    index: number,
-    animated = true,
-    fireCallback = true,
-    forceScrollTo = false,
-  ) {
-    const { onSnapToItem } = this.props;
-    const itemsLength = this._getCustomDataLength();
-    const wrappedRef = this._getWrappedRef();
-    if (!itemsLength || !wrappedRef) {
-      return;
-    }
-
-    if (!index || index < 0) {
-      index = 0;
-    } else if (itemsLength > 0 && index >= itemsLength) {
-      index = itemsLength - 1;
-    }
-
-    if (index === this._activeItem && !forceScrollTo) {
-      return;
-    }
-
-    this._carouselRef.scrollToIndex({
-      index,
-      animated: true,
-    });
 
-    const requiresManualTrigger = !animated || IS_ANDROID;
-    if (requiresManualTrigger) {
-      this._activeItem = index;
-
-      if (fireCallback) {
-        onSnapToItem && onSnapToItem(this._getDataIndex(index));
+      const inputRange = [
+        (index - 1) * itemWidth,
+        index * itemWidth,
+        (index + 1) * itemWidth,
+      ];
+
+      const opacity = hasOpacityAnimation
+        ? scrollXRef.interpolate({
+            inputRange,
+            outputRange: [inactiveSlideOpacity, 1, inactiveSlideOpacity],
+            extrapolate: 'clamp',
+          })
+        : 1;
+
+      const scale = hasScaleAnimation
+        ? scrollXRef.interpolate({
+            inputRange,
+            outputRange: [inactiveSlideScale, 1, inactiveSlideScale],
+            extrapolate: 'clamp',
+          })
+        : 1;
+
+      return (
+        <Animated.View
+          style={[
+            { width: itemWidth },
+            slideStyle,
+            {
+              opacity,
+              transform: [{ scale }],
+            },
+          ]}
+        >
+          {renderItem({ item, index: realIndex })}
+        </Animated.View>
+      );
+    },
+    [
+      getRealIndex,
+      inactiveSlideOpacity,
+      inactiveSlideScale,
+      itemWidth,
+      slideStyle,
+      renderItem,
+      scrollXRef,
+    ]
+  );
+
+  const handleKeyExtractor = useCallback(
+    (item: any, index: number) => {
+      if (keyExtractor) {
+        return keyExtractor(item, index);
       }
-
-      if (IS_ANDROID && this._shouldRepositionScroll(index)) {
-        if (animated) {
-          this._androidRepositioningTimeout = setTimeout(() => {
-            this._repositionScroll(index, false);
-          }, 400);
-        } else {
-          this._repositionScroll(index);
-        }
+      return `carousel-item-${index}`;
+    },
+    [keyExtractor]
+  );
+
+  const onScrollEvent = useMemo(() => {
+    const scrollHandler = Animated.event(
+      [{ nativeEvent: { contentOffset: { x: scrollXRef } } }],
+      {
+        useNativeDriver: true,
+        listener: handleScroll,
       }
-    }
-  }
-
-  _renderItem(info: { item: any; index: number }) {
-    const { item, index } = info;
-    const { interpolators, itemWidth } = this.state;
-    const { slideStyle, full } = this.props;
-    const animatedValue = interpolators && interpolators[index];
-
-    if (typeof animatedValue === 'undefined') {
-      return null;
-    }
-
-    const animate = this._shouldAnimateSlides();
-    const Component = animate ? Animated.View : View;
-    const mainDimension = { width: itemWidth };
-
-    let spacingStyle: ViewStyle = this.props.loop
-      ? { marginLeft: Spacing.S }
-      : {
-          marginLeft: index === 0 ? Spacing.M : 0,
-          marginRight:
-            index === this._getCustomDataLength() - 1 ? Spacing.M : Spacing.S,
-        };
-
-    if (full) {
-      spacingStyle = {};
-    }
-    const animatedStyle = defaultAnimatedStyles(animatedValue, this.props);
-    return (
-      <Component
-        style={[
-          mainDimension,
-          animatedStyle,
-          { overflow: 'hidden' },
-          spacingStyle,
-          slideStyle,
-        ]}
-        pointerEvents="box-none"
-      >
-        {this.props.renderItem({
-          item,
-          index,
-        })}
-      </Component>
     );
-  }
-
-  startAutoplay() {
-    const { autoplayInterval, autoplayDelay } = this.props;
-    this._autoplay = true;
-
-    if (this._autoplaying) {
-      return;
-    }
-
-    if (this._autoplayTimeout != null) clearTimeout(this._autoplayTimeout);
-    this._autoplayTimeout = setTimeout(() => {
-      this._autoplaying = true;
-      this._autoplayInterval = setInterval(() => {
-        if (this._autoplaying) {
-          this.snapToNext();
-        }
-      }, autoplayInterval);
-    }, autoplayDelay);
-  }
-
-  pauseAutoPlay() {
-    this._autoplaying = false;
-    if (this._autoplayTimeout != null) clearTimeout(this._autoplayTimeout);
-    if (this._enableAutoplayTimeout != null)
-      clearTimeout(this._enableAutoplayTimeout);
-    if (this._autoplayInterval != null) clearInterval(this._autoplayInterval);
-  }
 
-  stopAutoplay() {
-    this._autoplay = false;
-    this.pauseAutoPlay();
-  }
-
-  snapToItem(index: number, animated = true, fireCallback = true) {
-    if (!index || index < 0) {
-      index = 0;
+    if (onScrollProp) {
+      return (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+        scrollHandler(event);
+        onScrollProp(event);
+      };
     }
 
-    const positionIndex = this._getPositionIndex(index);
+    return scrollHandler;
+  }, [scrollXRef, handleScroll, onScrollProp]);
 
-    if (positionIndex === this._activeItem) {
-      return;
+  useEffect(() => {
+    if (isLayoutReady && firstItem > 0 && firstItem < data.length) {
+      setTimeout(() => {
+        snapToItem(firstItem, false, false);
+      }, 50);
     }
+  }, [isLayoutReady, firstItem, data.length, snapToItem]);
 
-    this._snapToItem(positionIndex, animated, fireCallback);
-  }
-
-  snapToNext(animated = true, fireCallback = true) {
-    const itemsLength = this._getCustomDataLength();
-
-    let newIndex = this._activeItem + 1;
-    if (newIndex > itemsLength - 1) {
-      newIndex = 0;
+  useEffect(() => {
+    if (autoplay && data.length > 1) {
+      startAutoplay();
     }
-    this._snapToItem(newIndex, animated, fireCallback);
-  }
-
-  snapToPrev(animated = true, fireCallback = true) {
-    const itemsLength = this._getCustomDataLength();
 
-    let newIndex = this._activeItem - 1;
-    if (newIndex < 0) {
-      newIndex = itemsLength - 1;
-    }
-    this._snapToItem(newIndex, animated, fireCallback);
-  }
-
-  render() {
-    const {
-      loopClonesPerSide = 3,
-      visibleItem = 1,
-      firstItem = 0,
-      getItemLayout,
-      keyExtractor,
-      style,
-      disableIntervalMomentum,
-      enableSnap,
-      contentContainerStyle,
-    } = this.props;
-    const { hideCarousel } = this.state;
-
-    const initialNumPerSide = this._enableLoop() ? loopClonesPerSide : 2;
-    const initialNumToRender =
-      visibleItem > 2
-        ? visibleItem + initialNumPerSide * 2
-        : initialNumPerSide * 2;
-    const maxToRenderPerBatch = initialNumToRender;
-    const windowSize = maxToRenderPerBatch;
-
-    const snapToInterval = enableSnap
-      ? this._getItemMainDimension()
-      : undefined;
-
-    const specificProps = {
-      getItemLayout: getItemLayout || this._getItemLayout,
-      initialScrollIndex: this._getFirstItem(firstItem),
-      keyExtractor: keyExtractor || this._getKeyExtractor,
-      renderItem: this._renderItem,
+    return () => {
+      stopAutoplay();
     };
-
-    return (
-      <Animated.FlatList
-        {...this.props}
-        {...specificProps}
-        ref={c => {
-          this._carouselRef = c;
-        }}
-        overScrollMode={'never'}
-        snapToInterval={
-          this.props.snapToInterval ? this.props.snapToInterval : snapToInterval
-        }
+  }, [autoplay, data.length, startAutoplay, stopAutoplay]);
+
+  useEffect(() => {
+    if (apparitionDelay > 0) {
+      const timer = setTimeout(() => {
+        setIsVisible(true);
+      }, apparitionDelay);
+
+      return () => clearTimeout(timer);
+    }
+  }, [apparitionDelay]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      snapToItem,
+      snapToNext,
+      snapToPrev,
+      startAutoplay,
+      pauseAutoplay: pauseAutoPlay,
+      stopAutoplay,
+    }),
+    [snapToItem, snapToNext, snapToPrev, startAutoplay, pauseAutoPlay, stopAutoplay]  // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  if (!isVisible) {
+    return <View style={[styles.container, style]} />;
+  }
+
+  return (
+    <View style={[styles.container, style]} onLayout={handleLayout}>
+      <AnimatedFlatList
+        ref={flatListRef}
+        data={dataWithClones}
+        renderItem={renderAnimatedItem}
+        keyExtractor={handleKeyExtractor}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        scrollEnabled={scrollEnabled}
+        scrollEventThrottle={16}
+        onScroll={onScrollEvent}
+        onMomentumScrollEnd={handleMomentumScrollEnd}
+        onTouchStart={handleTouchStart}
+        onTouchEnd={handleTouchEnd}
+        snapToInterval={enableSnap ? (snapToInterval as number) : undefined}
+        snapToAlignment={enableSnap ? 'start' : undefined}
+        decelerationRate={enableSnap ? 'fast' : 'normal'}
         disableIntervalMomentum={disableIntervalMomentum}
-        pointerEvents={hideCarousel ? 'none' : 'auto'}
-        decelerationRate={'fast'}
-        numColumns={1}
-        style={[
-          style,
-          { width: '100%', flexDirection: 'row' },
-          hideCarousel ? { opacity: 0 } : {},
-        ]}
-        automaticallyAdjustContentInsets={false}
-        directionalLockEnabled
+        getItemLayout={getItemLayout}
         contentContainerStyle={contentContainerStyle}
-        disableScrollViewPanResponder={false}
-        pinchGestureEnabled={false}
-        scrollsToTop={false}
-        showsHorizontalScrollIndicator={false}
-        showsVerticalScrollIndicator={false}
-        initialNumToRender={initialNumToRender}
-        maxToRenderPerBatch={maxToRenderPerBatch}
-        windowSize={windowSize}
-        pagingEnabled={enableSnap}
-        data={this._getCustomData()}
-        horizontal
-        scrollEventThrottle={1}
-        onLayout={this._onLayout}
-        onMomentumScrollEnd={this._onMomentumScrollEnd}
-        onScroll={this._onScrollHandler}
-        onTouchStart={this._onTouchStart}
-        onTouchEnd={this._onTouchEnd}
+        removeClippedSubviews={false}
+        initialNumToRender={Math.min(10, dataWithClones.length)}
+        maxToRenderPerBatch={5}
+        windowSize={5}
       />
-    );
-  }
-}
+    </View>
+  );
+});
 
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+  },
+});
+
+Carousel.displayName = 'Carousel';
+
+export default Carousel;
 export { Carousel };
 export type { CarouselProps, CarouselRef };
+

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/carousel",
-    "version": "0.151.2-beta.2",
+    "version": "0.152.1-beta.2",
     "private": false,
     "main": "index.tsx",
     "peerDependencies": {