fix(ui): fix logic of date-picker popup window

Author: xiejay97

packages/ui/src/components/_date-input/DateInput.tsx

@@ -30,6 +30,7 @@ export interface DDateInputProps extends Omit<React.HTMLAttributes<HTMLDivElemen
     date: [Date | null, Date | null];
     isFocus: [boolean, boolean];
     changeDate: (date: Date | [Date, Date]) => void;
+    enter: () => void;
     renderPopup: DCloneHTMLElement;
   }) => JSX.Element | null;
   dRef:
@@ -200,6 +201,25 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef
     forceUpdate();
   };
 
+  const handleEnter = () => {
+    const index = isFocus[0] ? 0 : 1;
+    const value = isFocus[0] ? valueLeft : valueRight;
+    if (dayjs(dataRef.current.inputValue[index], dFormat, true).isValid()) {
+      if (dRange) {
+        if (isNull(isFocus[0] ? valueRight : valueLeft)) {
+          dataRef.current.focusAnother = true;
+        } else {
+          onVisibleChange(false);
+        }
+      } else {
+        onVisibleChange(false);
+      }
+    } else {
+      dataRef.current.inputValue[index] = isNull(value) ? '' : dayjs(value).format(dFormat);
+    }
+    forceUpdate();
+  };
+
   const clearable = dClearable && !isNull(_value) && !dVisible && !dDisabled;
 
   const maxZIndex = useMaxIndex(dVisible);
@@ -324,20 +344,7 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef
                   }}
                   onKeyDown={(e) => {
                     if (e.code === 'Enter') {
-                      if (dayjs(dataRef.current.inputValue[index], dFormat, true).isValid()) {
-                        if (dRange) {
-                          if (isNull(isLeft ? valueRight : valueLeft)) {
-                            dataRef.current.focusAnother = true;
-                          } else {
-                            onVisibleChange(false);
-                          }
-                        } else {
-                          onVisibleChange(false);
-                        }
-                      } else {
-                        dataRef.current.inputValue[index] = isNull(value) ? '' : dayjs(value).format(dFormat);
-                      }
-                      forceUpdate();
+                      handleEnter();
                     }
                   }}
                   onFocus={() => {
@@ -490,6 +497,7 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef
                     changeValue(date);
                   }
                 },
+                enter: handleEnter,
                 renderPopup: (el) =>
                   cloneHTMLElement(el, {
                     ref: popupRef,

packages/ui/src/components/date-picker/DatePicker.tsx

@@ -4,7 +4,7 @@ import type { DFormControl } from '../form';
 import type { DTimePickerProps } from '../time-picker';
 import type { DPanelPrivateProps as DTimePickerPanelPrivateProps } from '../time-picker/Panel';
 
-import { isBoolean, isUndefined } from 'lodash';
+import { isArray, isBoolean, isUndefined } from 'lodash';
 import React, { useRef } from 'react';
 
 import { CalendarOutlined } from '@react-devui/icons';
@@ -139,7 +139,7 @@ function DatePicker(props: DDatePickerProps, ref: React.ForwardedRef<DDateInputR
       afterVisibleChange={afterVisibleChange}
       onClear={onClear}
     >
-      {({ date, isFocus, changeDate, renderPopup }) => {
+      {({ date, isFocus, changeDate, enter, renderPopup }) => {
         const index = isFocus[0] ? 0 : 1;
         const position = isFocus[0] ? 'start' : 'end';
 
@@ -152,9 +152,8 @@ function DatePicker(props: DDatePickerProps, ref: React.ForwardedRef<DDateInputR
               dConfigDate={dConfigDate ? (...args) => dConfigDate(...args, position, date) : undefined}
               onDateChange={(date) => {
                 changeDate(date);
-
                 if (!dShowTime) {
-                  changeVisible(false);
+                  enter();
                 }
               }}
             ></DPanel>
@@ -182,10 +181,13 @@ function DatePicker(props: DDatePickerProps, ref: React.ForwardedRef<DDateInputR
                   const handleClick = () => {
                     const d = dPresetDate[name]();
                     changeDate(d);
+                    if (dRange && isArray(d)) {
+                      changeVisible(false);
+                    } else {
+                      enter();
+                    }
                     updatePanelRef.current?.(d[index]);
                     updateTimePickerPanelRef.current?.(d[index]);
-
-                    changeVisible(false);
                   };
 
                   return (
@@ -205,10 +207,9 @@ function DatePicker(props: DDatePickerProps, ref: React.ForwardedRef<DDateInputR
                   onClick={() => {
                     const now = new Date();
                     changeDate(now);
+                    enter();
                     updatePanelRef.current?.(now);
                     updateTimePickerPanelRef.current?.(now);
-
-                    changeVisible(false);
                   }}
                   dType="link"
                 >

packages/ui/src/components/time-picker/TimePicker.tsx

@@ -129,7 +129,7 @@ function TimePicker(props: DTimePickerProps, ref: React.ForwardedRef<DTimePicker
       afterVisibleChange={afterVisibleChange}
       onClear={onClear}
     >
-      {({ date, isFocus, changeDate, renderPopup }) =>
+      {({ date, isFocus, changeDate, enter, renderPopup }) =>
         renderPopup(
           <div className={getClassName(dPopupClassName, `${dPrefix}time-picker__popup`)}>
             <DPanel
@@ -145,9 +145,8 @@ function TimePicker(props: DTimePickerProps, ref: React.ForwardedRef<DTimePicker
                 onClick={() => {
                   const now = new Date();
                   changeDate(now);
+                  enter();
                   updatePanelRef.current?.(now);
-
-                  changeVisible(false);
                 }}
                 dType="link"
               >