@momo-kits/carousel 0.80.1-beta.2 → 0.80.4-beta.2

package/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {
   Animated,
   Dimensions,
-  I18nManager,
+  GestureResponderEvent,
   LayoutChangeEvent,
   NativeScrollEvent,
   NativeSyntheticEvent,
@@ -10,12 +10,11 @@ import {
   View,
 } from 'react-native';
 import {defaultAnimatedStyles, defaultScrollInterpolator} from './animation';
-import {CarouselProps, CarouselState, Position} from './types';
+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 IS_RTL = I18nManager.isRTL;
 const screenWidth = Dimensions.get('window').width;
 
 export default class Carousel extends React.PureComponent<
@@ -23,7 +22,7 @@ export default class Carousel extends React.PureComponent<
   CarouselState
 > {
   static defaultProps = {
-    activeSlideAlignment: 'center',
+    activeSlideAlignment: 'start',
     activeSlideOffset: 20,
     apparitionDelay: 0,
     autoplay: false,
@@ -35,10 +34,6 @@ export default class Carousel extends React.PureComponent<
     enableSnap: true,
     firstItem: 0,
     hasParallaxImages: false,
-    inactiveSlideOpacity: 0.7,
-    inactiveSlideScale: 0.9,
-    inactiveSlideShift: 0,
-    layout: 'default',
     loop: false,
     loopClonesPerSide: 3,
     scrollEnabled: true,
@@ -61,7 +56,6 @@ export default class Carousel extends React.PureComponent<
   _scrollEnabled;
   _initTimeout?: NodeJS.Timeout;
   _apparitionTimeout?: NodeJS.Timeout;
-  _hackSlideAnimationTimeout?: NodeJS.Timeout;
   _enableAutoplayTimeout?: NodeJS.Timeout;
   _autoplayTimeout?: NodeJS.Timeout;
   _snapNoMomentumTimeout?: NodeJS.Timeout;
@@ -71,9 +65,8 @@ export default class Carousel extends React.PureComponent<
   _autoplay?: boolean;
   _autoplaying?: boolean;
   _autoplayInterval?: NodeJS.Timeout;
-  _carouselRef?: {scrollTo: any; scrollToOffset: any; getNode: () => any};
+  _carouselRef: any;
   _onLayoutInitDone?: boolean;
-  itemWidth: number;
   constructor(props: CarouselProps) {
     super(props);
 
@@ -81,6 +74,7 @@ export default class Carousel extends React.PureComponent<
       hideCarousel: !!props.apparitionDelay,
       interpolators: [],
       containerWidth: screenWidth,
+      itemWidth: screenWidth - Spacing.L * 2,
     };
 
     const initialActiveItem = this._getFirstItem(props.firstItem);
@@ -93,9 +87,6 @@ export default class Carousel extends React.PureComponent<
     this._positions = [];
     this._currentScrollOffset = 0;
     this._scrollEnabled = props.scrollEnabled;
-    this.itemWidth =
-      (this.state.containerWidth * 0.9 - (props.visibleItem - 1) * 12) /
-      props.visibleItem;
 
     this._getItemLayout = this._getItemLayout.bind(this);
     this._getKeyExtractor = this._getKeyExtractor.bind(this);
@@ -108,20 +99,8 @@ export default class Carousel extends React.PureComponent<
     this._setScrollHandler(props);
   }
 
-  get realIndex() {
-    return this._activeItem;
-  }
-
-  get currentIndex() {
-    return this._getDataIndex(this._activeItem);
-  }
-
-  get currentScrollPosition() {
-    return this._currentScrollOffset;
-  }
-
   componentDidMount() {
-    const {apparitionDelay, autoplay, firstItem} = this.props;
+    const {apparitionDelay, autoplay} = this.props;
 
     this._mounted = true;
     this._initPositionsAndInterpolators();
@@ -179,10 +158,6 @@ export default class Carousel extends React.PureComponent<
       this._previousItemsLength = itemsLength;
 
       this._initPositionsAndInterpolators(this.props);
-
-      if (this._previousItemsLength > itemsLength) {
-        this._hackActiveSlideAnimation(nextActiveItem);
-      }
     } else if (
       nextFirstItem !== this._previousFirstItem &&
       nextFirstItem !== this._activeItem
@@ -202,7 +177,6 @@ export default class Carousel extends React.PureComponent<
     this.stopAutoplay();
     clearTimeout(this._initTimeout);
     clearTimeout(this._apparitionTimeout);
-    clearTimeout(this._hackSlideAnimationTimeout);
     clearTimeout(this._enableAutoplayTimeout);
     clearTimeout(this._autoplayTimeout);
     clearTimeout(this._snapNoMomentumTimeout);
@@ -231,28 +205,14 @@ export default class Carousel extends React.PureComponent<
     this._onScrollHandler = Animated.event(argMapping, scrollEventConfig);
   }
 
-  _needsRTLAdaptations() {
-    return IS_RTL && IS_ANDROID;
-  }
-
   _enableLoop() {
     const {data, enableSnap, loop} = this.props;
     return enableSnap && loop && data && data.length && data.length > 1;
   }
 
   _shouldAnimateSlides(props = this.props) {
-    const {
-      inactiveSlideOpacity,
-      inactiveSlideScale,
-      scrollInterpolator,
-      slideInterpolatedStyle,
-    } = props;
-    return (
-      inactiveSlideOpacity < 1 ||
-      inactiveSlideScale < 1 ||
-      !!scrollInterpolator ||
-      !!slideInterpolatedStyle
-    );
+    const {inactiveSlideOpacity, inactiveSlideScale} = props;
+    return inactiveSlideOpacity < 1 || inactiveSlideScale < 1;
   }
 
   _shouldRepositionScroll(index: number) {
@@ -322,7 +282,7 @@ export default class Carousel extends React.PureComponent<
       return 0;
     }
 
-    return this._needsRTLAdaptations() ? itemsLength - index - 1 : index;
+    return index;
   }
 
   _getDataIndex(index: number) {
@@ -360,19 +320,6 @@ export default class Carousel extends React.PureComponent<
       return index - loopClonesPerSide;
     }
   }
