feat(DatePicker): add needConfirm api (#3011)

* feat(datepicker): add needConfirm api * fix(date-picker): fix missing attribute
Tencent · Jul 29, 2024 · d5da695 · d5da695
1 parent 7c004d2
commit d5da695
Show file tree

Hide file tree

Showing 11 changed files with 74 additions and 17 deletions.
diff --git a/src/date-picker/DatePicker.tsx b/src/date-picker/DatePicker.tsx
@@ -12,6 +12,8 @@ import { parseToDayjs, getDefaultFormat, formatTime, formatDate } from '../_comm
 import { subtractMonth, addMonth, extractTimeObj, covertToDate } from '../_common/js/date-picker/utils';
 import { datePickerDefaultProps } from './defaultProps';
 import useDefaultProps from '../hooks/useDefaultProps';
+import useLatest from '../hooks/useLatest';
+import useUpdateEffect from '../hooks/useUpdateEffect';
 
 export interface DatePickerProps extends TdDatePickerProps, StyledProps {}
 
@@ -32,6 +34,7 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((originalProps, r
     defaultTime,
     timePickerProps,
     presetsPlacement,
+    needConfirm,
     onPick,
   } = props;
 
@@ -63,6 +66,29 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((originalProps, r
     enableTimePicker,
   });
 
+  const onTriggerNeedConfirm = useLatest(() => {
+    if (!needConfirm && enableTimePicker && !popupVisible) {
+      const nextValue = formatDate(inputValue, { format });
+      if (nextValue) {
+        onChange(formatDate(inputValue, { format, targetFormat: valueType }), {
+          dayjsValue: parseToDayjs(inputValue, format),
+          trigger: 'confirm',
+        });
+      } else {
+        setInputValue(
+          formatDate(value, {
+            format,
+          }),
+        );
+      }
+    }
+  });
+
+  useUpdateEffect(() => {
+    //  日期时间选择器不需要点击确认按钮完成的操作
+    onTriggerNeedConfirm.current();
+  }, [popupVisible]);
+
   useEffect(() => {
     // 面板展开重置数据
     // Date valueType、week mode 、quarter mode nad empty string don't need to be parsed
@@ -212,6 +238,7 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((originalProps, r
     enableTimePicker,
     presetsPlacement,
     popupVisible,
+    needConfirm,
     onCellClick,
     onCellMouseEnter,
     onCellMouseLeave,

diff --git a/src/date-picker/DatePickerPanel.tsx b/src/date-picker/DatePickerPanel.tsx
@@ -17,7 +17,11 @@ import useDefaultProps from '../hooks/useDefaultProps';
 export interface DatePickerPanelProps extends TdDatePickerPanelProps, StyledProps {}
 
 const DatePickerPanel = forwardRef<HTMLDivElement, DatePickerPanelProps>((originalProps, ref) => {
-  const props = useDefaultProps<DatePickerPanelProps>(originalProps, { mode: 'date', defaultValue: '' });
+  const props = useDefaultProps<DatePickerPanelProps>(originalProps, {
+    mode: 'date',
+    defaultValue: '',
+    needConfirm: true,
+  });
   const { value, onChange, time, setTime, month, setMonth, year, setYear, cacheValue, setCacheValue } =
     useSingleValue(props);
 
@@ -31,6 +35,7 @@ const DatePickerPanel = forwardRef<HTMLDivElement, DatePickerPanelProps>((origin
     presets,
     timePickerProps,
     presetsPlacement,
+    needConfirm,
     onPanelClick,
   } = props;
 
@@ -174,6 +179,7 @@ const DatePickerPanel = forwardRef<HTMLDivElement, DatePickerPanelProps>((origin
     timePickerProps,
     enableTimePicker,
     presetsPlacement,
+    needConfirm,
     onCellClick,
     onJumperClick,
     onConfirmClick,

diff --git a/src/date-picker/base/Footer.tsx b/src/date-picker/base/Footer.tsx
@@ -5,7 +5,8 @@ import Button from '../../button';
 import useConfig from '../../hooks/useConfig';
 import { TdDatePickerProps, TdDateRangePickerProps, DateValue } from '../type';
 
-interface DatePickerFooterProps extends Pick<TdDatePickerProps, 'enableTimePicker' | 'presetsPlacement'> {
+interface DatePickerFooterProps
+  extends Pick<TdDatePickerProps, 'enableTimePicker' | 'presetsPlacement' | 'needConfirm'> {
   presets?: TdDatePickerProps['presets'] | TdDateRangePickerProps['presets'];
   onPresetClick?: Function;
   onConfirmClick?: Function;
@@ -25,6 +26,7 @@ const DatePickerFooter = (props: DatePickerFooterProps) => {
     presets,
     onPresetClick,
     selectedValue,
+    needConfirm,
   } = props;
 
   const footerClass = classNames(
@@ -49,7 +51,7 @@ const DatePickerFooter = (props: DatePickerFooterProps) => {
             ))}
         </div>
       }
-      {enableTimePicker && (
+      {enableTimePicker && needConfirm && (
         <Button disabled={!selectedValue} size="small" theme="primary" onClick={(e) => onConfirmClick({ e })}>
           {confirmText}
         </Button>

diff --git a/src/date-picker/date-picker.en-US.md b/src/date-picker/date-picker.en-US.md
@@ -18,6 +18,7 @@ firstDayOfWeek | Number | 7 | options: 1/2/3/4/5/6/7 | N
 format | String | 'YYYY-MM-DD' | \- | N
 inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N
 mode | String | date | options: year/quarter/month/week/date | N
+needConfirm | Boolean | true | whether a confirmation button needs to be clicked to complete the action in the date-time picker scenario, default is true | N
 placeholder | String / Array | undefined | Typescript：`string` | N
 popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N
 prefixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N

diff --git a/src/date-picker/date-picker.md b/src/date-picker/date-picker.md
@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### DatePicker Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
@@ -18,6 +19,7 @@ firstDayOfWeek | Number | 7 | 第一天从星期几开始。可选项：1/2/3/4/
 format | String | 'YYYY-MM-DD' | 仅用于格式化日期显示的格式，不影响日期值。注意和 `valueType` 的区别，`valueType`会直接决定日期值 `value` 的格式。全局配置默认为：'YYYY-MM-DD'，[详细文档](https://day.js.org/docs/en/display/format) | N
 inputProps | Object | - | 透传给输入框（Input）组件的参数。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N
 mode | String | date | 选择器模式。可选项：year/quarter/month/week/date | N
+needConfirm | Boolean | true | 决定在日期时间选择器的场景下是否需要点击确认按钮才完成选择动作，默认为`true` | N
 placeholder | String / Array | undefined | 占位符。TS 类型：`string` | N
 popupProps | Object | - | 透传给 popup 组件的参数。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N
 prefixIcon | TElement | - | 用于自定义组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N

diff --git a/src/date-picker/defaultProps.ts b/src/date-picker/defaultProps.ts
@@ -12,6 +12,7 @@ export const datePickerDefaultProps: TdDatePickerProps = {
   enableTimePicker: false,
   format: undefined,
   mode: 'date',
+  needConfirm: true,
   placeholder: undefined,
   presetsPlacement: 'bottom',
   size: 'medium',

diff --git a/src/date-picker/panel/ExtraContent.tsx b/src/date-picker/panel/ExtraContent.tsx
@@ -4,15 +4,19 @@ import type { SinglePanelProps } from './SinglePanel';
 import type { TdDatePickerProps, TdDateRangePickerProps, DateValue } from '../type';
 
 export interface ExtraContentProps
-  extends Pick<SinglePanelProps, 'enableTimePicker' | 'presetsPlacement' | 'onPresetClick' | 'onConfirmClick'> {
+  extends Pick<
+    SinglePanelProps,
+    'enableTimePicker' | 'presetsPlacement' | 'onPresetClick' | 'onConfirmClick' | 'needConfirm'
+  > {
   selectedValue?: DateValue;
   presets?: TdDatePickerProps['presets'] | TdDateRangePickerProps['presets'];
 }
 
 export default function ExtraContent(props: ExtraContentProps) {
-  const { presets, enableTimePicker, presetsPlacement, onPresetClick, onConfirmClick, selectedValue } = props;
+  const { presets, enableTimePicker, presetsPlacement, onPresetClick, onConfirmClick, selectedValue, needConfirm } =
+    props;
 
-  const showPanelFooter = enableTimePicker || presets;
+  const showPanelFooter = (enableTimePicker && needConfirm) || presets;
 
   return showPanelFooter ? (
     <DateFooter
@@ -22,6 +26,7 @@ export default function ExtraContent(props: ExtraContentProps) {
       onConfirmClick={onConfirmClick}
       presetsPlacement={presetsPlacement}
       selectedValue={selectedValue}
+      needConfirm={needConfirm}
     />
   ) : null;
 }
diff --git a/src/date-picker/panel/RangePanel.tsx b/src/date-picker/panel/RangePanel.tsx
@@ -41,6 +41,7 @@ const RangePanel = forwardRef<HTMLDivElement, RangePanelProps>((originalProps, r
     panelPreselection: true,
     enableTimePicker: false,
     presetsPlacement: 'bottom',
+    needConfirm: true,
   });
   const {
     value = [],
@@ -52,7 +53,7 @@ const RangePanel = forwardRef<HTMLDivElement, RangePanelProps>((originalProps, r
     disableDate: disableDateFromProps,
     firstDayOfWeek = globalDatePickerConfig.firstDayOfWeek,
     isFirstValueSelected,
-
+    needConfirm,
     style,
     className,
     activeIndex,
@@ -153,6 +154,7 @@ const RangePanel = forwardRef<HTMLDivElement, RangePanelProps>((originalProps, r
           onPresetClick={onPresetClick}
           onConfirmClick={onConfirmClick}
           presetsPlacement={presetsPlacement}
+          needConfirm={needConfirm}
         />
       ) : null}
       <div className={`${panelName}-content-wrapper`}>
@@ -200,6 +202,7 @@ const RangePanel = forwardRef<HTMLDivElement, RangePanelProps>((originalProps, r
           onPresetClick={onPresetClick}
           onConfirmClick={onConfirmClick}
           presetsPlacement={presetsPlacement}
+          needConfirm={needConfirm}
         />
       ) : null}
     </div>

diff --git a/src/date-picker/panel/SinglePanel.tsx b/src/date-picker/panel/SinglePanel.tsx
@@ -41,7 +41,7 @@ const SinglePanel = forwardRef<HTMLDivElement, SinglePanelProps>((originalProps,
     mode,
     presetsPlacement,
     firstDayOfWeek = globalDatePickerConfig.firstDayOfWeek,
-
+    needConfirm,
     style,
     className,
     year,
@@ -95,6 +95,7 @@ const SinglePanel = forwardRef<HTMLDivElement, SinglePanelProps>((originalProps,
     onPresetClick: props.onPresetClick,
     onConfirmClick: props.onConfirmClick,
     selectedValue: props.value,
+    needConfirm,
   };
 
   return (

diff --git a/src/date-picker/type.ts b/src/date-picker/type.ts
@@ -63,6 +63,11 @@ export interface TdDatePickerProps {
    * @default date
    */
   mode?: 'year' | 'quarter' | 'month' | 'week' | 'date';
+  /**
+   * 决定在日期时间选择器的场景下是否需要点击确认按钮才完成选择动作，默认为`true`
+   * @default true
+   */
+  needConfirm?: boolean;
   /**
    * 占位符
    */
@@ -195,6 +200,11 @@ export interface TdDateRangePickerProps {
    * @default date
    */
   mode?: 'year' | 'quarter' | 'month' | 'week' | 'date';
+  /**
+   * 决定在日期时间区间选择器的场景下是否需要点击确认按钮才完成选择动作，默认为 `true`
+   * @default true
+   */
+  needConfirm?: boolean;
   /**
    * 在开始日期选中之前，面板是否显示预选状态，即是否高亮预选日期
    * @default true
@@ -327,6 +337,7 @@ export interface TdDatePickerPanelProps
     | 'presets'
     | 'presetsPlacement'
     | 'timePickerProps'
+    | 'needConfirm'
   > {
   /**
    * 时间选择器默认值，当 value/defaultValue 未设置值时有效

diff --git a/src/hooks/useUpdateEffect.ts b/src/hooks/useUpdateEffect.ts
@@ -1,14 +1,12 @@
-import { useRef, DependencyList } from 'react';
-import useLayoutEffect from './useLayoutEffect';
+import { useEffect } from 'react';
+import type { DependencyList, EffectCallback } from 'react';
+import useIsFirstRender from './useIsFirstRender';
 
-const useUpdateEffect = (callback: () => void, dependency: DependencyList) => {
-  const ref = useRef(false);
+const useUpdateEffect = (callback: EffectCallback, dependency: DependencyList) => {
+  const isFirstRender = useIsFirstRender();
 
-  useLayoutEffect(() => {
-    if (!ref.current) {
-      ref.current = true;
-      return undefined;
-    }
+  useEffect(() => {
+    if (isFirstRender) return;
 
     return callback();
     // eslint-disable-next-line react-hooks/exhaustive-deps