merged datetime

react-component · Nov 20, 2019 · 679be41 · 679be41
1 parent 57aa374
commit 679be41
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 43 deletions.
diff --git a/examples/basic.tsx b/examples/basic.tsx
@@ -140,7 +140,7 @@ export default () => {
         </div>
         <div style={{ margin: '0 8px' }}>
           <h3>Datetime</h3>
-          <Picker<Moment> {...sharedProps} locale={zhCN} mode="datetime" />
+          <Picker<Moment> {...sharedProps} locale={zhCN} showTime />
         </div>
       </div>
     </div>

diff --git a/src/Picker.tsx b/src/Picker.tsx
@@ -41,14 +41,24 @@ function Picker<DateType>(props: PickerProps<DateType>) {
     defaultPickerValue || value || generateConfig.getNow(),
   );
 
-  const [innerMode, setInnerMode] = React.useState<PanelMode>('date');
-  const mergedMode = mode || innerMode;
+  const getNextMode = (nextMode: PanelMode): PanelMode => {
+    if (nextMode === 'date' && showTime) {
+      return 'datetime';
+    }
+    return nextMode;
+  };
+
+  const [innerMode, setInnerMode] = React.useState<PanelMode>(
+    getNextMode('date'),
+  );
+  const mergedMode: PanelMode = mode || innerMode;
 
   const onInternalPanelChange = (newMode: PanelMode, viewValue: DateType) => {
-    setInnerMode(newMode);
+    const nextMode = getNextMode(newMode);
+    setInnerMode(nextMode);
 
     if (onPanelChange) {
-      onPanelChange(viewValue, newMode);
+      onPanelChange(viewValue, nextMode);
     }
   };
 
@@ -64,6 +74,9 @@ function Picker<DateType>(props: PickerProps<DateType>) {
     }
   }, [value]);
 
+  // ============================ Panels ============================
+  let panelNode: React.ReactNode;
+
   const pickerProps = {
     ...props,
     prefixCls,
@@ -73,7 +86,31 @@ function Picker<DateType>(props: PickerProps<DateType>) {
   };
   delete pickerProps.onSelect;
 
-  let panelNode: React.ReactNode;
+  function renderDatePanel() {
+    return (
+      <DatePanel<DateType>
+        {...pickerProps}
+        onSelect={date => {
+          setViewDate(date);
+          triggerSelect(date);
+        }}
+      />
+    );
+  }
+
+  function renderTimePanel() {
+    return (
+      <TimePanel<DateType>
+        {...pickerProps}
+        {...(typeof showTime === 'object' ? showTime : null)}
+        onSelect={date => {
+          onInternalPanelChange('date', date);
+          setViewDate(date);
+          triggerSelect(date);
+        }}
+      />
+    );
+  }
 
   switch (mergedMode) {
     case 'decade':
@@ -117,51 +154,19 @@ function Picker<DateType>(props: PickerProps<DateType>) {
     case 'datetime':
       panelNode = (
         <div className={`${prefixCls}-datetime`}>
-          <DatePanel<DateType>
-            {...pickerProps}
-            onSelect={date => {
-              setViewDate(date);
-              triggerSelect(date);
-            }}
-          />
-          <TimePanel<DateType>
-            {...pickerProps}
-            {...(typeof showTime === 'object' ? showTime : null)}
-            onSelect={date => {
-              onInternalPanelChange('date', date);
-              setViewDate(date);
-              triggerSelect(date);
-            }}
-          />
+          {renderDatePanel()}
+          {renderTimePanel()}
         </div>
       );
       break;
 
     case 'time':
       delete pickerProps.showTime;
-      panelNode = (
-        <TimePanel<DateType>
-          {...pickerProps}
-          {...(typeof showTime === 'object' ? showTime : null)}
-          onSelect={date => {
-            onInternalPanelChange('date', date);
-            setViewDate(date);
-            triggerSelect(date);
-          }}
-        />
-      );
+      panelNode = renderTimePanel();
       break;
 
     default:
-      panelNode = (
-        <DatePanel<DateType>
-          {...pickerProps}
-          onSelect={date => {
-            setViewDate(date);
-            triggerSelect(date);
-          }}
-        />
-      );
+      panelNode = renderDatePanel();
   }
 
   return (

diff --git a/src/panels/TimePanel/TimeUnitColumn.tsx b/src/panels/TimePanel/TimeUnitColumn.tsx
@@ -23,7 +23,8 @@ function TimeUnitColumn(props: TimeUnitColumnProps) {
   const ulRef = React.useRef<HTMLUListElement>(null);
   const liRefs = React.useRef<Map<number, HTMLElement | null>>(new Map());
 
-  React.useEffect(() => {
+  // `useLayoutEffect` here to avoid blink by duration is 0
+  React.useLayoutEffect(() => {
     const li = liRefs.current.get(value);
     if (li) {
       scrollTo(ulRef.current!, li.offsetTop, initRef.current ? 0 : 120);