From 5afd1074cd19cd67e800fb187189d7fdd0aaac22 Mon Sep 17 00:00:00 2001 From: wuxh Date: Fri, 20 Oct 2023 23:55:32 +0800 Subject: [PATCH 1/8] chore: add test --- tests/__snapshots__/picker.spec.tsx.snap | 18 ++++++++ tests/picker.spec.tsx | 58 ++++++++++++++++++++++++ 2 files changed, 76 insertions(+) diff --git a/tests/__snapshots__/picker.spec.tsx.snap b/tests/__snapshots__/picker.spec.tsx.snap index 11780579a..6f5de6d60 100644 --- a/tests/__snapshots__/picker.spec.tsx.snap +++ b/tests/__snapshots__/picker.spec.tsx.snap @@ -1,5 +1,23 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Picker.Basic Picker format by locale date 1`] = ` +
+
+ +
+
+`; + exports[`Picker.Basic icon 1`] = `
{ expect(container.querySelector('input')).toHaveValue('2023-09-04 21:05:10'); }); + + + + + + describe.only('Picker format by locale', () => { + const myLocale = { + ...zhCN, + dateFormat: 'YYYY 年 M 月 D 日', + dateTimeFormat: 'YYYY 年 M 月 D 日 H 时 m 分 s 秒', + weekFormat: 'YYYY 年 W 周', + monthFormat: 'YYYY 年 M 月', + }; + + 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'); + + }); + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + }); From c14249e0f3b30a5f02a56fb8cef0a6bb82e7cffc Mon Sep 17 00:00:00 2001 From: wuxh Date: Fri, 20 Oct 2023 23:57:24 +0800 Subject: [PATCH 2/8] chore: add test --- tests/__snapshots__/picker.spec.tsx.snap | 18 ++++++++++++++++++ tests/picker.spec.tsx | 4 ++-- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/tests/__snapshots__/picker.spec.tsx.snap b/tests/__snapshots__/picker.spec.tsx.snap index 6f5de6d60..320ed2db3 100644 --- a/tests/__snapshots__/picker.spec.tsx.snap +++ b/tests/__snapshots__/picker.spec.tsx.snap @@ -18,6 +18,24 @@ exports[`Picker.Basic Picker format by locale date 1`] = `
`; +exports[`Picker.Basic Picker format by locale dateTime 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( { } matchPicker('date'); - + matchPicker('dateTime', { showTime: true }); }); From 1c400c5985eb3670b81d6756cfb3df8bd0489b2a Mon Sep 17 00:00:00 2001 From: wuxh Date: Sat, 21 Oct 2023 00:07:24 +0800 Subject: [PATCH 3/8] chore: update test --- tests/__snapshots__/picker.spec.tsx.snap | 40 ++++++++++++++++++++++-- tests/picker.spec.tsx | 2 ++ 2 files changed, 40 insertions(+), 2 deletions(-) diff --git a/tests/__snapshots__/picker.spec.tsx.snap b/tests/__snapshots__/picker.spec.tsx.snap index 320ed2db3..eac9b2501 100644 --- a/tests/__snapshots__/picker.spec.tsx.snap +++ b/tests/__snapshots__/picker.spec.tsx.snap @@ -11,7 +11,7 @@ exports[`Picker.Basic Picker format by locale date 1`] = ` autocomplete="off" readonly="" size="12" - title="2000-01-01" + title="2000 年 1 月 1 日" value="2000 年 1 月 1 日" />
@@ -29,13 +29,49 @@ exports[`Picker.Basic Picker format by locale dateTime 1`] = ` autocomplete="off" readonly="" size="21" - title="2000-01-01 00:00:00" + title="2000 年 1 月 1 日 0 时 0 分 0 秒" value="2000 年 1 月 1 日 0 时 0 分 0 秒" /> `; +exports[`Picker.Basic Picker format by locale month 1`] = ` +
+
+ +
+
+`; + +exports[`Picker.Basic Picker format by locale week 1`] = ` +
+
+ +
+
+`; + exports[`Picker.Basic icon 1`] = `
{ matchPicker('date'); matchPicker('dateTime', { showTime: true }); + matchPicker('week', { picker: 'week' }); + matchPicker('month', { picker: 'month' }); }); From 8ca1bdd12f2807d7564cab7595b50d6e4632724e Mon Sep 17 00:00:00 2001 From: wuxh Date: Sat, 21 Oct 2023 00:45:01 +0800 Subject: [PATCH 4/8] feat: add type --- src/interface.ts | 1 + 1 file changed, 1 insertion(+) 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; From 4c4cecd623eacd7c567be140998ef6396df8222c Mon Sep 17 00:00:00 2001 From: wuxh Date: Sat, 21 Oct 2023 00:45:36 +0800 Subject: [PATCH 5/8] feat: update logic --- src/Picker.tsx | 2 +- src/RangePicker.tsx | 4 ++-- src/utils/uiUtil.ts | 55 ++++++++++++++++++++++----------------------- 3 files changed, 30 insertions(+), 31 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/utils/uiUtil.ts b/src/utils/uiUtil.ts index 1ac765c7c..20dc74c6e 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,35 @@ 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'; - } + // let mergedFormat = format; + 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( From 4e3223526cf7b8691cfac610d5c333f1eac7f682 Mon Sep 17 00:00:00 2001 From: wuxh Date: Sat, 21 Oct 2023 00:45:53 +0800 Subject: [PATCH 6/8] chore: update snap --- tests/__snapshots__/picker.spec.tsx.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/__snapshots__/picker.spec.tsx.snap b/tests/__snapshots__/picker.spec.tsx.snap index eac9b2501..81da0d587 100644 --- a/tests/__snapshots__/picker.spec.tsx.snap +++ b/tests/__snapshots__/picker.spec.tsx.snap @@ -10,7 +10,7 @@ exports[`Picker.Basic Picker format by locale date 1`] = ` @@ -28,7 +28,7 @@ exports[`Picker.Basic Picker format by locale dateTime 1`] = ` From 2a74b90b71ad47ce1105daca3b485a6aeaf47f0c Mon Sep 17 00:00:00 2001 From: wuxh Date: Sat, 21 Oct 2023 00:49:26 +0800 Subject: [PATCH 7/8] chore: update case --- tests/__snapshots__/picker.spec.tsx.snap | 36 ++++++++++++++++++++++++ tests/picker.spec.tsx | 4 +++ 2 files changed, 40 insertions(+) diff --git a/tests/__snapshots__/picker.spec.tsx.snap b/tests/__snapshots__/picker.spec.tsx.snap index 81da0d587..74182915a 100644 --- a/tests/__snapshots__/picker.spec.tsx.snap +++ b/tests/__snapshots__/picker.spec.tsx.snap @@ -54,6 +54,24 @@ 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`] = `
{ 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'); @@ -1173,6 +1175,8 @@ describe('Picker.Basic', () => { matchPicker('dateTime', { showTime: true }); matchPicker('week', { picker: 'week' }); matchPicker('month', { picker: 'month' }); + matchPicker('quarter', { picker: 'quarter' }); + matchPicker('year', { picker: 'year' }); }); From 55a82bc9c6285a02b991f496b009e8b5d67614c2 Mon Sep 17 00:00:00 2001 From: wuxh Date: Sat, 21 Oct 2023 01:05:01 +0800 Subject: [PATCH 8/8] chore: update case --- tests/picker.spec.tsx | 36 +----------------------------------- 1 file changed, 1 insertion(+), 35 deletions(-) diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx index 8f6d2a19d..fbfb44f15 100644 --- a/tests/picker.spec.tsx +++ b/tests/picker.spec.tsx @@ -1146,11 +1146,7 @@ describe('Picker.Basic', () => { expect(container.querySelector('input')).toHaveValue('2023-09-04 21:05:10'); }); - - - - - describe.only('Picker format by locale', () => { + describe('Picker format by locale', () => { const myLocale = { ...zhCN, dateFormat: 'YYYY 年 M 月 D 日', @@ -1179,34 +1175,4 @@ describe('Picker.Basic', () => { matchPicker('year', { picker: 'year' }); }); - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - });