diff --git a/docs/demo/locale.md b/docs/demo/locale.md new file mode 100644 index 000000000..076460e55 --- /dev/null +++ b/docs/demo/locale.md @@ -0,0 +1,8 @@ +--- +title: locale +nav: + title: Demo + path: /demo +--- + + diff --git a/docs/examples/locale.tsx b/docs/examples/locale.tsx new file mode 100644 index 000000000..c533b4cd4 --- /dev/null +++ b/docs/examples/locale.tsx @@ -0,0 +1,56 @@ +import type { Moment } from 'moment'; +import moment from 'moment'; +import 'moment/locale/zh-cn'; +import React from 'react'; +import '../../assets/index.less'; +import momentGenerateConfig from '../../src/generate/moment'; +import enUS from '../../src/locale/en_US'; +import zhCN from '../../src/locale/zh_CN'; +import Picker from '../../src/Picker'; + +// const defaultValue = moment('2019-09-03 05:02:03'); +const defaultValue = moment('2019-11-28 01:02:03'); + +export default () => { + const [locale, setLocale] = React.useState(enUS); + const [value, setValue] = React.useState(defaultValue); + + const onChange = (newValue: Moment | null, formatString?: string) => { + console.log('Change:', newValue, formatString); + setValue(newValue); + }; + + const sharedProps = { + generateConfig: momentGenerateConfig, + value, + onChange, + presets: [ + { + label: 'Hello World!', + value: moment(), + }, + { + label: 'Now', + value: () => moment(), + }, + ], + }; + + return ( +
+ {...sharedProps} locale={locale} format="dddd" /> + +
+ ); +}; diff --git a/src/hooks/useValueTexts.ts b/src/hooks/useValueTexts.ts index 8f9380062..9c185e5fe 100644 --- a/src/hooks/useValueTexts.ts +++ b/src/hooks/useValueTexts.ts @@ -36,11 +36,13 @@ export default function useValueTexts( return [fullValueTexts, firstValueText]; }, - [value, formatList], + [value, formatList, locale], (prev, next) => // Not Same Date !isEqual(generateConfig, prev[0], next[0]) || // Not Same format - !shallowEqual(prev[1], next[1], true), + !shallowEqual(prev[1], next[1], true) || + // Not Same locale + !shallowEqual(prev[2], next[2], true), ); } diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx index d42aba43f..694039a7c 100644 --- a/tests/picker.spec.tsx +++ b/tests/picker.spec.tsx @@ -2,11 +2,14 @@ import { act, createEvent, fireEvent, render } from '@testing-library/react'; import type { Moment } from 'moment'; import moment from 'moment'; +import 'moment/locale/zh-cn'; import KeyCode from 'rc-util/lib/KeyCode'; import { spyElementPrototypes } from 'rc-util/lib/test/domHook'; import { resetWarned } from 'rc-util/lib/warning'; import React from 'react'; import type { PanelMode, PickerMode } from '../src/interface'; +import enUS from '../src/locale/en_US'; +import zhCN from '../src/locale/zh_CN'; import { clearValue, closePicker, @@ -555,7 +558,7 @@ describe('Picker.Basic', () => { ); expect(document.querySelector('.rc-picker-input')).toMatchSnapshot(); expect(errorSpy).toHaveBeenCalledWith( - 'Warning: `clearIcon` will be removed in future. Please use `allowClear` instead.' + 'Warning: `clearIcon` will be removed in future. Please use `allowClear` instead.', ); }); @@ -626,7 +629,9 @@ describe('Picker.Basic', () => { expect(errorSpy).not.toBeCalled(); const { container } = render(); openPicker(container); - expect(errorSpy).toBeCalledWith('Warning: `hourStep` 9 is invalid. It should be a factor of 24.'); + expect(errorSpy).toBeCalledWith( + 'Warning: `hourStep` 9 is invalid. It should be a factor of 24.', + ); }); it('should show warning when minute step is invalid', () => { @@ -656,7 +661,9 @@ describe('Picker.Basic', () => { const { container } = render(); openPicker(container); - const column = document.querySelector(`.rc-picker-time-panel-column:nth-child(${index + 1})`); + const column = document.querySelector( + `.rc-picker-time-panel-column:nth-child(${index + 1})`, + ); expect(column).toBeTruthy(); const cells = column.querySelectorAll('.rc-picker-time-panel-cell-inner'); @@ -748,7 +755,7 @@ describe('Picker.Basic', () => { it('defaultOpenValue in timePicker', () => { resetWarned(); const onChange = jest.fn(); - const errSpy = jest.spyOn(console, 'error').mockImplementation(() => { }); + const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); const { container } = render( { expect(onChange.mock.calls[1][0].format('YYYY-MM-DD HH:mm:ss')).toEqual('2023-05-01 12:34:56'); }); + + it('switch picker locale should reformat value', () => { + const { container, rerender } = render( + , + ); + expect(container.querySelector('input').value).toEqual('Friday'); + + // Switch locale + moment.locale('zh-cn'); + rerender(); + expect(container.querySelector('input').value).toEqual('ζ˜ŸζœŸδΊ”'); + + // Reset locale + moment.locale('en'); + }); });