-  //
-  // _getPositionIndex(index: number) {
-  //   const {loop, loopClonesPerSide} = this.props;
-  //   return loop ? index + loopClonesPerSide : index;
-  // }
-
-  _getSnapOffsets(props = this.props) {
-    const offset = this._getItemMainDimension();
-    if (!props.enableSnap) return;
-    return [...Array(this._getCustomDataLength(props))].map((_, i) => {
-      return i * offset;
-    });
-  }
 
   _getFirstItem(index: number, props = this.props) {
     const {loopClonesPerSide} = props;
@@ -386,14 +333,7 @@ export default class Carousel extends React.PureComponent<
   }
 
   _getWrappedRef() {
-    if (this._carouselRef && this._carouselRef.scrollToOffset) {
-      return this._carouselRef;
-    }
-    return (
-      this._carouselRef &&
-      this._carouselRef.getNode &&
-      this._carouselRef.getNode()
-    );
+    return this._carouselRef;
   }
 
   _getScrollEnabled() {
@@ -401,23 +341,12 @@ export default class Carousel extends React.PureComponent<
   }
 
   _setScrollEnabled(scrollEnabled = true) {
-    const wrappedRef = this._getWrappedRef();
-
-    if (!wrappedRef || !wrappedRef.setNativeProps) {
-      return;
-    }
-
-    wrappedRef.setNativeProps({scrollEnabled});
     this._scrollEnabled = scrollEnabled;
   }
 
   _getItemMainDimension() {
-    const {containerWidth} = this.state;
-    const {visibleItem = 1} = this.props;
-    return (
-      (containerWidth * 0.9 - (visibleItem - 1) * Spacing.M) / visibleItem +
-      Spacing.M
-    );
+    const {itemWidth} = this.state;
+    return itemWidth + Spacing.S;
   }
 
   _getItemScrollOffset(index: number) {
@@ -485,17 +414,11 @@ export default class Carousel extends React.PureComponent<
   }
 
   _getSlideInterpolatedStyle(index: number, animatedValue: Animated.Value) {
-    const {slideInterpolatedStyle} = this.props;
-
-    if (slideInterpolatedStyle) {
-      return slideInterpolatedStyle(index, animatedValue, this.props);
-    } else {
-      return defaultAnimatedStyles(index, animatedValue, this.props);
-    }
+    return defaultAnimatedStyles(animatedValue, this.props);
   }
 
   _initPositionsAndInterpolators(props = this.props) {
-    const {data, scrollInterpolator} = props;
+    const {data} = props;
     const itemMainDimension = this._getItemMainDimension();
 
     if (!data || !data.length) {
@@ -517,19 +440,10 @@ export default class Carousel extends React.PureComponent<
       if (!this._shouldAnimateSlides(props) || !this._scrollPos) {
         animatedValue = new Animated.Value(1);
       } else {
-        let interpolator;
-
-        if (scrollInterpolator) {
-          interpolator = scrollInterpolator(_index, props);
-        }
-
-        if (
-          !interpolator ||
-          !interpolator.inputRange ||
-          !interpolator.outputRange
-        ) {
-          interpolator = defaultScrollInterpolator(_index, props);
-        }
+        let interpolator = defaultScrollInterpolator(
+          _index,
+          this.state.itemWidth,
+        );
 
         animatedValue = this._scrollPos.interpolate({
           ...interpolator,
@@ -543,30 +457,6 @@ export default class Carousel extends React.PureComponent<
     this.setState({interpolators});
   }
 
-  _hackActiveSlideAnimation(index: number, scrollValue = 1) {
-    const offset = this._getItemScrollOffset(index);
-
-    if (!this._mounted || !this._carouselRef || typeof offset === 'undefined') {
-      return;
-    }
-
-    const multiplier = this._currentScrollOffset === 0 ? 1 : -1;
-    const scrollDelta = scrollValue * multiplier;
-
-    this._scrollTo({
-      offset: offset + scrollDelta,
-      animated: false,
-    });
-
-    clearTimeout(this._hackSlideAnimationTimeout);
-    this._hackSlideAnimationTimeout = setTimeout(() => {
-      this._scrollTo({
-        offset,
-        animated: false,
-      });
-    }, 1);
-  }
-
   _repositionScroll(index: number, animated = false) {
     const {data, loopClonesPerSide} = this.props;
     const dataLength = data && data.length;
@@ -586,36 +476,6 @@ export default class Carousel extends React.PureComponent<
     this._snapToItem(repositionTo, animated, false);
   }
 
-  _scrollTo(info: {offset?: number; index?: number; animated?: boolean}) {
-    const {offset, index, animated = true} = info;
-    const wrappedRef = this._getWrappedRef();
-    if (
-      !this._mounted ||
-      !wrappedRef ||
-      (typeof offset === 'undefined' && typeof index === 'undefined')
-    ) {
-      return;
-    }
-
-    let scrollToOffset;
-    if (typeof index !== 'undefined') {
-      scrollToOffset = this._getItemScrollOffset(index);
-    } else {
-      scrollToOffset = offset;
-    }
-
-    if (typeof scrollToOffset === 'undefined') {
-      return;
-    }
-
-    const options = {
-      offset,
-      animated,
-    };
-
-    wrappedRef.scrollToOffset(options);
-  }
-
   _onTouchStart(event: any) {
     const {onTouchStart} = this.props;
 
@@ -626,7 +486,7 @@ export default class Carousel extends React.PureComponent<
     onTouchStart && onTouchStart(event);
   }
 
-  _onTouchEnd(event: NativeSyntheticEvent<NativeScrollEvent>) {
+  _onTouchEnd(event: GestureResponderEvent) {
     const {onTouchEnd} = this.props;
 
     if (
@@ -675,11 +535,12 @@ export default class Carousel extends React.PureComponent<
 
   _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, this.itemWidth);
+    const hasSnapped = this._isMultiple(scrollOffset, itemWidth);
 
     if (nextActiveItem !== this._activeItem) {
       this._activeItem = nextActiveItem;
@@ -703,7 +564,7 @@ export default class Carousel extends React.PureComponent<
   }
 
   _onLayout(event: LayoutChangeEvent) {
-    const {onLayout} = this.props;
+    const {onLayout, visibleItem} = this.props;
 
     if (this._onLayoutInitDone) {
       this._initPositionsAndInterpolators();
@@ -711,11 +572,25 @@ export default class Carousel extends React.PureComponent<
     } else {
       this._onLayoutInitDone = true;
     }
+    const containerWidth = event.nativeEvent.layout.width;
+    const itemWidth =
+      this.props.itemWidth ||
+      (this.props.visibleItem === 1
+        ? screenWidth - Spacing.M * 2
+        : Math.ceil(
+            (containerWidth * 0.9 - visibleItem * Spacing.S) / visibleItem,
+          ));
+
+    this.setState({containerWidth, itemWidth});
 
-    this.setState({containerWidth: event.nativeEvent.layout.width});
     onLayout && onLayout(event);
   }
 
+  _getPositionIndex(index: number) {
+    const {loop, loopClonesPerSide} = this.props;
+    return loop ? index + loopClonesPerSide : index;
+  }
+
   _snapToItem(
     index: number,
     animated = true,
@@ -739,15 +614,9 @@ export default class Carousel extends React.PureComponent<
       return;
     }
 
-    const offset = this._getItemScrollOffset(index);
-
-    if (offset === undefined) {
-      return;
-    }
-
-    this._scrollTo({
-      offset,
-      animated,
+    this._carouselRef.scrollToIndex({
+      index,
+      animated: true,
     });
 
     const requiresManualTrigger = !animated || IS_ANDROID;
@@ -770,6 +639,50 @@ export default class Carousel extends React.PureComponent<
     }
   }
 
+  _renderItem(info: {item: any; index: number}) {
+    const {item, index} = info;
+    const {interpolators, itemWidth} = this.state;
+    const {slideStyle} = this.props;
+    const animatedValue = interpolators && interpolators[index];
+
+    if (typeof animatedValue === 'undefined') {
+      return null;
+    }
+
+    const animate = this._shouldAnimateSlides();
+    const Component = animate ? Animated.View : View;
+    // const animatedStyle = animate
+    //   ? this._getSlideInterpolatedStyle(index, animatedValue)
+    //   : {};
+
+    const mainDimension = {width: itemWidth};
+
+    return (
+      <Component
+        style={[
+          mainDimension,
+          slideStyle,
+          // animatedStyle,
+          {overflow: 'hidden'},
+          this.props.loop
+            ? {marginLeft: Spacing.S}
+            : {
+                marginLeft: index === 0 ? Spacing.M : 0,
+                marginRight:
+                  index === this._getCustomDataLength() - 1
+                    ? Spacing.M
+                    : Spacing.S,
+              },
+        ]}
+        pointerEvents="box-none">
+        {this.props.renderItem({
+          item,
+          index,
+        })}
+      </Component>
+    );
+  }
+
   startAutoplay() {
     const {autoplayInterval, autoplayDelay} = this.props;
     this._autoplay = true;
@@ -801,6 +714,20 @@ export default class Carousel extends React.PureComponent<
     this.pauseAutoPlay();
   }
 
+  snapToItem(index: number, animated = true, fireCallback = true) {
+    if (!index || index < 0) {
+      index = 0;
+    }
+
+    const positionIndex = this._getPositionIndex(index);
+
+    if (positionIndex === this._activeItem) {
+      return;
+    }
+
+    this._snapToItem(positionIndex, animated, fireCallback);
+  }
+
   snapToNext(animated = true, fireCallback = true) {
     const itemsLength = this._getCustomDataLength();
 
@@ -821,150 +748,76 @@ export default class Carousel extends React.PureComponent<
     this._snapToItem(newIndex, animated, fireCallback);
   }
 
-  triggerRenderingHack(offset = 1) {
-    this._hackActiveSlideAnimation(this._activeItem, offset);
-  }
-
-  _renderItem(info: {item: any; index: number}) {
-    const {item, index} = info;
-    const {interpolators} = this.state;
-    const {slideStyle} = this.props;
-    const animatedValue = interpolators && interpolators[index];
-
-    if (typeof animatedValue === 'undefined') {
-      return null;
-    }
-
-    const animate = this._shouldAnimateSlides();
-    const Component = animate ? Animated.View : View;
-    const animatedStyle = animate
-      ? this._getSlideInterpolatedStyle(index, animatedValue)
-      : {};
-
-    const mainDimension = {width: this.itemWidth};
-
-    return (
-      <Component
-        style={[
-          mainDimension,
-          slideStyle,
-          // animatedStyle,
-          this.props.loop
-            ? {marginLeft: Spacing.M}
-            : {
-                marginLeft: index === 0 ? Spacing.M : 0,
-                marginRight:
-                  index === this._getCustomDataLength() - 1 ? 0 : Spacing.M,
-              },
-        ]}
-        pointerEvents="box-none">
-        {this.props.renderItem({
-          item,
-          index,
-        })}
-      </Component>
-    );
-  }
-
-  _getComponentOverridableProps() {
-    const {hideCarousel, containerWidth} = this.state;
-    const {loopClonesPerSide, visibleItem} = this.props;
-    const visibleItems = visibleItem;
-    const initialNumPerSide = this._enableLoop() ? loopClonesPerSide : 2;
-    const initialNumToRender =
-      visibleItems > 2
-        ? visibleItems + initialNumPerSide * 2
-        : initialNumPerSide * 2;
-    const maxToRenderPerBatch = initialNumToRender;
-    const windowSize = maxToRenderPerBatch;
-    const specificProps = {
-      initialNumToRender,
-      maxToRenderPerBatch,
-      windowSize,
-    };
-
-    return {
-      ...specificProps,
-      automaticallyAdjustContentInsets: false,
-      decelerationRate: 'fast',
-      directionalLockEnabled: true,
-      disableScrollViewPanResponder: false,
-      inverted: this._needsRTLAdaptations(),
-      overScrollMode: 'never',
-      pinchGestureEnabled: false,
-      pointerEvents: hideCarousel ? 'none' : 'auto',
-      scrollsToTop: false,
-      showsHorizontalScrollIndicator: false,
-      showsVerticalScrollIndicator: false,
-    };
-  }
-
-  _getComponentStaticProps() {
-    const {hideCarousel, containerWidth} = this.state;
+  render() {
     const {
-      activeSlideAlignment,
-      containerCustomStyle,
+      loopClonesPerSide,
+      visibleItem,
       firstItem,
       getItemLayout,
       keyExtractor,
       style,
       disableIntervalMomentum,
+      enableSnap,
     } = this.props;
-    const containerStyle = [
-      containerCustomStyle || style || {},
-      hideCarousel ? {opacity: 0} : {},
-      {
-        width: containerWidth,
-        flexDirection: this._needsRTLAdaptations() ? 'row-reverse' : 'row',
-      },
-    ];
-
-    const snapProps = {
-      disableIntervalMomentum, // Slide ± one item at a time
-      snapToAlignment: activeSlideAlignment,
-      snapToInterval: this._getItemMainDimension(),
-    };
+    const {hideCarousel, containerWidth} = 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,
-      numColumns: 1,
       renderItem: this._renderItem,
     };
 
-    return {
-      ...specificProps,
-      ...snapProps,
-      ref: (
-        c: {scrollTo: any; scrollToOffset: any; getNode: () => any} | undefined,
-      ) => {
-        this._carouselRef = c;
-      },
-      data: this._getCustomData(),
-      horizontal: true,
-      scrollEventThrottle: 1,
-      style: containerStyle,
-      onLayout: this._onLayout,
-      onMomentumScrollEnd: this._onMomentumScrollEnd,
-      onScroll: this._onScrollHandler,
-      onTouchStart: this._onTouchStart,
-      onTouchEnd: this._onTouchEnd,
-    };
-  }
-
-  render() {
-    const {data, renderItem} = this.props;
-    if (!data || !renderItem) {
-      return null;
-    }
-
-    const props = {
-      ...this._getComponentOverridableProps(),
-      ...this.props,
-      ...this._getComponentStaticProps(),
-    };
-
-    return <Animated.FlatList {...props} />;
+    return (
+      <Animated.FlatList
+        {...this.props}
+        {...specificProps}
+        ref={c => (this._carouselRef = c)}
+        overScrollMode={'never'}
+        snapToInterval={snapToInterval}
+        disableIntervalMomentum={disableIntervalMomentum}
+        pointerEvents={hideCarousel ? 'none' : 'auto'}
+        decelerationRate={'fast'}
+        numColumns={1}
+        style={[
+          style,
+          {width: '100%', flexDirection: 'row'},
+          hideCarousel ? {opacity: 0} : {},
+        ]}
+        automaticallyAdjustContentInsets={false}
+        directionalLockEnabled
+        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}
+      />
+    );
   }
 }
+
+export type {CarouselProps, CarouselRef};

package/package.json

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