From 45bca64118a8537617aea4a267931bacb8e95bf9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BE=99=E9=A3=8E?= <455947455@qq.com>
Date: Sat, 25 Dec 2021 22:44:43 +0800
Subject: [PATCH] fix(TimePicker): timePicker confirm event is invalid (#79)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: timePicker confirm event is invalid

* fix: 优化

* fix: 优化

* fix: fixup type
---
 src/time-picker/TimePicker.tsx                |  5 +++-
 src/time-picker/TimeRangePicker.tsx           |  5 +++-
 src/time-picker/panel/TimePickerPanel.tsx     | 23 ++++++++++++++++---
 .../panel/TimePickerRangePanel.tsx            | 21 +++++++++++++----
 4 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/src/time-picker/TimePicker.tsx b/src/time-picker/TimePicker.tsx
index 4ef460222..4551e3461 100644
--- 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
index d3bc23dfc..d237f6079 100644
--- 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
index ce4133522..c61e93be3 100644
--- 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,6 +29,17 @@ 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`}>
@@ -36,7 +47,13 @@ const TimePickerPanel: FC<TimePickerPanelProps> = (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>
           {!showNowTimeBtn ? (
diff --git a/src/time-picker/panel/TimePickerRangePanel.tsx b/src/time-picker/panel/TimePickerRangePanel.tsx
index 56c0ca0b6..93363405b 100644
--- 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>