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

package/src/libs/Carousel/index.tsx

@@ -1,517 +0,0 @@
-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

@@ -1,18 +0,0 @@
-{
-    "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

@@ -1,16 +0,0 @@
-#!/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

@@ -1,71 +0,0 @@
-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;
-};