feat(time-picker): 添加自定义quick option

src/past-time-picker/PastTimePicker.tsx

@@ -25,6 +25,7 @@
     onRangeSelect,
     onCancel,
     quickOptionsFilter,
+    quickOptions,
     placeholder,
     disabled,
     allowClear = false,
@@ -38,6 +39,7 @@
     earliestApprove = false,
     allowReset = false,
     defaultTimeRange,
+    title,
     ...restProps
   } = props;
 
@@ -114,10 +116,20 @@
     earliest: earliestInHistory,
   };
 
-  const humanizeTimeRange = (time: string, defaultString = timeRangeText) => {
+  const humanizeTimeRange = (
+    time: string,
+    defaultString = timeRangeText,
+    quickOptions: PastTimePickerProps['quickOptions']
+  ) => {
     if (!time) {
       return defaultString;
     }
+
+    let op;
+    if ((op = quickOptions?.find((option) => option.value === time))) {
+      return op.label;
+    }
+
     if (has(QUICK_MAPPING, time)) {
       const [startTime, endTime] = parseQuickDate(time);
       const showSinceZero = time === 'earliest' ? earliestInHistoryEcho : `${get(QUICK_MAPPING, time)}`;
@@ -204,6 +216,7 @@
       quickOptionsFilter={quickOptionsFilter}
       NotAvailableToday={NotAvailableToday}
       allowReset={allowReset}
+      quickOptions={quickOptions}
     />
   );
 
@@ -215,7 +228,7 @@
         placeholder={placeholder}
         disabled={disabled}
         allowClear={allowClear}
-        value={timeRange && humanizeTimeRange(timeRange)}
+        value={title || (timeRange && humanizeTimeRange(timeRange, undefined, quickOptions))}
         size={size}
         active={controlledVisible}
         suffix={suffix}

src/past-time-picker/demos/PastTimePicker.stories.tsx

@@ -3,7 +3,7 @@
 import { action } from '@storybook/addon-actions';
 import { differenceInDays, getTime, startOfToday, subDays, subMonths } from 'date-fns';
 import Docs from './PastTimePickerPage';
-import { Option } from '../../static-past-time-picker/interfaces';
+import { Option, TimeMode } from '../../static-past-time-picker/interfaces';
 import PastTimePicker, { PastTimePickerProps } from '../index';
 
 import '../style';
@@ -93,8 +93,45 @@
 };
 
 export const DisabledDate = () => {
-  const disabledDate = (current: Date) => differenceInDays(startOfToday(), current) > 31;
-  return <PastTimePicker onSelect={action('selected value:')} placeholder="时间范围" disabledDate={disabledDate} />;
+  const disabledDate = (current: Date) => {
+    return differenceInDays(startOfToday(), current) > 7;
+  };
+
+  return (
+    <PastTimePicker
+      quickOptions={[
+        { value: 'day:1,0', label: '今天内' },
+        { value: 'day:2,0', label: '1天前至今' },
+        { value: 'day:3,0', label: '2天前至今' },
+        { value: 'day:4,0', label: '3天前至今' },
+        { value: 'day:5,0', label: '4天前至今' },
+        { value: 'day:6,0', label: '5天前至今' },
+        { value: 'day:7,0', label: '6天前至今' },
+        { value: 'day:8,0', label: '7天前至今' },
+        { value: 'earliest', label: '历史至今' },
+        { value: 'day:2,0', label: '1天前至今' },
+        { value: 'day:3,0', label: '2天前至今' },
+        { value: 'day:4,0', label: '3天前至今' },
+        { value: 'day:5,0', label: '4天前至今' },
+        { value: 'day:6,0', label: '5天前至今' },
+        { value: 'day:7,0', label: '6天前至今' },
+        { value: 'day:8,0', label: '7天前至今' },
+        { value: 'earliest', label: '历史至今' },
+        { value: 'day:2,0', label: '1天前至今' },
+        { value: 'day:3,0', label: '2天前至今' },
+        { value: 'day:4,0', label: '3天前至今' },
+        { value: 'day:5,0', label: '4天前至今' },
+        { value: 'day:6,0', label: '5天前至今' },
+        { value: 'day:7,0', label: '6天前至今' },
+        { value: 'day:8,0', label: '7天前至今' },
+        { value: 'earliest', label: '历史至今' },
+      ]}
+      onSelect={console.log}
+      placeholder="时间范围"
+      disabledDate={disabledDate}
+      modes={[TimeMode.Since]}
+    />
+  );
 };
 
 export const ShowAbsDate = Template.bind({});

src/past-time-picker/interfaces.ts

@@ -21,4 +21,8 @@ export interface PastTimePickerProps
   allowReset?: boolean;
   defaultTimeRange?: string;
   earliestApprove?: boolean;
+  quickOptions?: {
+    value: string;
+    label: string;
+  }[];
 }

