fix(TimePicker): timePicker confirm event is invalid (#79)

* fix: timePicker confirm event is invalid * fix: 优化 * fix: 优化 * fix: fixup type
Tencent · Dec 25, 2021 · 45bca64 · 45bca64
1 parent 4605d70
commit 45bca64
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 9 deletions.
diff --git a/src/time-picker/TimePicker.tsx b/src/time-picker/TimePicker.tsx
@@ -78,7 +78,10 @@ const TimePicker = forwardRefWithStatics(
             hideDisabledTime={hideDisabledTime}
             isFooterDisplay={true}
             onChange={onChange}
-            handleConfirmClick={() => setPanelShow(false)}
+            handleConfirmClick={(value) => {
+              onChange(dayjs(value).format(format));
+              setPanelShow(false);
+            }}
             value={value}
           />
         }

diff --git a/src/time-picker/TimeRangePicker.tsx b/src/time-picker/TimeRangePicker.tsx
@@ -67,7 +67,10 @@ const TimeRangePicker: FC<TimeRangePickerProps> = (props) => {
           isFooterDisplay={true}
           value={value}
           onChange={onChange}
-          handleConfirmClick={() => setPanelShow(false)}
+          handleConfirmClick={(value) => {
+            onChange(value);
+            setPanelShow(false);
+          }}
         />
       }
       disabled={disabled as boolean}

diff --git a/src/time-picker/panel/TimePickerPanel.tsx b/src/time-picker/panel/TimePickerPanel.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 import dayjs from 'dayjs';
 import SinglePanel, { SinglePanelProps } from './SinglePanel';
 
@@ -10,7 +10,7 @@ import { DEFAULT_STEPS, DEFAULT_FORMAT, useTimePickerTextConfig } from '../const
 export interface TimePickerPanelProps extends SinglePanelProps {
   // 是否展示footer
   isFooterDisplay?: boolean;
-  handleConfirmClick?: () => void;
+  handleConfirmClick: (defaultValue: dayjs.Dayjs) => void;
 }
 
 const TimePickerPanel: FC<TimePickerPanelProps> = (props) => {
@@ -29,14 +29,31 @@ const TimePickerPanel: FC<TimePickerPanelProps> = (props) => {
   const panelClassName = `${classPrefix}-time-picker__panel`;
   const showNowTimeBtn = !!steps.filter((v) => v > 1).length;
 
+  const defaultValue = useMemo(() => {
+    const isStepsSet = !!steps.filter((v) => v > 1).length;
+    if (value) {
+      return dayjs(value, format);
+    }
+    if (isStepsSet) {
+      return dayjs().hour(0).minute(0).second(0);
+    }
+    return dayjs();
+  }, [value, format, steps]);
+
   return (
     <div className={panelClassName}>
       <div className={`${panelClassName}-section-body`}>
         <SinglePanel {...props} format={format} steps={steps} value={value} />
       </div>
       {isFooterDisplay ? (
         <div className={`${panelClassName}-section-footer`}>
-          <Button theme="primary" variant="base" onClick={handleConfirmClick}>
+          <Button
+            theme="primary"
+            variant="base"
+            onClick={() => {
+              handleConfirmClick(defaultValue);
+            }}
+          >
             {TEXT_CONFIG.confirm}
           </Button>
           {!showNowTimeBtn ? (

diff --git a/src/time-picker/panel/TimePickerRangePanel.tsx b/src/time-picker/panel/TimePickerRangePanel.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 import classNames from 'classnames';
 import dayjs from 'dayjs';
 
@@ -9,12 +9,12 @@ import Button from '../../button';
 
 import { DEFAULT_STEPS, DEFAULT_FORMAT, useTimePickerTextConfig } from '../consts';
 
-import { TdTimeRangePickerProps } from '../type';
+import { TdTimeRangePickerProps, TimeRangeValue } from '../type';
 
 export interface TimeRangePickerPanelProps extends Omit<SinglePanelProps, 'value' | 'onChange'> {
   // 是否展示footer
   isFooterDisplay?: boolean;
-  handleConfirmClick?: () => void;
+  handleConfirmClick?: (value: TimeRangeValue) => void;
   value: TdTimeRangePickerProps['value'];
   onChange: TdTimeRangePickerProps['onChange'];
 }
@@ -45,6 +45,13 @@ const TimePickerPanel: FC<TimeRangePickerPanelProps> = (props) => {
     }
   };
 
+  const defaultValue = useMemo(() => {
+    if (value && value.length === 0) {
+      return [dayjs().format(format), dayjs().format(format)];
+    }
+    return value;
+  }, [value, format]);
+
   return (
     <div className={classNames(panelClassName, `${panelClassName}-section`)}>
       <div className={`${panelClassName}-section-body`}>
@@ -65,7 +72,13 @@ const TimePickerPanel: FC<TimeRangePickerPanelProps> = (props) => {
       </div>
       {isFooterDisplay ? (
         <div className={`${panelClassName}-section-footer`}>
-          <Button theme="primary" variant="base" onClick={handleConfirmClick}>
+          <Button
+            theme="primary"
+            variant="base"
+            onClick={() => {
+              handleConfirmClick(defaultValue);
+            }}
+          >
             {TEXT_CONFIG.confirm}
           </Button>
         </div>