fix: picker locale trigger (#668)

Author: zombieJ

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');
+  });
 });