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

fix: 修复日期组件在mode='time'时的bug

Author: chj-damon

.changeset/curvy-rice-yell.md

@@ -0,0 +1,5 @@
+---
+'@td-design/react-native-picker': minor
+---
+
+fix: 修复日期组件在mode='time'时的bug

.changeset/smooth-pans-return.md

@@ -0,0 +1,5 @@
+---
+'@td-design/react-native-tabs': patch
+---
+
+fix: 优化PagerView的业务逻辑

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

@@ -11,8 +11,8 @@ export default function useDatePicker({
   labelUnit,
   format,
   value,
-  minDate = '1970-01-01 00:00:00',
-  maxDate = '2100-01-01 00:00:00',
+  minDate = '1970-01-01',
+  maxDate = '2100-01-01',
   onChange,
 }: Required<Pick<DatePickerPropsBase, 'value' | 'mode' | 'labelUnit' | 'format'>> &
   Pick<DatePickerPropsBase, 'minDate' | 'maxDate' | 'onChange'>) {
@@ -34,20 +34,6 @@ export default function useDatePicker({
       if (dayjs(date).isAfter(maxDayjs.add(1, 'day'))) {
         return cloneDate(maxDayjs);
       }
-    } else if (mode === 'time') {
-      const maxHour = maxDayjs.get('hour');
-      const maxMinutes = maxDayjs.get('minute');
-      const minHour = minDayjs.get('hour');
-      const minMinutes = minDayjs.get('minute');
-      const hour = dayjs(date).get('hour');
-      const minutes = dayjs(date).get('minute');
-
-      if (hour < minHour || (hour === minHour && minutes < minMinutes)) {
-        return cloneDate(minDayjs);
-      }
-      if (hour > maxHour || (hour === maxHour && minutes > maxMinutes)) {
-        return cloneDate(maxDayjs);
-      }
     }
     return dayjs(date);
   };
@@ -80,22 +66,6 @@ export default function useDatePicker({
     return maxDayjs.get('date');
   };
 
-  const getMinHour = () => {
-    return minDayjs.get('hour');
-  };
-
-  const getMaxHour = () => {
-    return maxDayjs.get('hour');
-  };
-
-  const getMinMinute = () => {
-    return minDayjs.get('minute');
-  };
-
-  const getMaxMinute = () => {
-    return maxDayjs.get('minute');
-  };
-
   const cloneDate = (date: Dayjs) => {
     return dayjs(date);
   };
@@ -166,45 +136,6 @@ export default function useDatePicker({
     let maxHour = 23;
     let minMinute = 0;
     let maxMinute = 59;
-    const minDateMinute = getMinMinute();
-    const maxDateMinute = getMaxMinute();
-    const minDateHour = getMinHour();
-    const maxDateHour = getMaxHour();
-    const hour = date.get('hour');
-
-    if (mode === 'datetime') {
-      const year = date.get('year');
-      const month = date.get('month');
-      const day = date.get('date');
-      const minDateYear = getMinYear();
-      const maxDateYear = getMaxYear();
-      const minDateMonth = getMinMonth();
-      const maxDateMonth = getMaxMonth();
-      const minDateDay = getMinDay();
-      const maxDateDay = getMaxDay();
-
-      if (minDateYear === year && minDateMonth === month && minDateDay === day) {
-        minHour = minDateHour;
-        if (minDateHour === hour) {
-          minMinute = minDateMinute;
-        }
-      }
-      if (maxDateYear === year && maxDateMonth === month && maxDateDay === day) {
-        maxHour = maxDateHour;
-        if (maxDateHour === hour) {
-          maxMinute = maxDateMinute;
-        }
-      }
-    } else {
-      minHour = minDateHour;
-      if (minDateHour === hour) {
-        minMinute = minDateMinute;
-      }
-      maxHour = maxDateHour;
-      if (maxDateHour === hour) {
-        maxMinute = maxDateMinute;
-      }
-    }
 
     const hours: CascadePickerItemProps[] = [];
     for (let i = minHour; i <= maxHour; i++) {

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

@@ -22,6 +22,7 @@ const Cascader = ({
   value,
   onClose,
   onChange,
+  ...restProps
 }: CascaderProps) => {
   const { childrenTree, stateValue, handleOk, handleValueChange } = useCascader({
     data,
@@ -41,6 +42,7 @@ const Cascader = ({
         {childrenTree.map((item: CascadePickerItemProps[] = [], index) => (
           <WheelPicker
             key={index}
+            {...restProps}
             {...{ data: item.map(el => ({ ...el, value: `${el.value}` })), index, value: `${stateValue[index]}` }}
             onChange={handleValueChange}
           />

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

@@ -36,17 +36,6 @@ const NormalPicker: FC<PickerProps & ModalPickerProps> = props => {
     if (!visible) return null;
     if (pickerData.length === 0) return null;
 
-    if (pickerData.length === 1)
-      return (
-        <Flex backgroundColor="white">
-          <WheelPicker
-            {...restProps}
-            {...{ data: pickerData[0], index: 0, value: selectedValue?.[0] ?? '' }}
-            onChange={handleChange}
-          />
-        </Flex>
-      );
-
     return (
       <Flex backgroundColor="white">
         {pickerData.map((item, index) => (

packages/react-native-picker/src/picker/type.ts

@@ -35,6 +35,6 @@ export type PickerRefProps = {
   getValue: () => { value: ItemValue[] };
 };
 
-export type CascaderProps = Omit<PickerProps, 'data'> & {
+export type CascaderProps = Omit<PickerProps, 'data' | 'cascade'> & {
   data: CascadePickerItemProps[];
 } & ModalPickerProps;

packages/react-native-tabs/src/usePagerView.ts

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef } from 'react';
-import { Animated, Platform } from 'react-native';
+import { Animated } from 'react-native';
 import PagerView, {
   PagerViewOnPageScrollEventData,
   PagerViewOnPageSelectedEvent,
@@ -11,7 +11,7 @@ import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks';
 export default function usePagerView(initialPage: number, page?: number, onChange?: (page: number) => void) {
   const pagerViewRef = useRef<PagerView>(null);
 
-  const [activePage, setActivePage] = useSafeState(page || initialPage);
+  const [activePage, setActivePage] = useSafeState(initialPage);
   const [isIdle, setIdle] = useSafeState(true);
 
   const setPage = useMemoizedFn((page: number, animated = true) => {
@@ -24,15 +24,17 @@ export default function usePagerView(initialPage: number, page?: number, onChang
     setActivePage(page);
     if (activePage !== page) {
       setIdle(false);
+    } else {
+      setIdle(true);
     }
     onChange?.(page);
   });
 
   useEffect(() => {
-    if (!isNaN(Number(page))) {
-      setPage(Number(page));
+    if (page !== undefined && page !== activePage) {
+      setPage(page);
     }
-  }, [page]);
+  }, [page, activePage]);
 
   const offset = useRef(new Animated.Value(initialPage)).current;
   const position = useRef(new Animated.Value(0)).current;
@@ -63,9 +65,7 @@ export default function usePagerView(initialPage: number, page?: number, onChang
   const onPageSelected = useMemoizedFn((e: PagerViewOnPageSelectedEvent) => {
     setActivePage(e.nativeEvent.position);
     onChange?.(e.nativeEvent.position);
-    if (Platform.OS === 'ios') {
-      setIdle(true);
-    }
+    setIdle(true);
   });
 
   const [scrollState, setScrollState] = useSafeState<'idle' | 'dragging' | 'settling'>('idle');