feat(ui:time-picker): improve logic of 'Enter' keydown

DevCloudFE · Jun 23, 2022 · ddaa337 · ddaa337
1 parent e3dc42d
commit ddaa337
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 16 deletions.
diff --git a/packages/ui/src/components/_time-input/TimeInput.tsx b/packages/ui/src/components/_time-input/TimeInput.tsx
@@ -241,12 +241,6 @@ function TimeInput(props: DTimeInputProps, ref: React.ForwardedRef<DTimeInputRef
 
               onVisibleChange?.(true);
             }
-          } else {
-            if (e.code === 'Enter') {
-              e.preventDefault();
-
-              onVisibleChange?.(false);
-            }
           }
         }}
         onFocus={(e) => {

diff --git a/packages/ui/src/components/time-picker/TimePicker.tsx b/packages/ui/src/components/time-picker/TimePicker.tsx
@@ -73,12 +73,12 @@ function TimePicker(props: DTimePickerProps, ref: React.ForwardedRef<DTimePicker
   //#endregion
 
   const dataRef = useRef<{
-    hasOrder: boolean;
+    focusAnother: boolean;
     clearTid?: () => void;
     inputValue: [string, string];
     time: [Date | null, Date | null];
   }>({
-    hasOrder: true,
+    focusAnother: false,
     inputValue: ['', ''],
     time: [null, null],
   });
@@ -112,17 +112,17 @@ function TimePicker(props: DTimePickerProps, ref: React.ForwardedRef<DTimePicker
       if (isNull(_value)) {
         dataRef.current.time[position === 'start' ? 0 : 1] = time;
         if (dataRef.current.time.every((v) => !isNull(v))) {
-          dataRef.current.hasOrder = orderTime(dataRef.current.time as [Date, Date], dOrder);
-          if (dataRef.current.hasOrder) {
+          dataRef.current.focusAnother = orderTime(dataRef.current.time as [Date, Date], dOrder);
+          if (dataRef.current.focusAnother) {
             dataRef.current.inputValue.reverse();
           }
           _changeValue(dataRef.current.time as [Date, Date]);
         }
       } else {
         _changeValue((draft) => {
           (draft as [Date, Date])[position === 'start' ? 0 : 1] = time;
-          dataRef.current.hasOrder = orderTime(draft as [Date, Date], dOrder);
-          if (dataRef.current.hasOrder) {
+          dataRef.current.focusAnother = orderTime(draft as [Date, Date], dOrder);
+          if (dataRef.current.focusAnother) {
             dataRef.current.inputValue.reverse();
           }
         });
@@ -168,7 +168,7 @@ function TimePicker(props: DTimePickerProps, ref: React.ForwardedRef<DTimePicker
   ) as [string?, string?];
 
   useEffect(() => {
-    if (dataRef.current.hasOrder && document.activeElement) {
+    if (dataRef.current.focusAnother && document.activeElement) {
       const el = document.activeElement.parentElement as HTMLElement;
       for (let index = 0; index < el.childElementCount; index++) {
         const element = el.children.item(index) as HTMLElement;
@@ -178,7 +178,7 @@ function TimePicker(props: DTimePickerProps, ref: React.ForwardedRef<DTimePicker
         }
       }
     }
-    dataRef.current.hasOrder = false;
+    dataRef.current.focusAnother = false;
   });
 
   const getInputProps = (isLeft: boolean): React.InputHTMLAttributes<HTMLInputElement> => {
@@ -210,8 +210,20 @@ function TimePicker(props: DTimePickerProps, ref: React.ForwardedRef<DTimePicker
       onKeyDown: (e) => {
         inputProps?.onKeyDown?.(e);
 
-        if (e.code === 'Enter' && !dayjs(dataRef.current.inputValue[index], format, true).isValid()) {
-          dataRef.current.inputValue[index] = isNull(value) ? '' : dayjs(value).format(format);
+        if (e.code === 'Enter') {
+          if (dayjs(dataRef.current.inputValue[index], format, true).isValid()) {
+            if (dRange) {
+              if (isNull(isLeft ? valueRight : valueLeft)) {
+                dataRef.current.focusAnother = true;
+              } else {
+                changeVisible(false);
+              }
+            } else {
+              changeVisible(false);
+            }
+          } else {
+            dataRef.current.inputValue[index] = isNull(value) ? '' : dayjs(value).format(format);
+          }
           forceUpdate();
         }
       },

diff --git a/packages/ui/src/styles/components/_time-input.scss b/packages/ui/src/styles/components/_time-input.scss
@@ -52,6 +52,10 @@
   }
 
   @include when(disabled) {
+    @include e(input) {
+      color: var(--#{$variable-prefix}color-disabled);
+    }
+
     @include e(icon) {
       color: var(--#{$variable-prefix}color-disabled);
     }