Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(DateRanger): Add the internationalization of internal copywriting #903

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion .dumirc.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@ export default defineConfig({
},
// 默认重定向到子包的 src 文件夹
// ref: https://d.umijs.org/config#monoreporedirect
monorepoRedirect: {},
monorepoRedirect: {
useRootProject: true,
},
// umi.server.js build error, disable it for now
// ssr: process.env.NODE_ENV === 'production' ? {} : false,
hash: true,
Expand Down
47 changes: 16 additions & 31 deletions packages/ui/src/DateRanger/Ranger.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,8 @@ import {
Tooltip,
theme,
} from '@oceanbase/design';
import type { TooltipProps, FormItemProps } from '@oceanbase/design';
import {
LeftOutlined,
PauseOutlined,
CaretRightOutlined,
RightOutlined,
ZoomOutOutlined,
SyncOutlined,
} from '@oceanbase/icons';
import type { TooltipProps } from '@oceanbase/design';
import { LeftOutlined, RightOutlined, ZoomOutOutlined, SyncOutlined } from '@oceanbase/icons';
import type { RangePickerProps } from '@oceanbase/design/es/date-picker';
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
Expand Down Expand Up @@ -139,7 +132,8 @@ const Ranger = React.forwardRef((props: DateRangerProps, ref) => {
} = props;

const { token } = theme.useToken();
const isCn = locale.locale === 'zh_CN';
const isCn = locale.antLocale === 'zh-cn';
const isEN = locale.antLocale === 'en';

// 是否为 moment 时间对象
const isMoment =
Expand Down Expand Up @@ -271,34 +265,26 @@ const Ranger = React.forwardRef((props: DateRangerProps, ref) => {

const getCustomizeLabel = () => {
if (differenceYears > 0) {
return `近 ${differenceYears} 年`;
return isEN ? `Nearly ${differenceYears} years` : `近 ${differenceYears} 年`;
}

// if (differenceQuarters > 0) {
// return `近 ${differenceQuarters} 季度`;
// }

if (differenceMonths > 0) {
return `近 ${differenceMonths} 月`;
return isEN ? `Nearly ${differenceMonths} months` : `近 ${differenceMonths} 月`;
}

if (differenceWeeks > 0) {
return `近 ${differenceWeeks} 周`;
}

if (differenceDays > 0) {
return `近 ${differenceDays} 天`;
return isEN ? `Nearly ${differenceWeeks} weeks` : `近 ${differenceWeeks} 周`;
}

if (differenceHours > 0) {
return `近 ${differenceHours} `;
return isEN ? `Nearly ${differenceHours} hours` : `近 ${differenceHours} 小时`;
}

if (differenceMinutes > 0) {
return `近 ${differenceMinutes} 分`;
return isEN ? `Nearly ${differenceMinutes} minutes` : `近 ${differenceMinutes} 分`;
}

return `近 ${differenceSeconds} 秒`;
return isEN ? `Nearly ${differenceSeconds} seconds` : `近 ${differenceSeconds} 秒`;
};

const setNow = () => {
Expand All @@ -316,15 +302,15 @@ const Ranger = React.forwardRef((props: DateRangerProps, ref) => {
updateCurrentTime: setNow,
}));

const rangeLabel =
rangeName === CUSTOMIZE
? getCustomizeRangeLabel()
: selects.find(_item => _item.name === rangeName)?.rangeLabel;
const currentRange = selects.find(_item => _item.name === rangeName);
const rangeLabel = rangeName === CUSTOMIZE ? getCustomizeRangeLabel() : currentRange?.rangeLabel;

const label =
rangeName === CUSTOMIZE
? getCustomizeLabel()
: selects.find(_item => _item.name === rangeName)?.label;
: isEN
? currentRange.enLabel || currentRange.label
: currentRange.label;

const thisYear = new Date().getFullYear();
const isThisYear = startTime?.year() === thisYear && endTime?.year() === thisYear;
Expand Down Expand Up @@ -428,8 +414,7 @@ const Ranger = React.forwardRef((props: DateRangerProps, ref) => {
{hasTagInPicker && (
<span className={`${prefix}-label`}>{item.rangeLabel}</span>
)}
{/* @ts-ignore */}
{locale[item.label] || item.label}
{isEN ? item.enLabel || item.label : item.label}
</Space>
),
};
Expand Down
21 changes: 21 additions & 0 deletions packages/ui/src/DateRanger/constant/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export const DATE_TIME_FORMAT_CN = 'MM-DD HH:mm';

export const NEAR_1_MINUTES: RangeOption = {
label: '近 1 分钟',
enLabel: 'Nearly 1 minute',
rangeLabel: '1m',
name: 'NEAR_1_MINUTES',
range: (current: Moment | Dayjs = moment()) => [
Expand All @@ -36,6 +37,7 @@ export const NEAR_1_MINUTES: RangeOption = {

export const NEAR_5_MINUTES: RangeOption = {
label: '近 5 分钟',
enLabel: 'Nearly 5 minutes',
rangeLabel: '5m',
name: 'NEAR_5_MINUTES',
range: (current: Moment | Dayjs = moment()) => [
Expand All @@ -46,6 +48,7 @@ export const NEAR_5_MINUTES: RangeOption = {

export const NEAR_10_MINUTES: RangeOption = {
label: '近 10 分钟',
enLabel: 'Nearly 10 minutes',
rangeLabel: '10m',
name: 'NEAR_10_MINUTES',
range: (current: Moment | Dayjs = moment()) => [
Expand All @@ -56,6 +59,7 @@ export const NEAR_10_MINUTES: RangeOption = {

export const NEAR_20_MINUTES: RangeOption = {
label: '近 20 分钟',
enLabel: 'Nearly 20 minutes',
rangeLabel: '20m',
name: 'NEAR_20_MINUTES',
range: (current: Moment | Dayjs = moment()) => [
Expand All @@ -66,6 +70,7 @@ export const NEAR_20_MINUTES: RangeOption = {

export const NEAR_30_MINUTES: RangeOption = {
label: '近 30 分钟',
enLabel: 'Nearly 30 minutes',
rangeLabel: '30m',
name: 'NEAR_30_MINUTES',
range: (current: Moment | Dayjs = moment()) => [
Expand All @@ -76,6 +81,7 @@ export const NEAR_30_MINUTES: RangeOption = {

export const NEAR_1_HOURS: RangeOption = {
label: '近 1 小时',
enLabel: 'Nearly 1 hour',
rangeLabel: '1h',
name: 'NEAR_1_HOURS',
range: (current: Moment | Dayjs = moment()) => [
Expand All @@ -86,6 +92,7 @@ export const NEAR_1_HOURS: RangeOption = {

export const NEAR_2_HOURS: RangeOption = {
label: '近 2 小时',
enLabel: 'Nearly 2 hours',
rangeLabel: '2h',
name: 'NEAR_2_HOURS',
range: (current: Moment | Dayjs = moment()) => [
Expand All @@ -96,6 +103,7 @@ export const NEAR_2_HOURS: RangeOption = {

export const NEAR_3_HOURS: RangeOption = {
label: '近 3 小时',
enLabel: 'Nearly 3 hours',
rangeLabel: '3h',
name: 'NEAR_3_HOURS',
range: (current: Moment | Dayjs = moment()) => [
Expand All @@ -106,6 +114,7 @@ export const NEAR_3_HOURS: RangeOption = {

export const NEAR_6_HOURS: RangeOption = {
label: '近 6 小时',
enLabel: 'Nearly 6 hours',
rangeLabel: '6h',
name: 'NEAR_6_HOURS',
range: (current: Moment | Dayjs = moment()) => [
Expand All @@ -116,6 +125,7 @@ export const NEAR_6_HOURS: RangeOption = {

export const TODAY: RangeOption = {
label: '今天',
enLabel: 'Today',
rangeLabel: '1d',
name: 'TODAY',
range: (current: Moment | Dayjs = moment()) => [
Expand All @@ -126,6 +136,7 @@ export const TODAY: RangeOption = {

export const YESTERDAY: RangeOption = {
label: '昨天',
enLabel: 'Yesterday',
rangeLabel: '1d',
name: 'YESTERDAY',
range: (current: Moment | Dayjs = moment()) => [
Expand All @@ -136,6 +147,7 @@ export const YESTERDAY: RangeOption = {

export const LAST_3_DAYS: RangeOption = {
label: '近 3 天',
enLabel: 'Nearly 3 days',
rangeLabel: '3d',
name: 'LAST_3_DAYS',
range: (current: Moment | Dayjs = moment()) => [
Expand All @@ -146,6 +158,7 @@ export const LAST_3_DAYS: RangeOption = {

export const THIS_WEEK: RangeOption = {
label: '近一周',
enLabel: 'Nearly a week',
rangeLabel: '1w',
name: 'THIS_WEEK',
range: (current: Moment | Dayjs = moment()) => [
Expand All @@ -156,6 +169,7 @@ export const THIS_WEEK: RangeOption = {

export const LAST_WEEK: RangeOption = {
label: '上周',
enLabel: 'Last week',
rangeLabel: 'last week',
name: 'LAST_WEEK',
range: (current: Moment | Dayjs = moment()) => [
Expand All @@ -166,6 +180,7 @@ export const LAST_WEEK: RangeOption = {

export const THIS_MONTH: RangeOption = {
label: '本月',
enLabel: 'This month',
rangeLabel: '1mo',
name: 'THIS_MONTH',
range: (current: Moment | Dayjs = moment()) => [
Expand All @@ -176,6 +191,7 @@ export const THIS_MONTH: RangeOption = {

export const LAST_MONTH: RangeOption = {
label: '上月',
enLabel: 'Last month',
rangeLabel: '1mo',
name: 'LAST_MONTH',
range: (current: Moment | Dayjs = moment()) => [
Expand All @@ -186,6 +202,7 @@ export const LAST_MONTH: RangeOption = {

export const THIS_YEAR: RangeOption = {
label: '今年',
enLabel: 'This year',
rangeLabel: '1y',
name: 'THIS_YEAR',
range: (current: Moment | Dayjs = moment()) => [
Expand All @@ -196,6 +213,7 @@ export const THIS_YEAR: RangeOption = {

export const LAST_YEAR: RangeOption = {
label: '去年',
enLabel: 'Last year',
rangeLabel: '1y',
name: 'LAST_YEAR',
range: (current: Moment | Dayjs = moment()) => [
Expand All @@ -206,6 +224,7 @@ export const LAST_YEAR: RangeOption = {

export const NEXT_YEAR: RangeOption = {
label: '明年',
enLabel: 'Next year',
rangeLabel: '1y',
name: 'NEXT_YEAR',
range: (current: Moment | Dayjs = moment()) => [
Expand All @@ -227,6 +246,8 @@ export const NEAR_TIME_LIST = [
LAST_3_DAYS,
TODAY,
YESTERDAY,
THIS_WEEK,
LAST_WEEK,
THIS_MONTH,
LAST_MONTH,
THIS_YEAR,
Expand Down
42 changes: 42 additions & 0 deletions packages/ui/src/DateRanger/demo/locale.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import React, { useState } from 'react';
import { DateRanger } from '@oceanbase/ui';
import { ConfigProvider, Radio, RadioChangeEvent, Space } from '@oceanbase/design';
import dayjs from 'dayjs';
import enUS from '@oceanbase/ui/locale/en-US';
import zhCN from '@oceanbase/ui/locale/zh-CN';

export default () => {
const [locale, setLocal] = useState(enUS);

const changeLocale = (e: RadioChangeEvent) => {
const localeValue = e.target.value;
setLocal(localeValue);
if (!localeValue) {
dayjs.locale('en');
} else {
dayjs.locale('zh-cn');
}
};

return (
<div>
<div style={{ marginBottom: 16 }}>
<span style={{ marginInlineEnd: 16 }}>Change locale of components:</span>
<Radio.Group value={locale} onChange={changeLocale}>
<Radio.Button key="en" value={enUS}>
English
</Radio.Button>
<Radio.Button key="cn" value={zhCN}>
中文
</Radio.Button>
</Radio.Group>
</div>
<ConfigProvider locale={locale}>
<Space direction="vertical">
<DateRanger />
<DateRanger simpleMode />
</Space>
</ConfigProvider>
</div>
);
};
3 changes: 3 additions & 0 deletions packages/ui/src/DateRanger/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ nav:

<code src="./demo/default-value.tsx" title="指定默认值"></code>

<code src="./demo/locale.tsx" title="国际化"></code>

<code src="./demo/updateCurrentTime.tsx" title="从外部更新时间"></code>

## API
Expand All @@ -26,6 +28,7 @@ nav:
| onChange | value 变化时的回调函数 | (range: Dayjs[] \| Moment[]) => void | noop | - |
| defaultValue | DatePicker 控件的默认值 | Dayjs[] \| Moment[] | - | - |
| defaultQuickValue | 快速选择的默认值(优先级低于 value/defaultValue) | string | - | - |
| isMoment | 是否使用 moment.js 作为时间插件 | boolean | - | - |
| hasRewind | 后退按钮 | boolean | true | - |
| hasForward | 前进按钮 | boolean | true | - |
| hasSync | 刷新按钮 | boolean | true | - |
Expand Down
4 changes: 4 additions & 0 deletions packages/ui/src/DateRanger/typing.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ export interface RangeOption {
* @description 选项展示名称
*/
label: string;
/**
* @description 选项英文展示名称,用来兼容内部国际化,外部传入的选项直接对 label 做国际化即可
*/
enLabel?: string;
/**
* @description 选项 key
*/
Expand Down
2 changes: 2 additions & 0 deletions packages/ui/src/locale/LocaleWrapper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ export default ({ componentName, defaultLocale }: LocaleWrapperInput) =>
const localeData = {
...defaultLocale,
...(localeFromContext || {}),
// 这里使用 antLocale,不能直接顶掉 locale 属性,有些组件内部会维护一个 locale 去做特殊判断
antLocale: antLocale?.locale || 'zh-cn',
};

return (
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/locale/en-US.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import enUS from '@oceanbase/design/es/locale/en-US';
import enUS from '@oceanbase/design/locale/en-US';
import BasicLayout from '../BasicLayout/locale/en-US';
import BatchOperationBar from '../BatchOperationBar/locale/en-US';
import Boundary from '../Boundary/locale/en-US';
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/locale/zh-CN.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import zhCN from '@oceanbase/design/es/locale/zh-CN';
import zhCN from '@oceanbase/design/locale/zh-CN';
import BasicLayout from '../BasicLayout/locale/zh-CN';
import BatchOperationBar from '../BatchOperationBar/locale/zh-CN';
import Dialog from '../Dialog/locale/zh-CN';
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/locale/zh-TW.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import zhTW from '@oceanbase/design/es/locale/zh-TW';
import zhTW from '@oceanbase/design/locale/zh-TW';
import BasicLayout from '../BasicLayout/locale/zh-TW';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

需要用之前的 es 路径,目前只有仓库内部支持 locale 路径,在其他项目里还不支持

import BatchOperationBar from '../BatchOperationBar/locale/zh-TW';
import Dialog from '../Dialog/locale/zh-TW';
Expand Down
Loading