Skip to content

Commit

Permalink
feat(time-picker): 添加自定义quickoption
Browse files Browse the repository at this point in the history
  • Loading branch information
chen_gh committed Sep 6, 2024
1 parent d73e74e commit 86b10f3
Show file tree
Hide file tree
Showing 5 changed files with 160 additions and 21 deletions.
17 changes: 15 additions & 2 deletions src/past-time-picker/PastTimePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ const PastTimePicker = (props: PastTimePickerProps) => {
onRangeSelect,
onCancel,
quickOptionsFilter,
quickOptions,
placeholder,
disabled,
allowClear = false,
Expand All @@ -38,6 +39,7 @@ const PastTimePicker = (props: PastTimePickerProps) => {
earliestApprove = false,
allowReset = false,
defaultTimeRange,
title,
...restProps
} = props;

Expand Down Expand Up @@ -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']

Check failure on line 122 in src/past-time-picker/PastTimePicker.tsx

View workflow job for this annotation

GitHub Actions / integration / Linting 

'quickOptions' is already declared in the upper scope
) => {
if (!time) {
return defaultString;
}

let op;
if ((op = quickOptions?.find((option) => option.value === time))) {

Check failure on line 129 in src/past-time-picker/PastTimePicker.tsx

View workflow job for this annotation

GitHub Actions / integration / Linting 

Unexpected assignment within an 'if' statement
return op.label;
}

if (has(QUICK_MAPPING, time)) {
const [startTime, endTime] = parseQuickDate(time);
const showSinceZero = time === 'earliest' ? earliestInHistoryEcho : `${get(QUICK_MAPPING, time)}`;
Expand Down Expand Up @@ -204,6 +216,7 @@ const PastTimePicker = (props: PastTimePickerProps) => {
quickOptionsFilter={quickOptionsFilter}
NotAvailableToday={NotAvailableToday}
allowReset={allowReset}
quickOptions={quickOptions}
/>
);

Expand All @@ -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}
Expand Down
27 changes: 24 additions & 3 deletions src/past-time-picker/demos/PastTimePicker.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -93,8 +93,29 @@ Modes.args = {
};

export const DisabledDate = () => {
const disabledDate = (current: Date) => differenceInDays(startOfToday(), current) > 31;
return <PastTimePicker onSelect={action('selected value:')} placeholder="时间范围" disabledDate={disabledDate} />;
const disabledDate = (current: Date) => {

Check failure on line 96 in src/past-time-picker/demos/PastTimePicker.stories.tsx

View workflow job for this annotation

GitHub Actions / integration / Linting 

Unexpected block statement surrounding arrow body; move the returned value immediately after the `=>`
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: '历史至今' },
]}
onSelect={console.log}
placeholder="时间范围"
disabledDate={disabledDate}
modes={[TimeMode.Since]}
/>
);
};

export const ShowAbsDate = Template.bind({});
Expand Down
4 changes: 4 additions & 0 deletions src/past-time-picker/interfaces.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,4 +21,8 @@ export interface PastTimePickerProps
allowReset?: boolean;
defaultTimeRange?: string;
earliestApprove?: boolean;
quickOptions?: {
value: string;
label: string;
}[];
}
16 changes: 10 additions & 6 deletions src/static-past-time-picker/StaticPastTimePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<string | undefined>(originMode);
const [currentRange, setCurrentRange] = React.useState(timeRange);
const prefixCls = usePrefixCls('static-past-time-picker');

Expand Down Expand Up @@ -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 },
Expand All @@ -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);

Check failure on line 90 in src/static-past-time-picker/StaticPastTimePicker.tsx

View workflow job for this annotation

GitHub Actions / integration / Linting 

'currentRange' is already declared in the upper scope
const originMode = parseMode(timeRange) ?? 'quick';
const [mode, setMode] = React.useState<string | undefined>(originMode);

const handleOnSelect = (value: string) => {
setCurrentRange(value);
Expand All @@ -102,12 +105,13 @@ function StaticPastTimePicker({
allowReset,
defaultTimeRange,
};

switch (currentMode) {
case 'quick':
return (
<QuickPicker
{...valueProps}
options={quickOptions}
options={options}
optionsFilter={quickOptionsFilter}
NotAvailableToday={NotAvailableToday}
/>
Expand Down
117 changes: 107 additions & 10 deletions src/static-past-time-picker/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
}
Expand Down Expand Up @@ -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) {
Expand Down

0 comments on commit 86b10f3

Please sign in to comment.