@momo-kits/native-kits 0.157.1-beta.9-debug → 0.157.1-com.1-debug

package/src/libs/Carousel/index.tsx

@@ -0,0 +1,517 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Animated,
+  Dimensions,
+  FlatList,
+  GestureResponderEvent,
+  LayoutChangeEvent,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  Platform,
+  StyleSheet,
+  View
+} from 'react-native';
+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 (itemWidthProp) {
+      return itemWidthProp;
+    }
+    const spacing = visibleItem > 1 ? 10 : 0;
+    return (containerWidth - spacing * (visibleItem - 1)) / visibleItem;
+  }, [containerWidth, full, itemWidthProp, visibleItem]);
+
+  const snapToInterval = useMemo(() => {
+    if (snapToIntervalProp !== undefined) {
+      return snapToIntervalProp;
+    }
+    return itemWidth;
+  }, [itemWidth, snapToIntervalProp]);
+
+  const dataWithClones = useMemo(() => {
+    if (!loop || data.length === 0) {
+      return data;
+    }
+
+    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]);
+    }
+
+    const result = [...clones, ...data];
+
+    for (let i = 0; i < loopClonesPerSide; i++) {
+      result.push(data[i % data.length]);
+    }
+
+    return result;
+  }, [data, loop, loopClonesPerSide]);
+
+  const getRealIndex = useCallback(
+    (index: number) => {
+      if (!loop) return index;
+      
+      const dataLength = data.length;
+      if (dataLength === 0) return 0;
+
+      let realIndex = index - loopClonesPerSide;
+      
+      if (realIndex < 0) {
+        realIndex = dataLength + realIndex;
+      } else if (realIndex >= dataLength) {
+        realIndex = realIndex % 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;
+      }
+
+      const loopIndex = getLoopIndex(index);
+      const offset = loopIndex * itemWidth;
+
+      flatListRef.current.scrollToOffset({
+        offset,
+        animated,
+      });
+
+      currentIndexRef.current = index;
+      setCurrentIndex(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;
+    }
+
+    const startTimer = () => {
+      autoplayTimerRef.current = setInterval(() => {
+        if (!isAutoplayPausedRef.current) {
+          snapToNext(true, true);
+        }
+      }, autoplayInterval);
+    };
+
+    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);
+        }
+      }
+    },
+    [itemWidth, getRealIndex, onScrollIndexChanged]
+  );
+
+  const handleMomentumScrollEnd = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const offsetX = event.nativeEvent.contentOffset.x;
+      const index = Math.round(offsetX / itemWidth);
+      const realIndex = getRealIndex(index);
+
+      currentIndexRef.current = realIndex;
+      setCurrentIndex(realIndex);
+
+      if (onSnapToItem) {
+        onSnapToItem(realIndex);
+      }
+
+      handleLoopReposition(index);
+
+      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,
+      };
+    },
+    [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>
+        );
+      }
+
+      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);
+      }
+      return `carousel-item-${index}`;
+    },
+    [keyExtractor]
+  );
+
+  const onScrollEvent = useMemo(() => {
+    const scrollHandler = Animated.event(
+      [{ nativeEvent: { contentOffset: { x: scrollXRef } } }],
+      {
+        useNativeDriver: true,
+        listener: handleScroll,
+      }
+    );
+
+    if (onScrollProp) {
+      return (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+        scrollHandler(event);
+        onScrollProp(event);
+      };
+    }
+
+    return scrollHandler;
+  }, [scrollXRef, handleScroll, onScrollProp]);
+
+  useEffect(() => {
+    if (isLayoutReady && firstItem > 0 && firstItem < data.length) {
+      setTimeout(() => {
+        snapToItem(firstItem, false, false);
+      }, 50);
+    }
+  }, [isLayoutReady, firstItem, data.length, snapToItem]);
+
+  useEffect(() => {
+    if (autoplay && data.length > 1) {
+      startAutoplay();
+    }
+
+    return () => {
+      stopAutoplay();
+    };
+  }, [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}
+        getItemLayout={getItemLayout}
+        contentContainerStyle={contentContainerStyle}
+        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/src/libs/Carousel/package.json

@@ -0,0 +1,18 @@
+{
+    "name": "@momo-kits/carousel",
+    "version": "0.157.1-beta.4",
+    "private": false,
+    "main": "index.tsx",
+    "peerDependencies": {
+        "@momo-kits/foundation": "latest",
+        "react": "*",
+        "react-native": "*"
+    },
+    "license": "MoMo",
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+    },
+    "dependencies": {
+        "moment": "^2.24.0"
+    }
+}

package/src/libs/Carousel/publish.sh

@@ -0,0 +1,16 @@
+#!/bin/bash
+
+if [ "$1" == "stable" ]; then
+  npm version $(npm view @momo-kits/foundation@stable version)
+  npm version patch
+  npm publish --tag stable --access=public
+elif [ "$1" == "latest" ]; then
+  npm publish --tag latest --access=public
+elif [ "$1" == "beta" ]; then
+  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)

package/src/libs/Carousel/types.ts

@@ -0,0 +1,71 @@
+import {
+  Animated,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+
+export type CarouselProps = {
+  activeSlideOffset?: number;
+  apparitionDelay?: number;
+  autoplay?: boolean;
+  autoplayDelay?: number;
+  autoplayInterval?: number;
+  enableSnap?: boolean;
+  firstItem?: number;
+  inactiveSlideOpacity?: number;
+  inactiveSlideScale?: number;
+  loop?: boolean;
+  loopClonesPerSide?: number;
+  scrollEnabled?: boolean;
+  slideStyle?: StyleProp<ViewStyle>;
+  disableIntervalMomentum?: boolean;
+  itemWidth?: number;
+  data: any[];
+  renderItem: (info: { item: any; index: number }) => React.ReactNode;
+  onScroll?: any;
+  onScrollIndexChanged?: (index: number) => void;
+  onSnapToItem?: (index: number) => void;
+  onTouchStart?: (event: any) => void;
+  onTouchEnd?: (event: any) => void;
+  onMomentumScrollEnd?: (
+    event: NativeSyntheticEvent<NativeScrollEvent>
+  ) => void;
+  onLayout?: (event: any) => void;
+  keyExtractor?: (item: any, index: number) => string;
+  getItemLayout?: (
+    data: any,
+    index: number
+  ) => { length: number; offset: number; index: number };
+  style?: ViewStyle;
+  visibleItem?: number;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  full?: boolean;
+  snapToInterval?: number | Animated.Value | Animated.AnimatedInterpolation<number | string> | undefined
+};
+
+export type CarouselRef = {
+  snapToItem: (
+    index: number,
+    animated?: boolean,
+    fireCallback?: boolean
+  ) => void;
+  snapToNext: (animated?: boolean, fireCallback?: boolean) => void;
+  snapToPrev: (animated?: boolean, fireCallback?: boolean) => void;
+  startAutoplay: () => void;
+  pauseAutoplay: () => void;
+  stopAutoplay: () => void;
+};
+
+export type CarouselState = {
+  hideCarousel: boolean;
+  interpolators: any;
+  containerWidth: number;
+  itemWidth: number;
+};
+
+export type Position = {
+  start: any;
+  end: any;
+};