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

fix: 修复DatePicker的bug
thundersdata-frontend · Oct 21, 2024 · 8a3e964 · 8a3e964
2 parents 548b310 + 0fb7dca
commit 8a3e964
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 27 deletions.
diff --git a/.changeset/pretty-snails-walk.md b/.changeset/pretty-snails-walk.md
@@ -0,0 +1,5 @@
+---
+'@td-design/react-native-picker': patch
+---
+
+fix: 修复DatePicker的bug
diff --git a/packages/react-native-picker/src/components/DatePicker/useDatePicker.ts b/packages/react-native-picker/src/components/DatePicker/useDatePicker.ts
@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 
-import { useMemoizedFn } from '@td-design/rn-hooks';
+import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks';
 import dayjs, { Dayjs } from 'dayjs';
 
 import { PickerData } from '../WheelPicker/type';
@@ -19,6 +19,8 @@ export default function useDatePicker<T>({
   const minDayjs = useMemo(() => dayjs(minDate), [minDate]);
   const maxDayjs = useMemo(() => dayjs(maxDate), [maxDate]);
 
+  const [tempValue, setTempValue] = useSafeState(value);
+
   const clipDate = (date: Date) => {
     if (mode === 'datetime') {
       if (dayjs(date).isBefore(minDayjs)) {
@@ -39,7 +41,7 @@ export default function useDatePicker<T>({
   };
 
   const getDate = () => {
-    return clipDate(value);
+    return clipDate(tempValue);
   };
 
   const getMinYear = () => {
@@ -249,6 +251,7 @@ export default function useDatePicker<T>({
 
   const onValueChange = (data: PickerData<T>, index: number) => {
     const newDate = getNewDate(parseInt(data.value + '', 10), index);
+    setTempValue(newDate.toDate());
     onChange?.(newDate.toDate(), newDate.format(format));
   };
 

diff --git a/packages/react-native-picker/src/picker/components/Normal/index.tsx b/packages/react-native-picker/src/picker/components/Normal/index.tsx
@@ -47,31 +47,29 @@ function NormalPicker<T>(props: NormalPickerProps<T>) {
   if (displayType === 'modal') {
     return (
       <Modal position="bottom" animationType="slide" visible={visible} onClose={handleClose}>
-        {
-          <Flex
-            height={px(50)}
-            borderBottomWidth={ONE_PIXEL}
-            borderBottomColor="border"
-            backgroundColor="white"
-            paddingHorizontal="x3"
-          >
-            <Pressable activeOpacity={activeOpacity} onPress={handleClose} style={styles.cancel}>
-              <Text variant="p0" color="primary200">
-                {cancelText}
-              </Text>
-            </Pressable>
-            <Flex.Item alignItems="center">
-              <Text variant="p0" color="text">
-                {title}
-              </Text>
-            </Flex.Item>
-            <Pressable activeOpacity={activeOpacity} onPress={handleOk} style={styles.submit}>
-              <Text variant="p0" color="primary200">
-                {okText}
-              </Text>
-            </Pressable>
-          </Flex>
-        }
+        <Flex
+          height={px(50)}
+          borderBottomWidth={ONE_PIXEL}
+          borderBottomColor="border"
+          backgroundColor="white"
+          paddingHorizontal="x3"
+        >
+          <Pressable activeOpacity={activeOpacity} onPress={handleClose} style={styles.cancel}>
+            <Text variant="p0" color="primary200">
+              {cancelText}
+            </Text>
+          </Pressable>
+          <Flex.Item alignItems="center">
+            <Text variant="p0" color="text">
+              {title}
+            </Text>
+          </Flex.Item>
+          <Pressable activeOpacity={activeOpacity} onPress={handleOk} style={styles.submit}>
+            <Text variant="p0" color="primary200">
+              {okText}
+            </Text>
+          </Pressable>
+        </Flex>
         {PickerComp}
       </Modal>
     );