feat(past-time-picker): 增加“显示绝对事件”特性 (#2136)

Co-authored-by: YanHui <[email protected]>
growingio · Jan 19, 2023 · 49c2732 · 49c2732
1 parent 4b2d930
commit 49c2732
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 5 deletions.
diff --git a/src/past-time-picker/PastTimePicker.tsx b/src/past-time-picker/PastTimePicker.tsx
@@ -11,6 +11,7 @@ import { InputButton } from '../input';
 import { PastTimePickerProps } from './interfaces';
 import StaticPastTimePicker from '../static-past-time-picker';
 import defaultLocale from '../static-past-time-picker/locales/zh-CN';
+import {parseStartAndEndDate, parseQuickDate} from '../static-past-time-picker/utils'
 
 const PastTimePicker = (props: PastTimePickerProps) => {
   const {
@@ -32,6 +33,7 @@ const PastTimePicker = (props: PastTimePickerProps) => {
     size,
     className,
     style,
+    showAbsDate = false,
     ...restProps
   } = props;
 
@@ -110,17 +112,20 @@ const PastTimePicker = (props: PastTimePickerProps) => {
       return defaultString;
     }
     if (has(QUICK_MAPPING, time)) {
-      return get(QUICK_MAPPING, time);
+      const [startTime, endTime] = parseQuickDate(time);
+      return showAbsDate ? `${get(QUICK_MAPPING, time)} | ${parseFnsTimeZone(startTime, 'yyyy/MM/dd')}-${parseFnsTimeZone(endTime, 'yyyy/MM/dd')}` : `${get(QUICK_MAPPING, time)}`;
     }
     const items = time.split(':');
     const times = items[1].split(',').map((str) => parseInt(str, 10));
     if (items[0] === 'since') {
       const start = parseFnsTimeZone(times[0], 'yyyy/MM/dd');
-      return `${FromText} ${start} ${toTodayText}`;
+      const [startTime, endTime] = parseStartAndEndDate(time);
+      return showAbsDate ? `${FromText} ${start} ${toTodayText} ｜ ${parseFnsTimeZone(startTime, 'yyyy/MM/dd')}-${parseFnsTimeZone(endTime, 'yyyy/MM/dd')}` : `${FromText} ${start} ${toTodayText}`;
     }
     if (items[0] === 'since-lt-today') {
       const start = parseFnsTimeZone(times[0], 'yyyy/MM/dd');
-      return `${FromText} ${start} ${toYesterdayText}`;
+      const [startTime, endTime] = parseStartAndEndDate(time);
+      return showAbsDate ? `${FromText} ${start} ${toYesterdayText} ｜ ${parseFnsTimeZone(startTime, 'yyyy/MM/dd')}-${parseFnsTimeZone(endTime, 'yyyy/MM/dd')}` : `${FromText} ${start} ${toYesterdayText}`;
     }
 
     if (items[0] === 'abs') {
@@ -129,10 +134,12 @@ const PastTimePicker = (props: PastTimePickerProps) => {
       return `${FromText} ${start} ${ToText} ${end}`;
     }
     if (items[0] === 'day') {
+      const [startTime, endTime] = parseStartAndEndDate(time);
+
       if (times[1] === 1) {
-        return `${lastText} ${times[0] - times[1]} ${dayText}`;
+        return showAbsDate ? `${lastText} ${times[0] - times[1]} ${dayText} ｜ ${parseFnsTimeZone(startTime, 'yyyy/MM/dd')}-${parseFnsTimeZone(endTime, 'yyyy/MM/dd')}` : `${lastText} ${times[0] - times[1]} ${dayText}`;
       }
-      return `${lastText} ${times[1]}-${times[0]} ${dayText}`;
+      return showAbsDate ? `${lastText} ${times[1]}-${times[0]} ${dayText} ｜ ${parseFnsTimeZone(startTime, 'yyyy/MM/dd')}-${parseFnsTimeZone(endTime, 'yyyy/MM/dd')}` : `${lastText} ${times[1]}-${times[0]} ${dayText}`;
     }
     return defaultString;
   };

diff --git a/src/past-time-picker/demos/PastTimePicker.stories.tsx b/src/past-time-picker/demos/PastTimePicker.stories.tsx
@@ -94,6 +94,11 @@ DisabledDate.args = {
   disabledDate: (current: Date) => differenceInDays(startOfToday(), current) > 31,
 };
 
+export const ShowAbsDate = Template.bind({});
+ShowAbsDate.args = {
+  showAbsDate: true,
+};
+
 const StaticTemplate: Story<PastTimePickerProps> = (args) => (
   <PastTimePicker.Static onSelect={action('selected value:')} placeholder="时间范围" {...args} />
 );

diff --git a/src/past-time-picker/demos/PastTimePickerPage.tsx b/src/past-time-picker/demos/PastTimePickerPage.tsx
@@ -99,6 +99,10 @@ export default function DatePickerPage() {
       <Canvas>
         <Story id="upgraded-pasttimepicker--disabled-date" />
       </Canvas>
+      <Subheading>{formatMessage({ defaultMessage: '显示绝对日期' })}</Subheading>
+      <Canvas>
+        <Story id="upgraded-pasttimepicker--show-abs-date" />
+      </Canvas>
       <Heading>{formatMessage({ defaultMessage: '参数说明' })}</Heading>
       <ArgsTable of={PastTimePicker} />
     </>

diff --git a/src/past-time-picker/interfaces.ts b/src/past-time-picker/interfaces.ts
@@ -16,4 +16,5 @@ export interface PastTimePickerProps
    */
   value?: string;
   'data-testid'?: string;
+  showAbsDate?: boolean;
 }
diff --git a/src/static-past-time-picker/utils.ts b/src/static-past-time-picker/utils.ts
@@ -1,9 +1,12 @@
 import has from 'lodash/has';
 import { sub } from 'date-fns';
 import momentTZ from 'moment-timezone';
+import moment from 'moment';
 import { TimeMode } from './interfaces';
 import { QUICK_MAPPING } from './constant';
 
+momentTZ.tz.setDefault(localStorage.getItem('timezone') || Intl.DateTimeFormat().resolvedOptions().timeZone);
+
 export const parseTimeMode = (timeRange: string | undefined) => {
   if (!timeRange) {
     return undefined;
@@ -58,6 +61,44 @@ export const parseStartAndEndDate = (timeRange: string | undefined): [Date | und
   return [undefined, undefined];
 };
 
+export const parseQuickDate = (timeRange: string | undefined): [Date | undefined, Date | undefined] => {
+  if (!timeRange || timeRange.split(':').length !== 2) {
+    return [undefined, undefined];
+  }
+  const items = timeRange.split(':');
+  const times = items[1].split(',').map((str) => parseInt(str, 10));
+  const today = startOfTodayInTimezone();
+
+  if (items[0] === 'day') {
+    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()];
+  }
+  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()];
+  }
+  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()];
+  }
+  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()];
+  }
+  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()];
+  }
+  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()];
+  }
+  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()];
+  }
+  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 [undefined, undefined];
+}
+
 export const parseFixedMode = (timeRange: string | undefined) => {
   if (!timeRange || timeRange.split(':').length !== 2) {
     return false;

diff --git a/src/utils/timeHelper.ts b/src/utils/timeHelper.ts
@@ -3,6 +3,7 @@ import momentTZ from 'moment-timezone';
 import moment from 'moment';
 import { format as dateFnsFormat, utcToZonedTime } from 'date-fns-tz';
 
+momentTZ.tz.setDefault(localStorage.getItem('timezone') || Intl.DateTimeFormat().resolvedOptions().timeZone);
 // 时间日期转换时区 moment
 export const parseTimeZone = (data?: any, format?: string) =>
 momentTZ(data as string, format).tz(localStorage.getItem('timezone') || Intl.DateTimeFormat().resolvedOptions().timeZone);