fix: locale format not working error react-component#687

chore: add test chore: update test feat: add type feat: update logic chore: update snap chore: update case chore: update case chore: remove note
Wxh16144-forks · Oct 23, 2023 · 01a27a5 · 01a27a5
1 parent f6c6803
commit 01a27a5
Show file tree

Hide file tree

Showing 6 changed files with 169 additions and 32 deletions.
diff --git a/src/Picker.tsx b/src/Picker.tsx
@@ -210,7 +210,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
   }
 
   // ============================= State =============================
-  const formatList = toArray(getDefaultFormat(format, picker, showTime, use12Hours));
+  const formatList = toArray(getDefaultFormat(format, picker, showTime, use12Hours, locale));
 
   // Panel ref
   const panelDivRef = React.useRef<HTMLDivElement>(null);

diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx
@@ -277,7 +277,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
   }
 
   // ============================= Misc ==============================
-  const formatList = toArray(getDefaultFormat<DateType>(format, picker, showTime, use12Hours));
+  const formatList = toArray(getDefaultFormat<DateType>(format, picker, showTime, use12Hours, locale));
 
   const formatDateValue = (values: RangeValue<DateType>, index: 0 | 1) =>
     values && values[index]
@@ -407,7 +407,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
   function triggerChange(
     newValue: RangeValue<DateType>,
     sourceIndex: 0 | 1,
-    triggerCalendarChangeOnly?: boolean, 
+    triggerCalendarChangeOnly?: boolean,
   ) {
     let values = newValue;
     let startValue = getValue(values, 0);

diff --git a/src/interface.ts b/src/interface.ts
@@ -9,6 +9,7 @@ export type Locale = {
   monthBeforeYear?: boolean;
   yearFormat: string;
   monthFormat?: string;
+  weekFormat?: string;
   quarterFormat?: string;
 
   today: string;

diff --git a/src/utils/uiUtil.ts b/src/utils/uiUtil.ts
@@ -2,7 +2,7 @@ import KeyCode from 'rc-util/lib/KeyCode';
 import raf from 'rc-util/lib/raf';
 import isVisible from 'rc-util/lib/Dom/isVisible';
 import type { GenerateConfig } from '../generate';
-import type { CustomFormat, PanelMode, PickerMode } from '../interface';
+import type { CustomFormat, PanelMode, PickerMode, Locale } from '../interface';
 
 const scrollIds = new Map<HTMLElement, number>();
 
@@ -149,36 +149,34 @@ export function getDefaultFormat<DateType>(
   picker: PickerMode | undefined,
   showTime: boolean | object | undefined,
   use12Hours: boolean | undefined,
+  locale: Locale,
 ) {
-  let mergedFormat = format;
-  if (!mergedFormat) {
-    switch (picker) {
-      case 'time':
-        mergedFormat = use12Hours ? 'hh:mm:ss a' : 'HH:mm:ss';
-        break;
-
-      case 'week':
-        mergedFormat = 'gggg-wo';
-        break;
-
-      case 'month':
-        mergedFormat = 'YYYY-MM';
-        break;
-
-      case 'quarter':
-        mergedFormat = 'YYYY-[Q]Q';
-        break;
-
-      case 'year':
-        mergedFormat = 'YYYY';
-        break;
-
-      default:
-        mergedFormat = showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD';
-    }
+  if (format) return format;
+
+  if (picker === 'time') {
+    return use12Hours ? 'hh:mm:ss a' : 'HH:mm:ss';
+  }
+
+  if (picker === 'week') {
+    return locale.weekFormat ?? 'gggg-wo';
+  }
+
+  if (picker === 'month') {
+    return locale.monthFormat ?? 'YYYY-MM';
   }
 
-  return mergedFormat;
+  if (picker === 'quarter') {
+    return locale.quarterFormat ?? 'YYYY-[Q]Q';
+  }
+
+  if (picker === 'year') {
+    return locale.yearFormat ?? 'YYYY';
+  }
+
+  return showTime
+    ? (locale.dateTimeFormat ?? 'YYYY-MM-DD HH:mm:ss')
+    : (locale.dateFormat ?? 'YYYY-MM-DD');
+
 }
 
 export function getInputSize<DateType>(

diff --git a/tests/__snapshots__/picker.spec.tsx.snap b/tests/__snapshots__/picker.spec.tsx.snap
@@ -1,5 +1,113 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Picker.Basic Picker format by locale date 1`] = `
+<div
+  class="rc-picker"
+>
+  <div
+    class="rc-picker-input"
+  >
+    <input
+      autocomplete="off"
+      readonly=""
+      size="16"
+      title="2000 年 1 月 1 日"
+      value="2000 年 1 月 1 日"
+    />
+  </div>
+</div>
+`;
+
+exports[`Picker.Basic Picker format by locale dateTime 1`] = `
+<div
+  class="rc-picker"
+>
+  <div
+    class="rc-picker-input"
+  >
+    <input
+      autocomplete="off"
+      readonly=""
+      size="28"
+      title="2000 年 1 月 1 日 0 时 0 分 0 秒"
+      value="2000 年 1 月 1 日 0 时 0 分 0 秒"
+    />
+  </div>
+</div>
+`;
+
+exports[`Picker.Basic Picker format by locale month 1`] = `
+<div
+  class="rc-picker"
+>
+  <div
+    class="rc-picker-input"
+  >
+    <input
+      autocomplete="off"
+      readonly=""
+      size="12"
+      title="2000 年 1 月"
+      value="2000 年 1 月"
+    />
+  </div>
+</div>
+`;
+
+exports[`Picker.Basic Picker format by locale quarter 1`] = `
+<div
+  class="rc-picker"
+>
+  <div
+    class="rc-picker-input"
+  >
+    <input
+      autocomplete="off"
+      readonly=""
+      size="13"
+      title="2000 年 1 季度"
+      value="2000 年 1 季度"
+    />
+  </div>
+</div>
+`;
+
+exports[`Picker.Basic Picker format by locale week 1`] = `
+<div
+  class="rc-picker"
+>
+  <div
+    class="rc-picker-input"
+  >
+    <input
+      autocomplete="off"
+      readonly=""
+      size="12"
+      title="2000 年 52 周"
+      value="2000 年 52 周"
+    />
+  </div>
+</div>
+`;
+
+exports[`Picker.Basic Picker format by locale year 1`] = `
+<div
+  class="rc-picker"
+>
+  <div
+    class="rc-picker-input"
+  >
+    <input
+      autocomplete="off"
+      readonly=""
+      size="12"
+      title="2000 年"
+      value="2000 年"
+    />
+  </div>
+</div>
+`;
+
 exports[`Picker.Basic icon 1`] = `
 <div
   class="rc-picker-input"

diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx
@@ -781,7 +781,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
@@ -1145,4 +1145,34 @@ describe('Picker.Basic', () => {
 
     expect(container.querySelector('input')).toHaveValue('2023-09-04 21:05:10');
   });
+
+  describe('Picker format by locale', () => {
+    const myLocale = {
+      ...zhCN,
+      dateFormat: 'YYYY 年 M 月 D 日',
+      dateTimeFormat: 'YYYY 年 M 月 D 日 H 时 m 分 s 秒',
+      weekFormat: 'YYYY 年 W 周',
+      monthFormat: 'YYYY 年 M 月',
+      quarterFormat: 'YYYY 年 Q 季度',
+      yearFormat: 'YYYY 年',
+    };
+
+    const date = moment('2000-01-01', 'YYYY-MM-DD');
+    function matchPicker(name: string, props?: any) {
+      it(name, () => {
+        const { container } = render(
+          <MomentPicker value={date} {...props} locale={myLocale} />
+        );
+        expect(container.firstChild).toMatchSnapshot();
+      });
+    }
+
+    matchPicker('date');
+    matchPicker('dateTime', { showTime: true });
+    matchPicker('week', { picker: 'week' });
+    matchPicker('month', { picker: 'month' });
+    matchPicker('quarter', { picker: 'quarter' });
+    matchPicker('year', { picker: 'year' });
+  });
+
 });