fix(time-picker): error fix (#2234)

* fix error * fix lint --------- Co-authored-by: chen_gh <zhengze@startdt.com>
growingio · Sep 9, 2024 · 6f1aa88 · 6f1aa88
1 parent 5d90915
commit 6f1aa88
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 60 deletions.
diff --git a/src/static-past-time-picker/StaticPastTimePicker.tsx b/src/static-past-time-picker/StaticPastTimePicker.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { usePrefixCls, useLocale } from '@gio-design/utils';
 import { filter } from 'lodash';
 import SelectList from '../list';
@@ -31,65 +31,49 @@ function StaticPastTimePicker({
 
   const locale = useLocale('StaticPastTimePicker');
 
-  const {
-    quickPickerText,
-    sinceRangePickerText,
-    relativeRangePickerText,
-    absoluteRangePickerText,
-    todayText,
-    yesterdayText,
-    thisWeekText,
-    lastWeekText,
-    thisMonthText,
-    lastMonthText,
-    thisQuarterText,
-    lastQuarterText,
-    thisYearText,
-    lastYearText,
-    last7DaysText,
-    last14DaysText,
-    last30daysText,
-    last90daysText,
-    last180DaysText,
-    last365DaysText,
-    earliestInHistory,
-  } = {
-    ...defaultLocale,
-    ...locale,
-  };
+  const localLocale = useMemo(
+    () => ({
+      ...defaultLocale,
+      ...locale,
+    }),
+    [locale]
+  );
 
-  const PICKER_OPTIONS: { label: string; value: TimeMode | 'quick' }[] = [
-    { value: 'quick', label: quickPickerText },
-    { value: TimeMode.Since, label: sinceRangePickerText },
-    { value: TimeMode.Relative, label: relativeRangePickerText },
-    { value: TimeMode.Absolute, label: absoluteRangePickerText },
+  const PICKER_OPTIONS: { label: string; value: TimeMode }[] = [
+    { value: TimeMode.Quick, label: localLocale.quickPickerText },
+    { value: TimeMode.Since, label: localLocale.sinceRangePickerText },
+    { value: TimeMode.Relative, label: localLocale.relativeRangePickerText },
+    { value: TimeMode.Absolute, label: localLocale.absoluteRangePickerText },
   ];
 
-  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 },
-    { value: 'week:2,1', label: lastWeekText },
-    { value: experimental ? 'month-lt-today:1,0' : 'month:1,0', label: thisMonthText },
-    { value: 'month:2,1', label: lastMonthText },
-    { value: experimental ? 'quarter-lt-today:1,0' : 'quarter:1,0', label: thisQuarterText },
-    { value: 'quarter:2,1', label: lastQuarterText },
-    { value: experimental ? 'year-lt-today:1,0' : 'year:1,0', label: thisYearText },
-    { value: 'year:2,1', label: lastYearText },
-    { value: 'day:8,1', label: last7DaysText },
-    { value: 'day:15,1', label: last14DaysText },
-    { value: 'day:31,1', label: last30daysText },
-    { value: 'day:91,1', label: last90daysText },
-    { value: 'day:181,1', label: last180DaysText },
-    { value: 'day:366,1', label: last365DaysText },
-  ];
-  const options = quickOptions || localQuickOptions;
+  const localQuickOptions = useMemo(
+    () => [
+      { value: 'day:1,0', label: localLocale.todayText },
+      { value: 'day:2,1', label: localLocale.yesterdayText },
+      { value: experimental ? 'week-lt-today:1,0' : 'week:1,0', label: localLocale.thisWeekText },
+      { value: 'week:2,1', label: localLocale.lastWeekText },
+      { value: experimental ? 'month-lt-today:1,0' : 'month:1,0', label: localLocale.thisMonthText },
+      { value: 'month:2,1', label: localLocale.lastMonthText },
+      { value: experimental ? 'quarter-lt-today:1,0' : 'quarter:1,0', label: localLocale.thisQuarterText },
+      { value: 'quarter:2,1', label: localLocale.lastQuarterText },
+      { value: experimental ? 'year-lt-today:1,0' : 'year:1,0', label: localLocale.thisYearText },
+      { value: 'year:2,1', label: localLocale.lastYearText },
+      { value: 'day:8,1', label: localLocale.last7DaysText },
+      { value: 'day:15,1', label: localLocale.last14DaysText },
+      { value: 'day:31,1', label: localLocale.last30daysText },
+      { value: 'day:91,1', label: localLocale.last90daysText },
+      { value: 'day:181,1', label: localLocale.last180DaysText },
+      { value: 'day:366,1', label: localLocale.last365DaysText },
+    ],
+    [experimental, localLocale]
+  );
+  const options = useMemo(() => quickOptions || localQuickOptions, [quickOptions, localQuickOptions]);
 
-  earliestApprove && options.push({ value: 'earliest', label: earliestInHistory });
+  earliestApprove && options.push({ value: 'earliest', label: localLocale.earliestInHistory });
 
   const parseMode = useCallback((current: string | undefined) => parseTimeMode(current, options), [options]);
-  const originMode = parseMode(timeRange) ?? 'quick';
-  const [mode, setMode] = React.useState<string | undefined>(originMode);
+  const originMode = (parseMode(timeRange) ?? TimeMode.Quick) as TimeMode;
+  const [mode, setMode] = React.useState<TimeMode>(modes?.includes(originMode) ? originMode : TimeMode.Quick);
 
   const handleOnSelect = (value: string) => {
     setCurrentRange(value);
@@ -107,7 +91,7 @@ function StaticPastTimePicker({
     };
 
     switch (currentMode) {
-      case 'quick':
+      case TimeMode.Quick:
         return (
           <QuickPicker
             {...valueProps}
@@ -127,7 +111,7 @@ function StaticPastTimePicker({
   };
 
   React.useEffect(() => {
-    setMode(parseMode(timeRange) ?? 'quick');
+    setMode(parseMode(timeRange) ?? TimeMode.Quick);
   }, [timeRange, parseMode]);
 
   return (
@@ -137,7 +121,7 @@ function StaticPastTimePicker({
           options={filter(PICKER_OPTIONS, (o) => o.value === 'quick' || modes.includes(o.value))}
           value={mode}
           onChange={(value) => {
-            setMode(value as string);
+            setMode(value as TimeMode);
           }}
         />
       </div>

diff --git a/src/static-past-time-picker/interfaces.ts b/src/static-past-time-picker/interfaces.ts
@@ -21,6 +21,7 @@ export enum TimeMode {
   Absolute = 'absolute',
   Since = 'since',
   Relative = 'relative',
+  Quick = 'quick',
 }
 
 interface ExperimentProps {

diff --git a/src/static-past-time-picker/style/QuickPicker.less b/src/static-past-time-picker/style/QuickPicker.less
@@ -6,7 +6,7 @@
 .@{quick-picker-prefix-cls} {
   &__list {
     display: flex;
-    max-height: 300px;
+    max-height: 335px;
     overflow-y: auto;
     .@{list-prefix-cls} {
       display: grid;

diff --git a/src/static-past-time-picker/utils.ts b/src/static-past-time-picker/utils.ts
@@ -18,10 +18,10 @@ export const parseTimeMode = (
     return undefined;
   }
   if (options?.find((option) => option.value === timeRange)) {
-    return 'quick';
+    return TimeMode.Quick;
   }
   if (has(QUICK_MAPPING, timeRange)) {
-    return 'quick';
+    return TimeMode.Quick;
   }
   const items = timeRange.split(':');
   switch (items[0]) {