@momo-kits/carousel 0.125.4-rc.7 → 0.150.1-beta.1

package/index.tsx

@@ -10,9 +10,9 @@ import {
   View,
   ViewStyle,
 } from 'react-native';
-import {defaultAnimatedStyles, defaultScrollInterpolator} from './animation';
-import {CarouselProps, CarouselRef, CarouselState, Position} from './types';
-import {Spacing} from '@momo-kits/foundation';
+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';
@@ -53,17 +53,17 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
   _positions: Position[];
   _currentScrollOffset;
   _scrollEnabled;
-  _initTimeout?: NodeJS.Timeout;
-  _apparitionTimeout?: NodeJS.Timeout;
-  _enableAutoplayTimeout?: NodeJS.Timeout;
-  _autoplayTimeout?: NodeJS.Timeout;
-  _snapNoMomentumTimeout?: NodeJS.Timeout;
-  _androidRepositioningTimeout?: NodeJS.Timeout;
+  _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?: NodeJS.Timeout;
+  _autoplayInterval?: ReturnType<typeof setInterval>;
   _carouselRef: any;
   _onLayoutInitDone?: boolean;
 
@@ -100,7 +100,7 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
   }
 
   componentDidMount() {
-    const {apparitionDelay, autoplay} = this.props;
+    const { apparitionDelay, autoplay } = this.props;
 
     this._mounted = true;
     this._initPositionsAndInterpolators();
@@ -113,7 +113,7 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
 
       const apparitionCallback = () => {
         if (apparitionDelay) {
-          this.setState({hideCarousel: false});
+          this.setState({ hideCarousel: false });
         }
         if (autoplay) {
           this.startAutoplay();
@@ -131,8 +131,8 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
   }
 
   componentDidUpdate(prevProps: CarouselProps) {
-    const {interpolators} = this.state;
-    const {firstItem = 0, scrollEnabled} = this.props;
+    const { interpolators } = this.state;
+    const { firstItem = 0, scrollEnabled } = this.props;
     const itemsLength = this._getCustomDataLength(this.props);
 
     if (!itemsLength) {
@@ -175,12 +175,15 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
   componentWillUnmount() {
     this._mounted = false;
     this.stopAutoplay();
-    clearTimeout(this._initTimeout);
-    clearTimeout(this._apparitionTimeout);
-    clearTimeout(this._enableAutoplayTimeout);
-    clearTimeout(this._autoplayTimeout);
-    clearTimeout(this._snapNoMomentumTimeout);
-    clearTimeout(this._androidRepositioningTimeout);
+    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) {
@@ -189,7 +192,9 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
       useNativeDriver: true,
     };
     this._scrollPos = new Animated.Value(0);
-    const argMapping = [{nativeEvent: {contentOffset: {x: this._scrollPos}}}];
+    const argMapping = [
+      { nativeEvent: { contentOffset: { x: this._scrollPos } } },
+    ];
 
     if (props.onScroll && Array.isArray(props.onScroll._argMapping)) {
       argMapping.pop();
@@ -206,17 +211,17 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
   }
 
   _enableLoop() {
-    const {data, enableSnap, loop} = this.props;
+    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;
+    const { inactiveSlideOpacity = 1, inactiveSlideScale = 1 } = props;
     return inactiveSlideOpacity < 1 || inactiveSlideScale < 1;
   }
 
   _shouldRepositionScroll(index: number) {
-    const {data, enableSnap, loopClonesPerSide = 3} = this.props;
+    const { data, enableSnap, loopClonesPerSide = 3 } = this.props;
     const dataLength = data && data.length;
     return !(
       !enableSnap ||
@@ -231,7 +236,7 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
   }
 
   _getCustomData(props = this.props) {
-    const {data, loopClonesPerSide = 3} = props;
+    const { data, loopClonesPerSide = 3 } = props;
     const dataLength = data && data.length;
 
     if (!dataLength) {
@@ -265,7 +270,7 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
   }
 
   _getCustomDataLength(props = this.props) {
-    const {data, loopClonesPerSide = 3} = props;
+    const { data, loopClonesPerSide = 3 } = props;
     const dataLength = data && data.length;
 
     if (!dataLength) {
@@ -286,7 +291,7 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
   }
 
   _getDataIndex(index: number) {
-    const {data, loopClonesPerSide = 3} = this.props;
+    const { data, loopClonesPerSide = 3 } = this.props;
     const dataLength = data && data.length;
     if (!this._enableLoop() || !dataLength) {
       return index;
@@ -322,7 +327,7 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
   }
 
   _getFirstItem(index: number, props = this.props) {
-    const {loopClonesPerSide = 3} = props;
+    const { loopClonesPerSide = 3 } = props;
     const itemsLength = this._getCustomDataLength(props);
 
     if (!itemsLength || index > itemsLength - 1 || index < 0) {
@@ -345,8 +350,8 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
   }
 
   _getItemMainDimension() {
-    const {itemWidth} = this.state;
-    const {full} = this.props;
+    const { itemWidth } = this.state;
+    const { full } = this.props;
     return full ? itemWidth : itemWidth + Spacing.S;
   }
 
@@ -374,7 +379,7 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
   }
 
   _getActiveSlideOffset() {
-    const {activeSlideOffset = 0} = this.props;
+    const { activeSlideOffset = 0 } = this.props;
     const itemMainDimension = this._getItemMainDimension();
     const minOffset = 10;
     return itemMainDimension / 2 - activeSlideOffset >= minOffset
@@ -401,7 +406,7 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
     }
 
     for (let i = 0; i < this._positions.length; i++) {
-      const {start, end} = this._positions[i];
+      const { start, end } = this._positions[i];
       if (
         center + activeSlideOffset >= start &&
         center - activeSlideOffset <= end
@@ -415,7 +420,7 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
   }
 
   _initPositionsAndInterpolators(props = this.props) {
-    const {data} = props;
+    const { data } = props;
     const itemMainDimension = this._getItemMainDimension();
 
     if (!data || !data.length) {
@@ -439,7 +444,7 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
       } else {
         let interpolator = defaultScrollInterpolator(
           _index,
-          this.state.itemWidth
+          this.state.itemWidth,
         );
 
         animatedValue = this._scrollPos.interpolate({
@@ -451,11 +456,11 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
       interpolators.push(animatedValue);
     });
 
-    this.setState({interpolators});
+    this.setState({ interpolators });
   }
 
   _repositionScroll(index: number, animated = false) {
-    const {data, loopClonesPerSide = 3} = this.props;
+    const { data, loopClonesPerSide = 3 } = this.props;
     const dataLength = data && data.length;
 
     if (typeof index === 'undefined' || !this._shouldRepositionScroll(index)) {
@@ -474,7 +479,7 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
   }
 
   _onTouchStart(event: any) {
-    const {onTouchStart} = this.props;
+    const { onTouchStart } = this.props;
 
     if (this._getScrollEnabled() !== false && this._autoplaying) {
       this.pauseAutoPlay();
@@ -484,7 +489,7 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
   }
 
   _onTouchEnd(event: GestureResponderEvent) {
-    const {onTouchEnd} = this.props;
+    const { onTouchEnd } = this.props;
 
     if (
       this._getScrollEnabled() !== false &&
@@ -498,7 +503,7 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
   }
 
   _onScroll(event: NativeSyntheticEvent<NativeScrollEvent>) {
-    const {onScroll, onScrollIndexChanged, onSnapToItem} = this.props;
+    const { onScroll, onScrollIndexChanged, onSnapToItem } = this.props;
     const scrollOffset = event
       ? this._getScrollOffset(event)
       : this._currentScrollOffset;
@@ -531,8 +536,8 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
   }
 
   _onMomentumScrollEnd(event: NativeSyntheticEvent<NativeScrollEvent>) {
-    const {autoplayDelay, onMomentumScrollEnd, onSnapToItem} = this.props;
-    const {itemWidth} = this.state;
+    const { autoplayDelay, onMomentumScrollEnd, onSnapToItem } = this.props;
+    const { itemWidth } = this.state;
     const scrollOffset = event
       ? this._getScrollOffset(event)
       : this._currentScrollOffset;
@@ -553,7 +558,8 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
     onMomentumScrollEnd && onMomentumScrollEnd(event);
 
     if (IS_ANDROID && this._autoplay && !this._autoplaying) {
-      clearTimeout(this._enableAutoplayTimeout);
+      if (this._enableAutoplayTimeout != null)
+        clearTimeout(this._enableAutoplayTimeout);
       this._enableAutoplayTimeout = setTimeout(() => {
         this.startAutoplay();
       }, autoplayDelay);
@@ -561,7 +567,7 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
   }
 
   _onLayout(event: LayoutChangeEvent) {
-    const {onLayout, visibleItem = 1} = this.props;
+    const { onLayout, visibleItem = 1 } = this.props;
 
     if (this._onLayoutInitDone) {
       this._initPositionsAndInterpolators();
@@ -574,7 +580,7 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
       this.props.visibleItem === 1
         ? screenWidth - Spacing.M * 2
         : Math.ceil(
-            (containerWidth * 0.9 - visibleItem * Spacing.S) / visibleItem
+            (containerWidth * 0.9 - visibleItem * Spacing.S) / visibleItem,
           );
     if (this.props.itemWidth) {
       itemWidth = this.props.itemWidth;
@@ -583,13 +589,13 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
       itemWidth = containerWidth;
     }
 
-    this.setState({containerWidth, itemWidth});
+    this.setState({ containerWidth, itemWidth });
 
     onLayout && onLayout(event);
   }
 
   _getPositionIndex(index: number) {
-    const {loop, loopClonesPerSide = 3} = this.props;
+    const { loop, loopClonesPerSide = 3 } = this.props;
     return loop ? index + loopClonesPerSide : index;
   }
 
@@ -597,9 +603,9 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
     index: number,
     animated = true,
     fireCallback = true,
-    forceScrollTo = false
+    forceScrollTo = false,
   ) {
-    const {onSnapToItem} = this.props;
+    const { onSnapToItem } = this.props;
     const itemsLength = this._getCustomDataLength();
     const wrappedRef = this._getWrappedRef();
     if (!itemsLength || !wrappedRef) {
@@ -641,10 +647,10 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
     }
   }
 
-  _renderItem(info: {item: any; index: number}) {
-    const {item, index} = info;
-    const {interpolators, itemWidth} = this.state;
-    const {slideStyle, full} = this.props;
+  _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') {
@@ -653,10 +659,10 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
 
     const animate = this._shouldAnimateSlides();
     const Component = animate ? Animated.View : View;
-    const mainDimension = {width: itemWidth};
+    const mainDimension = { width: itemWidth };
 
     let spacingStyle: ViewStyle = this.props.loop
-      ? {marginLeft: Spacing.S}
+      ? { marginLeft: Spacing.S }
       : {
           marginLeft: index === 0 ? Spacing.M : 0,
           marginRight:
@@ -672,11 +678,12 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
         style={[
           mainDimension,
           animatedStyle,
-          {overflow: 'hidden'},
+          { overflow: 'hidden' },
           spacingStyle,
           slideStyle,
         ]}
-        pointerEvents="box-none">
+        pointerEvents="box-none"
+      >
         {this.props.renderItem({
           item,
           index,
@@ -686,14 +693,14 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
   }
 
   startAutoplay() {
-    const {autoplayInterval, autoplayDelay} = this.props;
+    const { autoplayInterval, autoplayDelay } = this.props;
     this._autoplay = true;
 
     if (this._autoplaying) {
       return;
     }
 
-    clearTimeout(this._autoplayTimeout);
+    if (this._autoplayTimeout != null) clearTimeout(this._autoplayTimeout);
     this._autoplayTimeout = setTimeout(() => {
       this._autoplaying = true;
       this._autoplayInterval = setInterval(() => {
@@ -706,9 +713,10 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
 
   pauseAutoPlay() {
     this._autoplaying = false;
-    clearTimeout(this._autoplayTimeout);
-    clearTimeout(this._enableAutoplayTimeout);
-    clearInterval(this._autoplayInterval);
+    if (this._autoplayTimeout != null) clearTimeout(this._autoplayTimeout);
+    if (this._enableAutoplayTimeout != null)
+      clearTimeout(this._enableAutoplayTimeout);
+    if (this._autoplayInterval != null) clearInterval(this._autoplayInterval);
   }
 
   stopAutoplay() {
@@ -762,7 +770,7 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
       enableSnap,
       contentContainerStyle,
     } = this.props;
-    const {hideCarousel} = this.state;
+    const { hideCarousel } = this.state;
 
     const initialNumPerSide = this._enableLoop() ? loopClonesPerSide : 2;
     const initialNumToRender =
@@ -787,7 +795,9 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
       <Animated.FlatList
         {...this.props}
         {...specificProps}
-        ref={c => (this._carouselRef = c)}
+        ref={c => {
+          this._carouselRef = c;
+        }}
         overScrollMode={'never'}
         snapToInterval={
           this.props.snapToInterval ? this.props.snapToInterval : snapToInterval
@@ -798,8 +808,8 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
         numColumns={1}
         style={[
           style,
-          {width: '100%', flexDirection: 'row'},
-          hideCarousel ? {opacity: 0} : {},
+          { width: '100%', flexDirection: 'row' },
+          hideCarousel ? { opacity: 0 } : {},
         ]}
         automaticallyAdjustContentInsets={false}
         directionalLockEnabled
@@ -826,5 +836,5 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
   }
 }
 
-export {Carousel};
-export type {CarouselProps, CarouselRef};
+export { Carousel };
+export type { CarouselProps, CarouselRef };

package/package.json

@@ -1,22 +1,21 @@
 {
-  "name": "@momo-kits/carousel",
-  "version": "0.125.4-rc.7",
-  "private": false,
-  "main": "index.tsx",
-  "peerDependencies": {
-    "@momo-kits/foundation": "latest",
-    "react": "16.9.0",
-    "react-native": ">=0.55",
-    "prop-types": "^15.7.2"
-  },
-  "devDependencies": {
-    "@momo-platform/versions": "4.1.11"
-  },
-  "license": "MoMo",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "dependencies": {
-    "moment": "^2.24.0"
-  }
-}
+    "name": "@momo-kits/carousel",
+    "version": "0.150.1-beta.1",
+    "private": false,
+    "main": "index.tsx",
+    "peerDependencies": {
+        "@momo-kits/foundation": "latest",
+        "react": "*",
+        "react-native": "*"
+    },
+    "devDependencies": {
+        "@momo-platform/versions": "4.1.11"
+    },
+    "license": "MoMo",
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+    },
+    "dependencies": {
+        "moment": "^2.24.0"
+    }
+}

package/publish.sh

@@ -1,12 +1,5 @@
 #!/bin/bash
 
-# Prepare dist files
-rm -rf dist
-mkdir dist
-rsync -r --exclude=/dist ./* dist
-cd dist
-
-
 if [ "$1" == "stable" ]; then
   npm version $(npm view @momo-kits/foundation@stable version)
   npm version patch
@@ -14,15 +7,13 @@ if [ "$1" == "stable" ]; then
 elif [ "$1" == "latest" ]; then
   npm version $(npm view @momo-kits/foundation@latest version)
   npm publish --tag latest --access=public
-else
+elif [ "$1" == "beta" ]; then
   npm version $(npm view @momo-kits/carousel@beta version)
   npm version prerelease --preid=beta
   npm publish --tag beta --access=public
+else
+  npm publish --tag alpha --access=public
 fi
 
 PACKAGE_NAME=$(npm pkg get name)
 NEW_PACKAGE_VERSION=$(npm pkg get version)
-
-# Clean up
-cd ..
-rm -rf dist

package/types.ts

@@ -42,7 +42,7 @@ export type CarouselProps = {
   visibleItem?: number;
   contentContainerStyle?: StyleProp<ViewStyle>;
   full?: boolean;
-  snapToInterval?: number | Animated.Value | Animated.AnimatedInterpolation | undefined
+  snapToInterval?: number | Animated.Value | Animated.AnimatedInterpolation<number | string> | undefined
 };
 
 export type CarouselRef = {