feat(datepicker): add cancel-range-select-limit API

Author: uyarn

db/TDesign.db

@@ -2,24 +2,11 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { TdDatePickerProps, TdDateRangePickerProps, TdDatePickerPanelProps, TdDateRangePickerPanelProps } from './type';
-
-export const datePickerDefaultProps: TdDatePickerProps = {
-  allowInput: false,
-  clearable: false,
-  defaultTime: '00:00:00',
-  enableTimePicker: false,
-  format: undefined,
-  mode: 'date',
-  placeholder: undefined,
-  presetsPlacement: 'bottom',
-  size: 'medium',
-  status: 'default',
-  defaultValue: '',
-};
+import { TdDateRangePickerProps } from './type';
 
 export const dateRangePickerDefaultProps: TdDateRangePickerProps = {
   allowInput: false,
+  cancelRangeSelectLimit: false,
   clearable: false,
   defaultTime: ['00:00:00', '23:59:59'],
   enableTimePicker: false,
@@ -30,7 +17,3 @@ export const dateRangePickerDefaultProps: TdDateRangePickerProps = {
   status: 'default',
   defaultValue: [],
 };
-
-export const datePickerPanelDefaultProps: TdDatePickerPanelProps = { defaultTime: '00:00:00' };
-
-export const dateRangePickerPanelDefaultProps: TdDateRangePickerPanelProps = { defaultTime: ['00:00:00', '23:59:59'] };

packages/products/tdesign-react/src/date-picker/defaultProps.ts

@@ -4,150 +4,24 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { InputProps } from '../input';
 import { PopupProps } from '../popup';
+import { RangeInputProps } from '../range-input';
 import { TimePickerProps } from '../time-picker';
 import { Dayjs } from 'dayjs';
-import { RangeInputProps } from '../range-input';
 import { TNode, TElement, SizeEnum } from '../common';
 import { MouseEvent, FocusEvent, FormEvent } from 'react';
 
-export interface TdDatePickerProps {
+export interface TdDateRangePickerProps {
   /**
    * 是否允许输入日期
    * @default false
    */
   allowInput?: boolean;
   /**
-   * 是否显示清除按钮
-   * @default false
-   */
-  clearable?: boolean;
-  /**
-   * 时间选择器默认值，当 value/defaultValue 未设置值时有效
-   * @default '00:00:00'
-   */
-  defaultTime?: string;
-  /**
-   * 禁用日期，示例：['A', 'B'] 表示日期 A 和日期 B 会被禁用。`{ from: 'A', to: 'B' }` 表示在 A 到 B 之间的日期会被禁用。`{ before: 'A', after: 'B' }` 表示在 A 之前和在 B 之后的日期都会被禁用。其中 A = '2021-01-01'，B = '2021-02-01'。值类型为 Function 则表示返回值为 true 的日期会被禁用
-   */
-  disableDate?: DisableDate;
-  /**
-   * 是否禁用组件
-   */
-  disabled?: boolean;
-  /**
-   * 是否显示时间选择
-   * @default false
-   */
-  enableTimePicker?: boolean;
-  /**
-   * 第一天从星期几开始
-   */
-  firstDayOfWeek?: number;
-  /**
-   * 仅用于格式化日期显示的格式，不影响日期值。注意和 `valueType` 的区别，`valueType`会直接决定日期值 `value` 的格式。全局配置默认为：'YYYY-MM-DD'，[详细文档](https://day.js.org/docs/en/display/format)
-   */
-  format?: string;
-  /**
-   * 透传给输入框（Input）组件的参数
-   */
-  inputProps?: InputProps;
-  /**
-   * 选择器模式
-   * @default date
-   */
-  mode?: 'year' | 'quarter' | 'month' | 'week' | 'date';
-  /**
-   * 占位符
-   */
-  placeholder?: string;
-  /**
-   * 透传给 popup 组件的参数
-   */
-  popupProps?: PopupProps;
-  /**
-   * 用于自定义组件前置图标
-   */
-  prefixIcon?: TElement;
-  /**
-   * 预设快捷日期选择，示例：`{ '元旦': '2021-01-01', '昨天':  dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`
-   */
-  presets?: PresetDate;
-  /**
-   * 预设面板展示区域（包含确定按钮）
-   * @default bottom
-   */
-  presetsPlacement?: 'left' | 'top' | 'right' | 'bottom';
-  /**
-   * 输入框尺寸
-   * @default medium
-   */
-  size?: SizeEnum;
-  /**
-   * 输入框状态
-   * @default default
-   */
-  status?: 'default' | 'success' | 'warning' | 'error';
-  /**
-   * 用于自定义组件后置图标
-   */
-  suffixIcon?: TElement;
-  /**
-   * 透传 TimePicker 组件属性
-   */
-  timePickerProps?: TimePickerProps;
-  /**
-   * 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式
-   */
-  tips?: TNode;
-  /**
-   * 选中值
-   * @default ''
-   */
-  value?: DateValue;
-  /**
-   * 选中值，非受控属性
-   * @default ''
-   */
-  defaultValue?: DateValue;
-  /**
-   * 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式。`ValueTypeEnum` 即将废弃，请更为使用 `DatePickerValueType`
-   * @default ''
-   */
-  valueType?: DatePickerValueType;
-  /**
-   * 当输入框失去焦点时触发
-   */
-  onBlur?: (context: { value: DateValue; e: FocusEvent<HTMLInputElement> }) => void;
-  /**
-   * 选中值发生变化时触发
-   */
-  onChange?: (value: DateValue, context: { dayjsValue?: Dayjs; trigger?: DatePickerTriggerSource }) => void;
-  /**
-   * 如果存在“确定”按钮，则点击“确定”按钮时触发
-   */
-  onConfirm?: (context: { date: Date; e: MouseEvent<HTMLDivElement> }) => void;
-  /**
-   * 输入框获得焦点时触发
-   */
-  onFocus?: (context: { value: DateValue; e: FocusEvent<HTMLInputElement> }) => void;
-  /**
-   * 面板选中值后触发
-   */
-  onPick?: (value: DateValue) => void;
-  /**
-   * 点击预设按钮后触发
-   */
-  onPresetClick?: (context: { preset: PresetDate; e: MouseEvent<HTMLDivElement> }) => void;
-}
-
-export interface TdDateRangePickerProps {
-  /**
-   * 是否允许输入日期
+   * 默认的日期选择交互是根据点击前后日期的顺序来决定并且会加以限制。比如：用户先点击开始时间输入框，选择了一个日期例如2020-05-15，紧接着交互会自动将焦点跳到结束日期输入框，等待用户选择结束时间。此时用户只能选择大于2020-05-15的日期（之前的日期会被灰态禁止点击，限制用户的点击）。当该值传递`true`时，则取消该限制。
    * @default false
    */
-  allowInput?: boolean;
+  cancelRangeSelectLimit?: boolean;
   /**
    * 是否显示清除按钮
    * @default false
@@ -304,158 +178,10 @@ export interface TdDateRangePickerProps {
   onPresetClick?: (context: { preset: PresetDate; e: MouseEvent<HTMLDivElement> }) => void;
 }
 
-export interface TdDatePickerPanelProps
-  extends Pick<
-    TdDatePickerProps,
-    | 'value'
-    | 'defaultValue'
-    | 'disableDate'
-    | 'enableTimePicker'
-    | 'firstDayOfWeek'
-    | 'format'
-    | 'mode'
-    | 'presets'
-    | 'presetsPlacement'
-    | 'timePickerProps'
-  > {
-  /**
-   * 时间选择器默认值，当 value/defaultValue 未设置值时有效
-   * @default '00:00:00'
-   */
-  defaultTime?: string;
-  /**
-   * 点击日期单元格时触发
-   */
-  onCellClick?: (context: { date: Date; e: MouseEvent<HTMLDivElement> }) => void;
-  /**
-   * 选中值发生变化时触发。参数 `context.trigger` 表示触发当前事件的来源，不同的模式触发来源也会不同
-   */
-  onChange?: (
-    value: DateValue,
-    context: { dayjsValue?: Dayjs; e?: MouseEvent<HTMLDivElement>; trigger?: DatePickerTriggerSource },
-  ) => void;
-  /**
-   * 如果存在“确定”按钮，则点击“确定”按钮时触发
-   */
-  onConfirm?: (context: { date: Date; e: MouseEvent<HTMLDivElement> }) => void;
-  /**
-   * 月份切换发生变化时触发
-   */
-  onMonthChange?: (context: {
-    month: number;
-    date: Date;
-    e?: MouseEvent<HTMLDivElement>;
-    trigger: DatePickerMonthChangeTrigger;
-  }) => void;
-  /**
-   * 点击面板时触发
-   */
-  onPanelClick?: (context: { e: MouseEvent<HTMLDivElement> }) => void;
-  /**
-   * 点击预设按钮后触发
-   */
-  onPresetClick?: (context: { preset: PresetDate; e: MouseEvent<HTMLDivElement> }) => void;
-  /**
-   * 时间切换发生变化时触发
-   */
-  onTimeChange?: (context: {
-    time: string;
-    date: Date;
-    trigger: DatePickerTimeChangeTrigger;
-    e?: MouseEvent<HTMLDivElement>;
-  }) => void;
-  /**
-   * 年份切换发生变化时触发
-   */
-  onYearChange?: (context: {
-    year: number;
-    date: Date;
-    trigger: DatePickerYearChangeTrigger;
-    e?: MouseEvent<HTMLDivElement>;
-  }) => void;
-}
-
-export interface TdDateRangePickerPanelProps
-  extends Pick<
-    TdDateRangePickerProps,
-    | 'value'
-    | 'defaultValue'
-    | 'disableDate'
-    | 'enableTimePicker'
-    | 'firstDayOfWeek'
-    | 'format'
-    | 'mode'
-    | 'presets'
-    | 'presetsPlacement'
-    | 'panelPreselection'
-    | 'timePickerProps'
-  > {
-  /**
-   * 时间选择器默认值，当 value/defaultValue 未设置值时有效
-   * @default ["00:00:00", "23:59:59"]
-   */
-  defaultTime?: string[];
-  /**
-   * 点击日期单元格时触发
-   */
-  onCellClick?: (context: { date: Date[]; partial: DateRangePickerPartial; e: MouseEvent<HTMLDivElement> }) => void;
-  /**
-   * 选中值发生变化时触发。参数 `context.trigger` 表示触发当前事件的来源，不同的模式触发来源也会不同
-   */
-  onChange?: (
-    value: DateRangeValue,
-    context: {
-      dayjsValue?: Dayjs[];
-      partial: DateRangePickerPartial;
-      e?: MouseEvent<HTMLDivElement>;
-      trigger?: DatePickerTriggerSource;
-    },
-  ) => void;
-  /**
-   * 如果存在“确定”按钮，则点击“确定”按钮时触发
-   */
-  onConfirm?: (context: { date: Date[]; e: MouseEvent<HTMLDivElement> }) => void;
-  /**
-   * 月份切换发生变化时触发
-   */
-  onMonthChange?: (context: {
-    month: number;
-    date: Date[];
-    partial: DateRangePickerPartial;
-    e?: MouseEvent<HTMLDivElement>;
-    trigger: DatePickerMonthChangeTrigger;
-  }) => void;
-  /**
-   * 点击面板时触发
-   */
-  onPanelClick?: (context: { e: MouseEvent<HTMLDivElement> }) => void;
-  /**
-   * 点击预设按钮后触发
-   */
-  onPresetClick?: (context: { preset: PresetDate; e: MouseEvent<HTMLDivElement> }) => void;
-  /**
-   * 时间切换发生变化时触发
-   */
-  onTimeChange?: (context: {
-    time: string;
-    date: Date[];
-    partial: DateRangePickerPartial;
-    trigger: DatePickerTimeChangeTrigger;
-    e?: MouseEvent<HTMLDivElement>;
-  }) => void;
-  /**
-   * 年份切换发生变化时触发
-   */
-  onYearChange?: (context: {
-    year: number;
-    date: Date[];
-    partial: DateRangePickerPartial;
-    trigger: DatePickerYearChangeTrigger;
-    e?: MouseEvent<HTMLDivElement>;
-  }) => void;
-}
-
-export type DisableDate = Array<DateValue> | DisableDateObj | ((date: DateValue) => boolean);
+export type DisableRangeDate =
+  | Array<DateValue>
+  | DisableDateObj
+  | ((context: { date: DateRangeValue; partial: DateRangePickerPartial }) => boolean);
 
 export interface DisableDateObj {
   from?: string;
@@ -464,32 +190,6 @@ export interface DisableDateObj {
   after?: string;
 }
 
-export interface PresetDate {
-  [name: string]: DateValue | (() => DateValue);
-}
-
-export type DateValue = string | number | Date;
-
-export type DatePickerValueType =
-  | 'time-stamp'
-  | 'Date'
-  | 'YYYY'
-  | 'YYYY-MM'
-  | 'YYYY-MM-DD'
-  | 'YYYY-MM-DD HH'
-  | 'YYYY-MM-DD HH:mm'
-  | 'YYYY-MM-DD HH:mm:ss'
-  | 'YYYY-MM-DD HH:mm:ss:SSS';
-
-export type ValueTypeEnum = DatePickerValueType;
-
-export type DatePickerTriggerSource = 'confirm' | 'pick' | 'enter' | 'preset' | 'clear';
-
-export type DisableRangeDate =
-  | Array<DateValue>
-  | DisableDateObj
-  | ((context: { date: DateRangeValue; partial: DateRangePickerPartial }) => boolean);
-
 export type DateRangePickerPartial = 'start' | 'end';
 
 export interface PresetRange {
@@ -504,9 +204,3 @@ export interface PickContext {
   e: MouseEvent<HTMLDivElement>;
   partial: DateRangePickerPartial;
 }
-
-export type DatePickerMonthChangeTrigger = 'month-select' | 'month-arrow-next' | 'month-arrow-previous' | 'today';
-
-export type DatePickerTimeChangeTrigger = 'time-hour' | 'time-minute' | 'time-second';
-
-export type DatePickerYearChangeTrigger = 'year-select' | 'year-arrow-next' | 'year-arrow-previous' | 'today';