fix(TimeRangePicker): 支持重置 (#2160)

* fix(TimeRangePicker): 支持重置 * fix: 修改build问题
growingio · Jun 19, 2023 · 5248e95 · 5248e95 · vercel · Jun 19, 2023
1 parent 06ef233
commit 5248e95
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 5 deletions.
diff --git a/src/past-time-picker/PastTimePicker.tsx b/src/past-time-picker/PastTimePicker.tsx
@@ -35,6 +35,7 @@ const PastTimePicker = (props: PastTimePickerProps) => {
     style,
     showAbsDate = false,
     NotAvailableToday = false,
+    allowReset = false,
     ...restProps
   } = props;
 
@@ -194,6 +195,7 @@ const PastTimePicker = (props: PastTimePickerProps) => {
       onCancel={handleOnCancel}
       quickOptionsFilter={quickOptionsFilter}
       NotAvailableToday={NotAvailableToday}
+      allowReset={allowReset}
     />
   );
 

diff --git a/src/past-time-picker/interfaces.ts b/src/past-time-picker/interfaces.ts
@@ -18,4 +18,5 @@ export interface PastTimePickerProps
   'data-testid'?: string;
   showAbsDate?: boolean;
   NotAvailableToday?: boolean;
+  allowReset?: boolean;
 }
diff --git a/src/static-past-time-picker/AbsoluteRangePicker.tsx b/src/static-past-time-picker/AbsoluteRangePicker.tsx
@@ -8,7 +8,15 @@ import { RangePickerProps } from './interfaces';
 import { parseStartAndEndDate } from './utils';
 import defaultLocale from './locales/zh-CN';
 
