fix: fix scroll on select meridiem

react-component · Nov 7, 2023 · d905bc5 · d905bc5
1 parent 09b3ab1
commit d905bc5
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 14 deletions.
diff --git a/docs/examples/time.tsx b/docs/examples/time.tsx
@@ -33,6 +33,18 @@ export default () => {
         generateConfig={momentGenerateConfig}
       />
 
+      <h3>TimePicker 12 Hours</h3>
+      <Picker
+        defaultValue={defaultValue}
+        picker="time"
+        locale={zhCN}
+        disabledTime={(now) => ({
+          disabledHours: () => [now.hours()],
+        })}
+        generateConfig={momentGenerateConfig}
+        use12Hours
+      />
+
       <h3>RangePicker</h3>
       <RangePicker
         defaultValue={[defaultValue, defaultValue]}

diff --git a/src/panels/TimePanel/TimeUnitColumn.tsx b/src/panels/TimePanel/TimeUnitColumn.tsx
@@ -20,10 +20,10 @@ export type TimeUnitColumnProps<DateType> = {
   onSelect?: (value: number) => void;
   type: 'hour' | 'minute' | 'second' | 'meridiem';
   info: {
-    today: DateType,
-    locale: Locale,
-    cellRender: CellRender<DateType, number>,
-  }
+    today: DateType;
+    locale: Locale;
+    cellRender: CellRender<DateType, number>;
+  };
 };
 
 function TimeUnitColumn<DateType>(props: TimeUnitColumnProps<DateType>) {
@@ -38,13 +38,13 @@ function TimeUnitColumn<DateType>(props: TimeUnitColumnProps<DateType>) {
   // `useLayoutEffect` here to avoid blink by duration is 0
   useLayoutEffect(() => {
     const li = liRefs.current.get(value!);
-    if (li && open !== false) {
+    if (li && open !== false && type !== 'meridiem') {
       scrollTo(ulRef.current!, li.offsetTop, 120);
     }
   }, [value]);
 
   useLayoutEffect(() => {
-    if (open) {
+    if (open && type !== 'meridiem') {
       const li = liRefs.current.get(value!);
       if (li) {
         scrollRef.current = waitElementReady(li, () => {
@@ -88,14 +88,17 @@ function TimeUnitColumn<DateType>(props: TimeUnitColumnProps<DateType>) {
               onSelect!(unit.value);
             }}
           >
-            {info.cellRender ? info.cellRender(unit.value, {
-              today: info.today,
-              locale: info.locale,
-              originNode: <div className={`${cellPrefixCls}-inner`}>{unit.label}</div>,
-              type: 'time',
-              subType: type
-            }) : <div className={`${cellPrefixCls}-inner`}>{unit.label}</div>}
-
+            {info.cellRender ? (
+              info.cellRender(unit.value, {
+                today: info.today,
+                locale: info.locale,
+                originNode: <div className={`${cellPrefixCls}-inner`}>{unit.label}</div>,
+                type: 'time',
+                subType: type,
+              })
+            ) : (
+              <div className={`${cellPrefixCls}-inner`}>{unit.label}</div>
+            )}
           </li>
         );
       })}