From 86b10f3b006ce65f6781942242276313f8385133 Mon Sep 17 00:00:00 2001 From: chen_gh Date: Fri, 6 Sep 2024 17:02:07 +0800 Subject: [PATCH] =?UTF-8?q?feat(time-picker):=20=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89quickoption?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/past-time-picker/PastTimePicker.tsx | 17 ++- .../demos/PastTimePicker.stories.tsx | 27 +++- src/past-time-picker/interfaces.ts | 4 + .../StaticPastTimePicker.tsx | 16 ++- src/static-past-time-picker/utils.ts | 117 ++++++++++++++++-- 5 files changed, 160 insertions(+), 21 deletions(-) diff --git a/src/past-time-picker/PastTimePicker.tsx b/src/past-time-picker/PastTimePicker.tsx index f48f2ee014..f93dd559be 100644 --- a/src/past-time-picker/PastTimePicker.tsx +++ b/src/past-time-picker/PastTimePicker.tsx @@ -25,6 +25,7 @@ const PastTimePicker = (props: PastTimePickerProps) => { onRangeSelect, onCancel, quickOptionsFilter, + quickOptions, placeholder, disabled, allowClear = false, @@ -38,6 +39,7 @@ const PastTimePicker = (props: PastTimePickerProps) => { earliestApprove = false, allowReset = false, defaultTimeRange, + title, ...restProps } = props; @@ -114,10 +116,20 @@ const PastTimePicker = (props: PastTimePickerProps) => { 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 @@ const PastTimePicker = (props: PastTimePickerProps) => { quickOptionsFilter={quickOptionsFilter} NotAvailableToday={NotAvailableToday} allowReset={allowReset} + quickOptions={quickOptions} /> ); @@ -215,7 +228,7 @@ const PastTimePicker = (props: PastTimePickerProps) => { placeholder={placeholder} disabled={disabled} allowClear={allowClear} - value={timeRange && humanizeTimeRange(timeRange)} + value={title || (timeRange && humanizeTimeRange(timeRange, undefined, quickOptions))} size={size} active={controlledVisible} suffix={suffix} diff --git a/src/past-time-picker/demos/PastTimePicker.stories.tsx b/src/past-time-picker/demos/PastTimePicker.stories.tsx index 3a4df9840e..d6c27ac336 100644 --- a/src/past-time-picker/demos/PastTimePicker.stories.tsx +++ b/src/past-time-picker/demos/PastTimePicker.stories.tsx @@ -3,7 +3,7 @@ import { Meta, Story } from '@storybook/react/types-6-0'; 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,29 @@ Modes.args = { }; export const DisabledDate = () => { - const disabledDate = (current: Date) => differenceInDays(startOfToday(), current) > 31; - return ; + const disabledDate = (current: Date) => { + return differenceInDays(startOfToday(), current) > 7; + }; + + return ( + + ); }; export const ShowAbsDate = Template.bind({}); diff --git a/src/past-time-picker/interfaces.ts b/src/past-time-picker/interfaces.ts index 219a4ed3cf..1f9bd10863 100644 --- a/src/past-time-picker/interfaces.ts +++ b/src/past-time-picker/interfaces.ts @@ -21,4 +21,8 @@ export interface PastTimePickerProps allowReset?: boolean; defaultTimeRange?: string; earliestApprove?: boolean; + quickOptions?: { + value: string; + label: string; + }[]; } diff --git a/src/static-past-time-picker/StaticPastTimePicker.tsx b/src/static-past-time-picker/StaticPastTimePicker.tsx index cda54ac77e..29e4e7975c 100644 --- a/src/static-past-time-picker/StaticPastTimePicker.tsx +++ b/src/static-past-time-picker/StaticPastTimePicker.tsx @@ -23,11 +23,9 @@ function StaticPastTimePicker({ allowReset, defaultTimeRange, earliestApprove, + quickOptions, ...rest }: StaticPastTimePickerProps) { - const parseMode = (currentRange: string | undefined) => parseTimeMode(currentRange); - const originMode = parseMode(timeRange) ?? 'quick'; - const [mode, setMode] = React.useState(originMode); const [currentRange, setCurrentRange] = React.useState(timeRange); const prefixCls = usePrefixCls('static-past-time-picker'); @@ -67,7 +65,7 @@ function StaticPastTimePicker({ { 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 @@ function StaticPastTimePicker({ { 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(originMode); const handleOnSelect = (value: string) => { setCurrentRange(value); @@ -102,12 +105,13 @@ function StaticPastTimePicker({ allowReset, defaultTimeRange, }; + switch (currentMode) { case 'quick': return ( diff --git a/src/static-past-time-picker/utils.ts b/src/static-past-time-picker/utils.ts index 7a3d7b4af8..6b3daaad16 100644 --- a/src/static-past-time-picker/utils.ts +++ b/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) {