From 01a27a5a1111f96172fbca2f756a4b70e19e1a5d Mon Sep 17 00:00:00 2001 From: wuxh Date: Fri, 20 Oct 2023 23:55:32 +0800 Subject: [PATCH] fix: locale format not working error #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 --- src/Picker.tsx | 2 +- src/RangePicker.tsx | 4 +- src/interface.ts | 1 + src/utils/uiUtil.ts | 54 ++++++------ tests/__snapshots__/picker.spec.tsx.snap | 108 +++++++++++++++++++++++ tests/picker.spec.tsx | 32 ++++++- 6 files changed, 169 insertions(+), 32 deletions(-) diff --git a/src/Picker.tsx b/src/Picker.tsx index 514d6088e..b5707d1ef 100644 --- a/src/Picker.tsx +++ b/src/Picker.tsx @@ -210,7 +210,7 @@ function InnerPicker(props: PickerProps) { } // ============================= State ============================= - const formatList = toArray(getDefaultFormat(format, picker, showTime, use12Hours)); + const formatList = toArray(getDefaultFormat(format, picker, showTime, use12Hours, locale)); // Panel ref const panelDivRef = React.useRef(null); diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx index be155abaf..9d3a84081 100644 --- a/src/RangePicker.tsx +++ b/src/RangePicker.tsx @@ -277,7 +277,7 @@ function InnerRangePicker(props: RangePickerProps) { } // ============================= Misc ============================== - const formatList = toArray(getDefaultFormat(format, picker, showTime, use12Hours)); + const formatList = toArray(getDefaultFormat(format, picker, showTime, use12Hours, locale)); const formatDateValue = (values: RangeValue, index: 0 | 1) => values && values[index] @@ -407,7 +407,7 @@ function InnerRangePicker(props: RangePickerProps) { function triggerChange( newValue: RangeValue, 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 index aa64e308b..155bade60 100644 --- 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 index 1ac765c7c..498b3af71 100644 --- 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(); @@ -149,36 +149,34 @@ export function getDefaultFormat( 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( diff --git a/tests/__snapshots__/picker.spec.tsx.snap b/tests/__snapshots__/picker.spec.tsx.snap index 11780579a..74182915a 100644 --- 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`] = ` +
+
+ +
+
+`; + +exports[`Picker.Basic Picker format by locale dateTime 1`] = ` +
+
+ +
+
+`; + +exports[`Picker.Basic Picker format by locale month 1`] = ` +
+
+ +
+
+`; + +exports[`Picker.Basic Picker format by locale quarter 1`] = ` +
+
+ +
+
+`; + +exports[`Picker.Basic Picker format by locale week 1`] = ` +
+
+ +
+
+`; + +exports[`Picker.Basic Picker format by locale year 1`] = ` +
+
+ +
+
+`; + exports[`Picker.Basic icon 1`] = `
{ 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(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( + + ); + 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' }); + }); + });