@momo-kits/date-picker 0.110.1-beta.2 → 0.110.1-beta.4

package/WheelPicker.tsx

@@ -1,6 +1,11 @@
-import React, {FC, memo, useContext, useEffect, useMemo, useRef} from 'react';
-import {Animated, ListRenderItemInfo, Platform, View} from 'react-native';
-import {FlatList} from 'react-native-gesture-handler';
+import React, {FC, memo, useContext, useEffect, useRef} from 'react';
+import {
+  Animated,
+  FlatList,
+  ListRenderItemInfo,
+  Platform,
+  View,
+} from 'react-native';
 import styles from './styles';
 import {ApplicationContext, scaleSize} from '@momo-kits/foundation';
 import {WheelPickerProps} from './types';
@@ -14,21 +19,23 @@ const WheelPicker: FC<WheelPickerProps> = ({
   onChange,
   selectedData,
 }) => {
+  const isAndroid = Platform.OS === 'android';
   const {theme} = useContext(ApplicationContext);
   const flatListRef = useRef<any>(null);
   const scrollAnimatedValue = useRef(new Animated.Value(0)).current;
-  const active = useRef(0);
   const scrollListener = useRef('0');
+  const active = useRef(0);
   const itemSize = 42;
+  const initItemNum = 15;
 
   useEffect(() => {
-    scrollListener.current && clearInterval(Number(scrollListener.current));
+    scrollListener.current && scrollAnimatedValue.removeAllListeners();
     scrollListener.current = scrollAnimatedValue.addListener(
       ({value}) => (active.current = value)
     );
 
     return () => {
-      clearInterval(Number(scrollListener.current));
+      scrollAnimatedValue.removeAllListeners();
     };
   }, [scrollAnimatedValue]);
 
@@ -67,6 +74,7 @@ const WheelPicker: FC<WheelPickerProps> = ({
     if (selectedIndex > data.length - 3) {
       selectedIndex = data.length - 3;
     }
+
     flatListRef.current?.scrollToIndex({
       index: selectedIndex - 2,
       animated: true,
@@ -74,55 +82,31 @@ const WheelPicker: FC<WheelPickerProps> = ({
   }, 100);
 
   const onMomentumScrollEnd = () => {
-    let index = Math.round(active.current / itemSize);
+    let index = Math.round((active.current + itemSize / 2) / itemSize) - 1;
     onChange?.(name, data[index + 2]);
   };
 
   const ItemComponent: FC<any> = React.memo(props => {
     const {item, index} = props;
-
-    const opacityAnimated = (a: number, b: number, c: number) => {
-      return {
-        inputRange: [...data.map((_: any, i: number) => i * itemSize)],
-        outputRange: [
-          ...data.map((_: any, i: number) => {
-            const center = i + 2;
-            if (center === index) {
-              return a;
-            } else if (center + 1 === index || center - 1 === index) {
-              return b;
-            } else {
-              return c;
-            }
-          }),
-        ],
-      };
-    };
-
-    const scaleAnimated = (a: number, b: number) => {
-      return {
-        inputRange: [...data.map((_: any, i: number) => i * itemSize)],
-        outputRange: [
-          ...data.map((_: any, i: number) => {
-            const center = i + 2;
-            if (center === index) {
-              return a;
-            } else {
-              return b;
-            }
-          }),
-        ],
-      };
-    };
+    const position = Animated.divide(scrollAnimatedValue, itemSize);
+    const distance = Animated.subtract(index, position);
+    const opacity = distance.interpolate({
+      inputRange: [0, 1, 2, 3, 4],
+      outputRange: [0.4, 0.8, 1, 0.8, 0.4],
+      extrapolate: 'clamp',
+    });
+    const scale = distance.interpolate({
+      inputRange: [0, 1, 2, 3, 4],
+      outputRange: [0.87, 0.87, 1, 0.87, 0.87],
+      extrapolate: 'clamp',
+    });
 
     return (
       <Animated.View
         style={[
           styles.wheelItem,
           {
-            opacity: scrollAnimatedValue.interpolate(
-              useMemo(() => opacityAnimated(1, 0.8, 0.4), [])
-            ),
+            opacity,
           },
         ]}>
         <Animated.Text
@@ -130,9 +114,7 @@ const WheelPicker: FC<WheelPickerProps> = ({
             fontFamily: `${theme.font}-Semibold`,
             transform: [
               {
-                scale: scrollAnimatedValue.interpolate(
-                  useMemo(() => scaleAnimated(1, 0.87), [])
-                ),
+                scale,
               },
             ],
             fontSize: scaleSize(16),
@@ -171,7 +153,6 @@ const WheelPicker: FC<WheelPickerProps> = ({
 
   return (
     <View
-      key={`Wheel picker ${name}`}
       style={[
         style,
         styles.wheelPicker,
@@ -181,11 +162,13 @@ const WheelPicker: FC<WheelPickerProps> = ({
         },
       ]}>
       <AnimatedFlatList
-        windowSize={15}
-        initialNumToRender={15}
-        maxToRenderPerBatch={15}
-        pagingEnabled={Platform.OS === 'ios'}
+        removeClippedSubviews
+        windowSize={initItemNum}
+        initialNumToRender={initItemNum}
+        maxToRenderPerBatch={initItemNum}
         snapToInterval={itemSize}
+        snapToOffsets={data.map((_, index) => index * itemSize)}
+        keyExtractor={(item, index) => `Wheel picker item ${item}-${index}`}
         decelerationRate={'fast'}
         getItemLayout={getItemLayout}
         onScrollToIndexFailed={onScrollToIndexFailed}
@@ -196,8 +179,8 @@ const WheelPicker: FC<WheelPickerProps> = ({
           }
         )}
         onMomentumScrollEnd={onMomentumScrollEnd}
+        onScrollEndDrag={onMomentumScrollEnd}
         ref={flatListRef}
-        keyExtractor={(item, index) => `Wheel picker item ${item}-${index}`}
         showsVerticalScrollIndicator={false}
         data={data}
         renderItem={renderItem}

package/index.tsx

@@ -1,5 +1,5 @@
 import React, {FC, useEffect, useState} from 'react';
-import {Dimensions, LayoutChangeEvent, Platform, View} from 'react-native';
+import {Dimensions, LayoutChangeEvent, View} from 'react-native';
 import {scaleSize, Spacing, Text} from '@momo-kits/foundation';
 import WheelPicker from './WheelPicker';
 import {
@@ -43,7 +43,6 @@ const DateTimePicker: FC<DateTimePickerProps> = ({
 
   useEffect(() => {
     setupData();
-    return () => {};
   }, [selectedValue, currentDate]);
 
   useEffect(() => {
@@ -143,14 +142,13 @@ const DateTimePicker: FC<DateTimePickerProps> = ({
       ]}>
       {data.map((dataItem, index) => {
         return (
-          <View>
+          <View key={`${dataItem.name}_${index}`}>
             {arrayLabelTime[index] && (
               <View style={{alignItems: 'center', marginBottom: Spacing.S}}>
                 <Text typography="action_s_bold">{arrayLabelTime[index]}</Text>
               </View>
             )}
             <WheelPicker
-              key={`${dataItem.name}_${index}`}
               selectedData={String(currentDate[dataItem.name])}
               onChange={onPickerChange}
               data={[...paddingArray, ...dataItem.data, ...paddingArray]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/date-picker",
-  "version": "0.110.1-beta.2",
+  "version": "0.110.1-beta.4",
   "private": false,
   "main": "index.tsx",
   "peerDependencies": {