fix(pasttimepicker): add internationallization and fix value echo (#1748

)

Signed-off-by: zhujiahong <zhujiahong@growingio.com>

Co-authored-by: zhujiahong <zhujiahong@growingio.com>

src/static-past-time-picker/QuickPicker.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { usePrefixCls, useLocale } from '@gio-design/utils';
 import Checkbox from '../checkbox/Checkbox';
 import Button from '../button/Button';
@@ -13,6 +13,12 @@ function QuickPicker({ options, optionsFilter, onSelect, timeRange, experimental
   const prefixCls = usePrefixCls('quick-picker');
   const localeText: typeof defaultLocaleText = useLocale('StaticPastTimePicker') || defaultLocaleText;
 
+  const locale = useLocale('StaticPastTimePicker');
+
+  const { okText, closeText, includeToday } = {
+    ...localeText,
+    ...locale,
+  };
   const filter = (currentOptions: Option[]) => {
     if (optionsFilter) {
       // # Option  !== OptionProps#
@@ -26,7 +32,6 @@ function QuickPicker({ options, optionsFilter, onSelect, timeRange, experimental
     left = [...left, ...experimentalQuickOptions(localeText)[0]];
     right = [...right, ...experimentalQuickOptions(localeText)[1]];
   }
-
   const handleOnSelect = (selectedValue: string) => {
     setCurrentValue(selectedValue);
   };
@@ -43,6 +48,13 @@ function QuickPicker({ options, optionsFilter, onSelect, timeRange, experimental
     onSelect(timeRange as string);
   };
 
+  useEffect(() => {
+    if (experimental && ['year:1,0', 'quarter:1,0', 'month:1,0', 'week:1,0'].includes(currentValue as string)) {
+      setCurrentValue(`${currentValue && currentValue.split(':')[0]}-lt-today:1,0` as string);
+      setToToday(true);
+    }
+  }, [currentValue, experimental, toToday]);
+
   return (
     <div data-testid="quick-picker" className={prefixCls} {...rest}>
       <div className={`${prefixCls}__list`}>
@@ -62,15 +74,15 @@ function QuickPicker({ options, optionsFilter, onSelect, timeRange, experimental
             'week:1,0',
           ].includes(currentValue as string) && (
             <Checkbox checked={toToday} onChange={handleOnTodayCheck}>
-              至今日
+              {includeToday}
             </Checkbox>
           )}
         <div className={`${prefixCls}__bottom__button-group`}>
           <Button type="secondary" size="small" onClick={handleCancel}>
-            取消
+            {closeText}
           </Button>
           <Button type="primary" size="small" onClick={handleOk}>
-            确定
+            {okText}
           </Button>
         </div>
       </div>

src/static-past-time-picker/RelativeRangeHeader.tsx

@@ -67,9 +67,10 @@ function RelativeRangeHeader({ dateRange, onRangeChange, onModeChange }: Relativ
   const renderRange = () => (
     <>
       <span className={`${basePrefixCls}__text`}>{lastText}</span>
-      <span className={`${basePrefixCls}__input-number`} data-testid="end-days">
+      <span data-testid="end-days">
         <Input.InputNumber
           min={0}
+          className={`${basePrefixCls}__input-number`}
           max={startDays - 1}
           value={endDays}
           onChange={(e) => {
@@ -82,15 +83,16 @@ function RelativeRangeHeader({ dateRange, onRangeChange, onModeChange }: Relativ
         />
       </span>
       <span className={`${basePrefixCls}__text`}>{ToText}</span>
-      <span className={`${basePrefixCls}__input-number`} data-testid="start-days">
+      <span data-testid="start-days">
         <Input.InputNumber
           min={endDays + 1}
           max={10000}
+          className={`${basePrefixCls}__input-number`}
           value={startDays + 1}
           onChange={(e) => {
             const value = parseInt(e.target.value, 10);
             if (value && value > endDays) {
-              setRange(value as number, endDays as number);
+              setRange((value as number) - 1, endDays as number);
             }
           }}
           size="small"

src/static-past-time-picker/SinceRangePicker.tsx

@@ -1,14 +1,5 @@
 import React from 'react';
-import {
-  format,
-  getTime,
-  startOfToday,
-  startOfYesterday,
-  differenceInDays,
-  startOfDay,
-  isValid,
-  isAfter,
-} from 'date-fns';
+import { format, getTime, startOfToday, startOfYesterday, startOfDay, isValid, isAfter } from 'date-fns';
 import { usePrefixCls, useLocale } from '@gio-design/utils';
 import SwitchGroup from '../switchGroup';
 import DatePicker from '../static-date-picker';
@@ -23,7 +14,9 @@ function SinceRangePicker({ disabledDate, timeRange, onSelect, onCancel, experim
   const dates = parseStartAndEndDate(timeRange);
   const prefixCls = usePrefixCls('range-panel__header');
   const [startDate, setStartDate] = React.useState<Date | undefined>(dates[0]);
-  const [endKey, setEndKey] = React.useState(endDateKeys[dates[1] ? differenceInDays(startOfToday(), dates[1]) : 0]);
+  const [endKey, setEndKey] = React.useState(
+    endDateKeys[timeRange && timeRange.split(':')[0] === 'since' ? 0 : 1] || 0
+  );
   const locale = useLocale<typeof defaultLocale>('StaticPastTimePicker') || defaultLocale;
 
   const { startDayText, FromText, toTodayText, toYesterdayText } = {

src/static-past-time-picker/constant.ts

@@ -12,10 +12,14 @@ export const experimentalQuickOptions = (localeText: typeof defaultLocaleText) =
 
 export const QUICK_MAPPING = {
   'day:1,0': '今日',
-  'week:1,0': '本周',
-  'month:1,0': '本月',
-  'quarter:1,0': '本季度',
-  'year:1,0': '今年',
+  'week:1,0': '本周(至昨日)',
+  'week-lt-today:1,0': '本周(至今日)',
+  'month:1,0': '本月(至昨日)',
+  'month-lt-tod:1,0': '本月(至今日)',
+  'quarter:1,0': '本季度(至昨日)',
+  'quarter-lt-today:1,0': '本季度(至今日)',
+  'year:1,0': '今年(至今日)',
+  'year-lt-today:1,0': '今年(至昨日)',
   'day:8,1': '过去 7 天',
   'day:31,1': '过去 30 天',
   'day:181,1': '过去 180 天',

src/static-past-time-picker/locales/en-US.ts

@@ -18,12 +18,20 @@ export default {
   todayText: 'Today',
   yesterdayText: 'Yesterday',
   thisWeekText: 'Current Week',
+  thisWeekToToday: 'This week(to today)',
+  thisWeekToYesterday: 'This week(to yesterday)',
   lastWeekText: 'Last Week',
   thisMonthText: 'Current Month',
+  thisMonthToToday: 'This month(to today)',
+  thisMonthToYesterday: 'This mont(to yesterday)',
   lastMonthText: 'Last Month',
   thisQuarterText: 'Current Quarter',
+  thisQuarterTextToToday: 'This quarter(to today)',
+  thisQuarterTextToYesterday: 'This quarter(to yesterday)',
   lastQuarterText: 'Last Quarter',
   thisYearText: 'Current Year',
+  thisYearTextToToday: 'This year(to today)',
+  thisYearTextToYesterday: 'This year(to yesterday)',
   lastYearText: 'Last Year',
   lastSomeHours: (text: Key) => `Last ${text} hour(s)`,
   last7DaysText: 'Previous 7 days',
@@ -33,4 +41,5 @@ export default {
   last180DaysText: 'Previous 180 days',
   last365DaysText: 'Previous 365 days',
   timeRangeText: 'Time Range',
+  includeToday: 'Include Today',
 };

src/static-past-time-picker/locales/zh-CN.ts

@@ -41,4 +41,5 @@ export default {
   last180DaysText: '过去180天',
   last365DaysText: '过去365天',
   timeRangeText: '时间范围',
+  includeToday: '至今日',
 };

src/static-past-time-picker/style/RangePanel.less

@@ -22,13 +22,10 @@
 
       line-height: 30px;
     }
-    &__text:not(:first-child) {
-      margin-left: 10px;
-    }
 
     &__input-number {
       width: 80px;
-      margin-left: 8px;
+      margin: 0 10px;
     }
 
     &__options,

src/static-past-time-picker/utils.ts

@@ -1,5 +1,5 @@
 import has from 'lodash/has';
-import { startOfToday, sub } from 'date-fns';
+import { startOfToday, sub, startOfYesterday } from 'date-fns';
 import { TimeMode } from './interfaces';
 import { QUICK_MAPPING } from './constant';
 
@@ -14,6 +14,8 @@ export const parseTimeMode = (timeRange: string | undefined) => {
   switch (items[0]) {
     case 'since':
       return TimeMode.Since;
+    case 'since-lt-today':
+      return TimeMode.Since;
     case 'abs':
       return TimeMode.Absolute;
     case 'day':
@@ -30,12 +32,19 @@ export const parseStartAndEndDate = (timeRange: string | undefined): [Date | und
   const items = timeRange.split(':');
   const times = items[1].split(',').map((str) => parseInt(str, 10));
   const today = startOfToday();
+  const yesterday = startOfYesterday();
   if (items[0] === 'since') {
     if (times.length === 1) {
       return [new Date(times[0]), today];
     }
     return [new Date(times[0]), sub(today, { days: times[1] })];
   }
+  if (items[0] === 'since-lt-today') {
+    if (times.length === 1) {
+      return [new Date(times[0]), yesterday];
+    }
+    return [new Date(times[0]), sub(yesterday, { days: times[1] })];
+  }
   if (items[0] === 'abs') {
     return [new Date(times[0]), new Date(times[1])];
   }