@momo-kits/date-picker 0.109.1-rc.21 → 0.110.1-beta.1

package/WheelPicker.tsx

@@ -1,12 +1,5 @@
-import React, {
-  FC,
-  memo,
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-} from 'react';
-import {Animated, View} from 'react-native';
+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 styles from './styles';
 import {ApplicationContext, scaleSize} from '@momo-kits/foundation';
@@ -86,30 +79,8 @@ const WheelPicker: FC<WheelPickerProps> = ({
   };
 
   const ItemComponent: FC<any> = React.memo(props => {
-    const {item, opacity, scale} = props;
+    const {item, index} = props;
 
-    return (
-      <Animated.View
-        style={[
-          styles.wheelItem,
-          {
-            opacity,
-          },
-        ]}>
-        <Animated.Text
-          style={{
-            fontFamily: `${theme.font}-Semibold`,
-            transform: [{scale}],
-            fontSize: scaleSize(16),
-            lineHeight: scaleSize(22),
-          }}>
-          {item}
-        </Animated.Text>
-      </Animated.View>
-    );
-  });
-
-  const renderItem = useCallback(({item, index}) => {
     const opacityAnimated = (a: number, b: number, c: number) => {
       return {
         inputRange: [...data.map((_: any, i: number) => i * itemSize)],
@@ -145,13 +116,37 @@ const WheelPicker: FC<WheelPickerProps> = ({
     };
 
     return (
-      <ItemComponent
-        item={item}
-        opacity={scrollAnimatedValue.interpolate(opacityAnimated(1, 0.8, 0.4))}
-        scale={scrollAnimatedValue.interpolate(scaleAnimated(1, 0.87))}
-      />
+      <Animated.View
+        style={[
+          styles.wheelItem,
+          {
+            opacity: scrollAnimatedValue.interpolate(
+              useMemo(() => opacityAnimated(1, 0.8, 0.4), [])
+            ),
+          },
+        ]}>
+        <Animated.Text
+          style={{
+            fontFamily: `${theme.font}-Semibold`,
+            transform: [
+              {
+                scale: scrollAnimatedValue.interpolate(
+                  useMemo(() => scaleAnimated(1, 0.87), [])
+                ),
+              },
+            ],
+            fontSize: scaleSize(16),
+            lineHeight: scaleSize(22),
+          }}>
+          {item}
+        </Animated.Text>
+      </Animated.View>
     );
-  }, []);
+  });
+
+  const renderItem = (props: ListRenderItemInfo<any>) => {
+    return <ItemComponent {...props} />;
+  };
 
   const renderOverlay = () => {
     return (
@@ -189,7 +184,7 @@ const WheelPicker: FC<WheelPickerProps> = ({
         windowSize={15}
         initialNumToRender={15}
         maxToRenderPerBatch={15}
-        pagingEnabled
+        pagingEnabled={Platform.OS === 'ios'}
         snapToInterval={itemSize}
         decelerationRate={'fast'}
         getItemLayout={getItemLayout}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/date-picker",
-  "version": "0.109.1-rc.21",
+  "version": "0.110.1-beta.1",
   "private": false,
   "main": "index.tsx",
   "peerDependencies": {
@@ -15,4 +15,4 @@
   },
   "license": "MoMo",
   "dependencies": {}
-}
+}