-function AbsoluteRangePicker({ disabledDate, timeRange, onSelect, onRangeSelect, onCancel }: RangePickerProps) {
+function AbsoluteRangePicker({
+  disabledDate,
+  timeRange,
+  onSelect,
+  onRangeSelect,
+  onCancel,
+  defaultTimeRange,
+  allowReset,
+}: RangePickerProps) {
   const [dates, setDates] = React.useState<[Date | undefined, Date | undefined]>(parseStartAndEndDate(timeRange));
   const prefixCls = usePrefixCls('range-panel__header');
 
@@ -30,6 +38,9 @@ function AbsoluteRangePicker({ disabledDate, timeRange, onSelect, onRangeSelect,
   const handleOnOK = () => {
     onSelect(`abs:${getTime(dates[0] as Date)},${getTime(dates[1] as Date) + 86399999}`);
   };
+  const onReset = () => {
+    onSelect(defaultTimeRange || '');
+  };
   const handleOnSelect = (date: [Date, Date], index: number) => {
     setDates(date);
     onRangeSelect?.(date, index);
@@ -49,6 +60,8 @@ function AbsoluteRangePicker({ disabledDate, timeRange, onSelect, onRangeSelect,
       }
       onCancel={onCancel}
       onOK={handleOnOK}
+      onReset={onReset}
+      allowReset={allowReset}
     />
   );
 }

diff --git a/src/static-past-time-picker/InnerRangePanel.tsx b/src/static-past-time-picker/InnerRangePanel.tsx
@@ -5,13 +5,22 @@ import Button from '../button';
 import defaultLocale from './locales/zh-CN';
 import { InnerRangePanelProps } from './interfaces';
 
-function InnerRangePanel({ disableOK, header, body, onOK, onCancel, ...rest }: InnerRangePanelProps) {
+function InnerRangePanel({
+  disableOK,
+  header,
+  body,
+  onOK,
+  onCancel,
+  onReset,
+  allowReset,
+  ...rest
+}: InnerRangePanelProps) {
   const prefixCls = usePrefixCls('range-panel');
   const cls = classnames(prefixCls);
 
   const locale = useLocale('StaticPastTimePicker');
 
-  const { okText, closeText } = {
+  const { okText, closeText, resetText } = {
     ...defaultLocale,
     ...locale,
   };
@@ -22,6 +31,11 @@ function InnerRangePanel({ disableOK, header, body, onOK, onCancel, ...rest }: I
       <div className={`${prefixCls}__divider`} />
       <div className={`${prefixCls}__body`}>{body}</div>
       <div className={`${prefixCls}__footer`}>
+        {allowReset && (
+          <Button onClick={onReset} type="secondary" size="small">
+            {resetText}
+          </Button>
+        )}
         <Button onClick={onCancel} type="secondary" size="small">
           {closeText}
         </Button>

diff --git a/src/static-past-time-picker/RelativeRangePicker.tsx b/src/static-past-time-picker/RelativeRangePicker.tsx
@@ -7,7 +7,15 @@ import InnerRangePanel from './InnerRangePanel';
 import { RangePickerProps } from './interfaces';
 import { startOfTodayInTimezone, parseStartAndEndDate } from './utils';
 
-function RelativeRangePicker({ disabledDate, timeRange, onSelect, onCancel, ...rest }: RangePickerProps) {
+function RelativeRangePicker({
+  disabledDate,
+  timeRange,
+  defaultTimeRange,
+  onSelect,
+  onCancel,
+  allowReset,
+  ...rest
+}: RangePickerProps) {
   const defaultDates = parseStartAndEndDate(timeRange ?? 'day:2,1');
   const [dates, setDates] = React.useState<[Date, Date]>(defaultDates as [Date, Date]);
   const [endDateHidden, setEndDateHidden] = React.useState<boolean>(isYesterday(dates[1]));
@@ -22,6 +30,10 @@ function RelativeRangePicker({ disabledDate, timeRange, onSelect, onCancel, ...r
       )}`
     );
   };
+
+  const onReset = () => {
+    onSelect(defaultTimeRange || '');
+  };
   return (
     <InnerRangePanel
       data-testid="relative-range-picker"
@@ -44,6 +56,8 @@ function RelativeRangePicker({ disabledDate, timeRange, onSelect, onCancel, ...r
       }
       onCancel={onCancel}
       onOK={handleOnOK}
+      onReset={onReset}
+      allowReset={allowReset}
       {...rest}
     />
   );

diff --git a/src/static-past-time-picker/SinceRangePicker.tsx b/src/static-past-time-picker/SinceRangePicker.tsx
@@ -17,6 +17,8 @@ function SinceRangePicker({
   onCancel,
   experimental,
   NotAvailableToday,
+  defaultTimeRange,
+  allowReset,
   ...rest
 }: RangePickerProps) {
   const endDateKeys = [!NotAvailableToday ? 'today' : undefined, experimental ? 'yesterday' : undefined];
@@ -70,13 +72,18 @@ function SinceRangePicker({
   const handleOnOK = () => {
     onSelect(`${endKey === 'yesterday' ? 'since-lt-today' : 'since'}:${getTime(startDate as Date)}`);
   };
+  const onReset = () => {
+    onSelect(defaultTimeRange || '');
+  };
   return (
     <InnerRangePanel
       disableOK={!isValid(startDate)}
       header={renderHeader()}
       body={<DatePicker disabledDate={handleDisabledDate} value={startDate} onSelect={setStartDate} />}
       onCancel={onCancel}
       onOK={handleOnOK}
+      onReset={onReset}
+      allowReset={allowReset}
       {...rest}
     />
   );

diff --git a/src/static-past-time-picker/StaticPastTimePicker.tsx b/src/static-past-time-picker/StaticPastTimePicker.tsx
@@ -20,6 +20,7 @@ function StaticPastTimePicker({
   quickOptionsFilter,
   onRangeSelect,
   NotAvailableToday,
+  allowReset,
   ...rest
 }: StaticPastTimePickerProps) {
   const parseMode = (currentRange: string | undefined) => parseTimeMode(currentRange);
@@ -93,6 +94,7 @@ function StaticPastTimePicker({
       timeRange: currentMode === originMode ? currentRange : undefined,
       onSelect: handleOnSelect,
       onCancel,
+      allowReset,
     };
     switch (currentMode) {
       case 'quick':
@@ -105,7 +107,7 @@ function StaticPastTimePicker({
           />
         );
       case TimeMode.Since:
-        return <SinceRangePicker {...valueProps}  NotAvailableToday={NotAvailableToday}/>;
+        return <SinceRangePicker {...valueProps} NotAvailableToday={NotAvailableToday} />;
       case TimeMode.Relative:
         return <RelativeRangePicker {...valueProps} />;
       case TimeMode.Absolute:

diff --git a/src/static-past-time-picker/interfaces.ts b/src/static-past-time-picker/interfaces.ts
@@ -35,11 +35,16 @@ interface PickerProps extends ExperimentProps, Pick<StaticDatePickerProps, 'disa
    * 时间范围
    */
   timeRange?: string;
+  /**
+   * 默认的时间范围，如果重置时，将时间切换为默认时间
+   */
+  defaultTimeRange?: string;
   /**
    * 选择完后的回调，参数为选中项的 timeRange 值
    */
   onSelect: (timeRange: string) => void;
   onRangeSelect?: (dates: [Date, Date], index: number) => void;
+  allowReset: boolean;
 }
 
 export interface StaticPastTimePickerProps extends Omit<PickerProps, 'onSelect'> {
@@ -95,6 +100,8 @@ export interface InnerRangePanelProps {
    * 点击取消按钮时回调
    */
   onCancel?: () => void;
+  onReset: () => void;
+  allowReset: boolean;
 }
 
 interface RangePickerInnerProps {

diff --git a/src/static-past-time-picker/locales/en-US.ts b/src/static-past-time-picker/locales/en-US.ts
@@ -3,6 +3,7 @@ import { Key } from 'react';
 export default {
   okText: 'OK',
   closeText: 'Cancel',
+  resetText: 'Reset',
   quickPickerText: 'Custom ',
   sinceRangePickerText: 'Since',
   relativeRangePickerText: 'Relative Past Date Range',

diff --git a/src/static-past-time-picker/locales/zh-CN.ts b/src/static-past-time-picker/locales/zh-CN.ts
@@ -3,6 +3,7 @@ import { Key } from 'react';
 export default {
   okText: '确定',
   closeText: '取消',
+  resetText: '重置',
   quickPickerText: '常用时间',
   sinceRangePickerText: '自某天以后',
   relativeRangePickerText: '过去动态时段',