src/static-past-time-picker/StaticPastTimePicker.tsx

@@ -23,11 +23,9 @@
   allowReset,
   defaultTimeRange,
   earliestApprove,
+  quickOptions,
   ...rest
 }: StaticPastTimePickerProps) {
-  const parseMode = (currentRange: string | undefined) => parseTimeMode(currentRange);
-  const originMode = parseMode(timeRange) ?? 'quick';
-  const [mode, setMode] = React.useState<string | undefined>(originMode);
   const [currentRange, setCurrentRange] = React.useState(timeRange);
   const prefixCls = usePrefixCls('static-past-time-picker');
 
@@ -67,7 +65,7 @@
     { value: TimeMode.Absolute, label: absoluteRangePickerText },
   ];
 
-  const quickOptions = [
+  const localQuickOptions = [
     { value: 'day:1,0', label: todayText },
     { value: 'day:2,1', label: yesterdayText },
     { value: experimental ? 'week-lt-today:1,0' : 'week:1,0', label: thisWeekText },
@@ -85,8 +83,13 @@
     { value: 'day:181,1', label: last180DaysText },
     { value: 'day:366,1', label: last365DaysText },
   ];
+  const options = quickOptions || localQuickOptions;
+
+  earliestApprove && options.push({ value: 'earliest', label: earliestInHistory });
 
-  earliestApprove && quickOptions.push({ value: 'earliest', label: earliestInHistory });
+  const parseMode = (currentRange: string | undefined) => parseTimeMode(currentRange, options);
+  const originMode = parseMode(timeRange) ?? 'quick';
+  const [mode, setMode] = React.useState<string | undefined>(originMode);
 
   const handleOnSelect = (value: string) => {
     setCurrentRange(value);
@@ -102,12 +105,13 @@
       allowReset,
       defaultTimeRange,
     };
+
     switch (currentMode) {
       case 'quick':
         return (
           <QuickPicker
             {...valueProps}
-            options={quickOptions}
+            options={options}
             optionsFilter={quickOptionsFilter}
             NotAvailableToday={NotAvailableToday}
           />
@@ -124,7 +128,7 @@
 
   React.useEffect(() => {
     setMode(parseMode(timeRange) ?? 'quick');
   }, [timeRange]);
 
   return (
     <div data-testid="static-past-time-picker" className={prefixCls} {...rest}>

src/static-past-time-picker/interfaces.ts

@@ -67,6 +67,7 @@ export interface StaticPastTimePickerProps extends Omit<PickerProps, 'onSelect'>
   onRangeSelect?: (dates: [Date, Date], index: number) => void;
   NotAvailableToday: boolean;
   earliestApprove: boolean;
+  quickOptions: { value: string; label: string }[];
 }
 
 export interface RangePickerProps extends PickerProps {

src/static-past-time-picker/style/QuickPicker.less

@@ -6,6 +6,8 @@
 .@{quick-picker-prefix-cls} {
   &__list {
     display: flex;
+    max-height: 300px;
+    overflow-y: auto;
     .@{list-prefix-cls} {
       display: grid;
       grid-auto-rows: 36px;

src/static-past-time-picker/utils.ts

@@ -7,10 +7,19 @@ import { QUICK_MAPPING } from './constant';
 
 momentTZ.tz.setDefault(localStorage.getItem('timezone') || Intl.DateTimeFormat().resolvedOptions().timeZone);
 
-export const parseTimeMode = (timeRange: string | undefined) => {
+export const parseTimeMode = (
+  timeRange: string | undefined,
+  options: {
+    value: string;
+    label: string;
+  }[]
+) => {
   if (!timeRange) {
     return undefined;
   }
+  if (options?.find((option) => option.value === timeRange)) {
+    return 'quick';
+  }
   if (has(QUICK_MAPPING, timeRange)) {
     return 'quick';
   }
@@ -78,31 +87,119 @@ export const parseQuickDate = (timeRange: string | undefined): [Date | undefined
     return [sub(today, { days: times[0] - 1 }), sub(today, { days: times[1] })];
   }
   if (items[0] === 'week-lt-today') {
-    return [moment().subtract(times[0] - 1, 'week').startOf('isoWeek').toDate(), String(times[1]) === '0' ? moment().subtract(1, 'day').endOf('day').toDate() : moment().subtract(times[0] - 1, 'week').endOf('isoWeek').toDate()];
+    return [
+      moment()
+        .subtract(times[0] - 1, 'week')
+        .startOf('isoWeek')
+        .toDate(),
+      String(times[1]) === '0'
+        ? moment().subtract(1, 'day').endOf('day').toDate()
+        : moment()
+            .subtract(times[0] - 1, 'week')
+            .endOf('isoWeek')
+            .toDate(),
+    ];
   }
   if (items[0] === 'month-lt-today') {
-    return [moment().subtract(times[0] - 1, 'month').startOf('month').toDate(), String(times[1]) === '0' ? moment().subtract(1, 'day').endOf('day').toDate() : moment().subtract(times[0] - 1, 'month').endOf('month').toDate()];
+    return [
+      moment()
+        .subtract(times[0] - 1, 'month')
+        .startOf('month')
+        .toDate(),
+      String(times[1]) === '0'
+        ? moment().subtract(1, 'day').endOf('day').toDate()
+        : moment()
+            .subtract(times[0] - 1, 'month')
+            .endOf('month')
+            .toDate(),
+    ];
   }
   if (items[0] === 'quarter-lt-today') {
-    return [moment().subtract(times[0] - 1, 'quarter').startOf('quarter').toDate(), String(times[1]) === '0' ? moment().subtract(1, 'day').endOf('day').toDate() : moment().subtract(times[0] - 1, 'quarter').endOf('quarter').toDate()];
+    return [
+      moment()
+        .subtract(times[0] - 1, 'quarter')
+        .startOf('quarter')
+        .toDate(),
+      String(times[1]) === '0'
+        ? moment().subtract(1, 'day').endOf('day').toDate()
+        : moment()
+            .subtract(times[0] - 1, 'quarter')
+            .endOf('quarter')
+            .toDate(),
+    ];
   }
   if (items[0] === 'year-lt-today') {
-    return [moment().subtract(times[0] - 1, 'year').startOf('year').toDate(), String(times[1]) === '0' ? moment().subtract(1, 'day').endOf('day').toDate() : moment().subtract(times[0] - 1, 'year').endOf('year').toDate()];
+    return [
+      moment()
+        .subtract(times[0] - 1, 'year')
+        .startOf('year')
+        .toDate(),
+      String(times[1]) === '0'
+        ? moment().subtract(1, 'day').endOf('day').toDate()
+        : moment()
+            .subtract(times[0] - 1, 'year')
+            .endOf('year')
+            .toDate(),
+    ];
   }
   if (items[0] === 'week') {
-    return [moment().subtract(times[0] - 1, 'week').startOf('isoWeek').toDate(), String(times[1]) === '0' ? moment().endOf('day').toDate() : moment().subtract(times[0] - 1, 'week').endOf('isoWeek').toDate()];
+    return [
+      moment()
+        .subtract(times[0] - 1, 'week')
+        .startOf('isoWeek')
+        .toDate(),
+      String(times[1]) === '0'
+        ? moment().endOf('day').toDate()
+        : moment()
+            .subtract(times[0] - 1, 'week')
+            .endOf('isoWeek')
+            .toDate(),
+    ];
   }
   if (items[0] === 'month') {
-    return [moment().subtract(times[0] - 1, 'month').startOf('month').toDate(), String(times[1]) === '0' ? moment().endOf('day').toDate() : moment().subtract(times[0] - 1, 'month').endOf('month').toDate()];
+    return [
+      moment()
+        .subtract(times[0] - 1, 'month')
+        .startOf('month')
+        .toDate(),
+      String(times[1]) === '0'
+        ? moment().endOf('day').toDate()
+        : moment()
+            .subtract(times[0] - 1, 'month')
+            .endOf('month')
+            .toDate(),
+    ];
   }
   if (items[0] === 'quarter') {
-    return [moment().subtract(times[0] - 1, 'quarter').startOf('quarter').toDate(), String(times[1]) === '0' ? moment().endOf('day').toDate() : moment().subtract(times[0] - 1, 'quarter').endOf('quarter').toDate()];
+    return [
+      moment()
+        .subtract(times[0] - 1, 'quarter')
+        .startOf('quarter')
+        .toDate(),
+      String(times[1]) === '0'
+        ? moment().endOf('day').toDate()
+        : moment()
+            .subtract(times[0] - 1, 'quarter')
+            .endOf('quarter')
+            .toDate(),
+    ];
   }
   if (items[0] === 'year') {
-    return [moment().subtract(times[0] - 1, 'year').startOf('year').toDate(), String(times[1]) === '0' ? moment().endOf('day').toDate() : moment().subtract(times[0] - 1, 'year').endOf('year').toDate()];
+    return [
+      moment()
+        .subtract(times[0] - 1, 'year')
+        .startOf('year')
+        .toDate(),
+      String(times[1]) === '0'
+        ? moment().endOf('day').toDate()
+        : moment()
+            .subtract(times[0] - 1, 'year')
+            .endOf('year')
+            .toDate(),
+    ];
   }
   return [undefined, undefined];
-}
+};
 
 export const parseFixedMode = (timeRange: string | undefined) => {
   if (!timeRange || timeRange.split(':').length !== 2) {