fix: picker locale trigger (#668)

docs/demo/locale.md

@@ -0,0 +1,8 @@
+---
+title: locale
+nav:
+ title: Demo
+ path: /demo
+---
+
+<code src="../examples/locale.tsx"></code>

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<Moment | null>(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 (
+ <div>
+ <Picker<Moment> {...sharedProps} locale={locale} format="dddd" />
+ <button
+ onClick={() =>
+ setLocale((l) => {
+ const next = l === zhCN ? enUS : zhCN;
+ moment.locale(next.locale === 'zh-cn' ? 'zh-cn' : 'en');
+
+ return next;
+ })
+ }
+ >
+ {locale.locale}
+ </button>
+ </div>
+ );
+};

src/hooks/useValueTexts.ts

@@ -36,11 +36,13 @@ export default function useValueTexts<DateType>(
 
  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),
  );
 }

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(<MomentPicker picker="time" hourStep={9} />);
  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(<MomentPicker picker="time" {...props} />);
  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(
  <MomentPicker
@@ -1085,4 +1092,19 @@ describe('Picker.Basic', () => {
 
  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(
+ <MomentPicker value={getMoment('2011-11-11')} format={'dddd'} locale={enUS} />,
+ );
+ expect(container.querySelector('input').value).toEqual('Friday');
+
+ // Switch locale
+ moment.locale('zh-cn');
+ rerender(<MomentPicker value={getMoment('2011-11-11')} format={'dddd'} locale={zhCN} />);
+ expect(container.querySelector('input').value).toEqual('星期五');
+
+ // Reset locale
+ moment.locale('en');
+ });
 });