feat(past-time-picker): 增加“显示绝对时间”特性 (#2138)

* feat(past-time-picker): 增加“显示绝对事件”特性 Co-authored-by: YanHui <[email protected]>
growingio · Jan 20, 2023 · d86917e · d86917e
1 parent 97aa344
commit d86917e
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 11 deletions.
diff --git a/src/date-picker/Picker.tsx b/src/date-picker/Picker.tsx
@@ -48,7 +48,7 @@ export const DatePicker: React.FC<DatePickerProps> = (props: DatePickerProps) =>
   const handleOnSelect = (currentValue: Date) => {
     setControlledValue(currentValue);
     setVisible(false);
-    onSelect?.(currentValue, formatDate(currentValue));
+    onSelect?.(currentValue, formatDate(currentValue) as string);
   };
 
   const content = <StaticDatePicker onSelect={handleOnSelect} disabledDate={disabledDate} value={controlledValue} />;
@@ -63,7 +63,7 @@ export const DatePicker: React.FC<DatePickerProps> = (props: DatePickerProps) =>
         placeholder={placeholder}
         disabled={disabled}
         allowClear={allowClear}
-        value={controlledValue && formatDate(controlledValue)}
+        value={controlledValue && (formatDate(controlledValue) as string)}
         size={size}
         suffix={suffix}
         className={className}

diff --git a/src/past-time-picker/PastTimePicker.tsx b/src/past-time-picker/PastTimePicker.tsx
@@ -11,7 +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'
+import { parseStartAndEndDate, parseQuickDate } from '../static-past-time-picker/utils';
 
 const PastTimePicker = (props: PastTimePickerProps) => {
   const {
@@ -113,19 +113,34 @@ const PastTimePicker = (props: PastTimePickerProps) => {
     }
     if (has(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)}`;
+      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');
       const [startTime, endTime] = parseStartAndEndDate(time);
-      return showAbsDate ? `${FromText} ${start} ${toTodayText} ｜ ${parseFnsTimeZone(startTime, 'yyyy/MM/dd')}-${parseFnsTimeZone(endTime, 'yyyy/MM/dd')}` : `${FromText} ${start} ${toTodayText}`;
+      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');
       const [startTime, endTime] = parseStartAndEndDate(time);
-      return showAbsDate ? `${FromText} ${start} ${toYesterdayText} ｜ ${parseFnsTimeZone(startTime, 'yyyy/MM/dd')}-${parseFnsTimeZone(endTime, 'yyyy/MM/dd')}` : `${FromText} ${start} ${toYesterdayText}`;
+      return showAbsDate
+        ? `${FromText} ${start} ${toYesterdayText} ｜ ${parseFnsTimeZone(startTime, 'yyyy/MM/dd')}-${parseFnsTimeZone(
+            endTime,
+            'yyyy/MM/dd'
+          )}`
+        : `${FromText} ${start} ${toYesterdayText}`;
     }
 
     if (items[0] === 'abs') {
@@ -137,9 +152,19 @@ const PastTimePicker = (props: PastTimePickerProps) => {
       const [startTime, endTime] = parseStartAndEndDate(time);
 
       if (times[1] === 1) {
-        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 showAbsDate
+          ? `${lastText} ${times[0] - times[1]} ${dayText} ｜ ${parseFnsTimeZone(
+              startTime,
+              'yyyy/MM/dd'
+            )}-${parseFnsTimeZone(endTime, 'yyyy/MM/dd')}`
+          : `${lastText} ${times[0] - times[1]} ${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 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
@@ -99,6 +99,11 @@ ShowAbsDate.args = {
   showAbsDate: true,
 };
 
+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/time-picker/TimePicker.tsx b/src/time-picker/TimePicker.tsx
@@ -54,7 +54,7 @@ export const TimePicker: React.FC<TimePickerProps> = (props: TimePickerProps) =>
   const handleOnOk = () => {
     setControlledValue(time);
     setVisible(false);
-    onSelect?.(time as Date, formatTime(time as Date));
+    onSelect?.(time as Date, formatTime(time as Date) as string);
   };
 
   const handleVisibleChange = (current: boolean) => {
@@ -100,7 +100,7 @@ export const TimePicker: React.FC<TimePickerProps> = (props: TimePickerProps) =>
         prefix={prefix || <StopWatchOutlined />}
         disabled={disabled}
         allowClear={allowClear}
-        value={time && formatTime(time)}
+        value={time && (formatTime(time) as string)}
         placeholder={placeholder ?? timeSelect}
         size={size}
         suffix={suffix}

diff --git a/src/utils/timeHelper.ts b/src/utils/timeHelper.ts
@@ -9,7 +9,8 @@ export const parseTimeZone = (data?: any, format?: string) =>
 momentTZ(data as string, format).tz(localStorage.getItem('timezone') || Intl.DateTimeFormat().resolvedOptions().timeZone);
 
 // 时间日期转换时区 date-fns
-export const parseFnsTimeZone = (date: number | Date | string, format: string) => {
+export const parseFnsTimeZone = (date: number | Date | string | undefined, format: string) => {
+  if (!date) return date;
   let finalDate = date;
   if (isNumber(date)) {
     finalDate = new Date(date);