Merge pull request #888 from thundersdata-frontend/rn-issue

feat: 使用reanimated和gesture-handler重写滚动选择组件

Author: chj-damon

.changeset/spotty-bats-leave.md

@@ -0,0 +1,5 @@
+---
+'@td-design/react-native-picker': major
+---
+
+feat: 使用reanimated和gesture-handler重写滚动选择组件

packages/react-native-picker/package.json

@@ -25,8 +25,7 @@
   "dependencies": {
     "array-tree-filter": "^2.1.0",
     "dayjs": "^1.11.9",
-    "lodash-es": "^4.17.21",
-    "react-native-redash": "^18.1.0"
+    "lodash-es": "^4.17.21"
   },
   "devDependencies": {
     "@shopify/restyle": "2.4.2",
@@ -36,6 +35,8 @@
     "@types/react": "^18.2.15",
     "@types/react-native": "^0.72.2",
     "react-native-builder-bob": "^0.21.3",
+    "react-native-gesture-handler": "^2.12.0",
+    "react-native-reanimated": "^3.3.0",
     "typescript": "^5.1.6"
   },
   "react-native-builder-bob": {

packages/react-native-picker/src/components/DatePicker/index.tsx

@@ -32,8 +32,7 @@ const DatePicker: FC<
             {...restProps}
             data={col}
             value={values[index]}
-            index={index}
-            onChange={onValueChange}
+            onChange={value => onValueChange(value, index)}
           />
         );
       })}

packages/react-native-picker/src/components/DatePicker/useDatePicker.ts

@@ -3,10 +3,10 @@ import { useMemo } from 'react';
 import { useMemoizedFn } from '@td-design/rn-hooks';
 import dayjs, { Dayjs } from 'dayjs';
 
-import { ItemValue } from '../WheelPicker/type';
+import { PickerData } from '../WheelPicker/type';
 import { CascadePickerItemProps, DatePickerPropsBase } from './type';
 
-export default function useDatePicker({
+export default function useDatePicker<T>({
   mode,
   labelUnit,
   format,
@@ -81,18 +81,18 @@ export default function useDatePicker({
     const minDateDay = getMinDay();
     const maxDateDay = getMaxDay();
 
-    const years: CascadePickerItemProps[] = [];
+    const years: CascadePickerItemProps<T>[] = [];
     for (let i = minDateYear; i <= maxDateYear; i++) {
       years.push({
-        value: i + '',
+        value: (i + '') as T,
         label: i + labelUnit.year,
       });
     }
     if (mode === 'year') {
       return [years];
     }
 
-    const months: CascadePickerItemProps[] = [];
+    const months: CascadePickerItemProps<T>[] = [];
     let minMonth = 0;
     let maxMonth = 11;
     if (minDateYear === selYear) {
@@ -104,15 +104,15 @@ export default function useDatePicker({
 
     for (let i = minMonth; i <= maxMonth; i++) {
       months.push({
-        value: i + '',
+        value: (i + '') as T,
         label: i + 1 + labelUnit.month,
       });
     }
     if (mode === 'month') {
       return [years, months];
     }
 
-    const days: CascadePickerItemProps[] = [];
+    const days: CascadePickerItemProps<T>[] = [];
     let minDay = 1;
     let maxDay = getDaysInMonth(date.toDate());
 
@@ -124,7 +124,7 @@ export default function useDatePicker({
     }
     for (let i = minDay; i <= maxDay; i++) {
       days.push({
-        value: i + '',
+        value: (i + '') as T,
         label: i + labelUnit.day,
       });
     }
@@ -137,24 +137,24 @@ export default function useDatePicker({
     let minMinute = 0;
     let maxMinute = 59;
 
-    const hours: CascadePickerItemProps[] = [];
+    const hours: CascadePickerItemProps<T>[] = [];
     for (let i = minHour; i <= maxHour; i++) {
       hours.push({
-        value: i + '',
+        value: (i + '') as T,
         label: labelUnit.hour ? i + labelUnit.hour + '' : pad(i),
       });
     }
 
-    const minutes: CascadePickerItemProps[] = [];
+    const minutes: CascadePickerItemProps<T>[] = [];
     const selMinute = date.get('minute');
     for (let i = minMinute; i <= maxMinute; i += 1) {
       minutes.push({
-        value: i + '',
+        value: (i + '') as T,
         label: labelUnit.minute ? i + labelUnit.minute + '' : pad(i),
       });
       if (selMinute > i && selMinute < i + 1) {
         minutes.push({
-          value: selMinute + '',
+          value: (selMinute + '') as T,
           label: labelUnit.minute ? selMinute + labelUnit.minute + '' : pad(selMinute),
         });
       }
@@ -166,7 +166,7 @@ export default function useDatePicker({
 
   const getValueCols = () => {
     const date = getDate();
-    let cols: CascadePickerItemProps[][] = [];
+    let cols: CascadePickerItemProps<T>[][] = [];
     let values: string[] = [];
 
     if (mode === 'year') {
@@ -247,8 +247,8 @@ export default function useDatePicker({
     return clipDate(newValue!.toDate());
   };
 
-  const onValueChange = (value: ItemValue, index: number) => {
-    const newDate = getNewDate(parseInt(value + '', 10), index);
+  const onValueChange = (data: PickerData<T>, index: number) => {
+    const newDate = getNewDate(parseInt(data.value + '', 10), index);
     onChange?.(newDate.toDate(), newDate.format(format));
   };