Skip to content

Commit 2a5a268

Browse files
Wxh16144Wxh16144
committed
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 (cherry picked from commit 01a27a5) # Conflicts: # src/RangePicker.tsx # tests/picker.spec.tsx
1 parent fd5fe22 commit 2a5a268

File tree

6 files changed

+165
-30
lines changed

6 files changed

+165
-30
lines changed

‎src/Picker.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -189,7 +189,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
189189
}
190190

191191
// ============================= State =============================
192-
const formatList = toArray(getDefaultFormat(format, picker, showTime, use12Hours));
192+
const formatList = toArray(getDefaultFormat(format, picker, showTime, use12Hours, locale));
193193

194194
// Panel ref
195195
const panelDivRef = React.useRef<HTMLDivElement>(null);

‎src/RangePicker.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,9 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
247247
}
248248

249249
// ============================= Misc ==============================
250-
const formatList = toArray(getDefaultFormat<DateType>(format, picker, showTime, use12Hours));
250+
const formatList = toArray(
251+
getDefaultFormat<DateType>(format, picker, showTime, use12Hours, locale),
252+
);
251253

252254
// Active picker
253255
const [mergedActivePickerIndex, setMergedActivePickerIndex] = useMergedState<0 | 1>(0, {

‎src/interface.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export type Locale = {
88
monthBeforeYear?: boolean;
99
yearFormat: string;
1010
monthFormat?: string;
11+
weekFormat?: string;
1112
quarterFormat?: string;
1213

1314
today: string;

‎src/utils/uiUtil.ts

Lines changed: 25 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import KeyCode from 'rc-util/lib/KeyCode';
22
import raf from 'rc-util/lib/raf';
33
import isVisible from 'rc-util/lib/Dom/isVisible';
44
import type { GenerateConfig } from '../generate';
5-
import type { CustomFormat, PanelMode, PickerMode } from '../interface';
5+
import type { CustomFormat, PanelMode, PickerMode, Locale } from '../interface';
66

77
const scrollIds = new Map<HTMLElement, number>();
88

@@ -149,36 +149,33 @@ export function getDefaultFormat<DateType>(
149149
picker: PickerMode | undefined,
150150
showTime: boolean | object | undefined,
151151
use12Hours: boolean | undefined,
152+
locale: Locale,
152153
) {
153-
let mergedFormat = format;
154-
if (!mergedFormat) {
155-
switch (picker) {
156-
case 'time':
157-
mergedFormat = use12Hours ? 'hh:mm:ss a' : 'HH:mm:ss';
158-
break;
159-
160-
case 'week':
161-
mergedFormat = 'gggg-wo';
162-
break;
163-
164-
case 'month':
165-
mergedFormat = 'YYYY-MM';
166-
break;
167-
168-
case 'quarter':
169-
mergedFormat = 'YYYY-[Q]Q';
170-
break;
171-
172-
case 'year':
173-
mergedFormat = 'YYYY';
174-
break;
175-
176-
default:
177-
mergedFormat = showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD';
178-
}
154+
if (format) return format;
155+
156+
if (picker === 'time') {
157+
return use12Hours ? 'hh:mm:ss a' : 'HH:mm:ss';
158+
}
159+
160+
if (picker === 'week') {
161+
return locale.weekFormat ?? 'gggg-wo';
162+
}
163+
164+
if (picker === 'month') {
165+
return locale.monthFormat ?? 'YYYY-MM';
166+
}
167+
168+
if (picker === 'quarter') {
169+
return locale.quarterFormat ?? 'YYYY-[Q]Q';
170+
}
171+
172+
if (picker === 'year') {
173+
return locale.yearFormat ?? 'YYYY';
179174
}
180175

181-
return mergedFormat;
176+
return showTime
177+
? locale.dateTimeFormat ?? 'YYYY-MM-DD HH:mm:ss'
178+
: locale.dateFormat ?? 'YYYY-MM-DD';
182179
}
183180

184181
export function getInputSize<DateType>(

‎tests/__snapshots__/picker.spec.tsx.snap

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,113 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`Picker.Basic Picker format by locale date 1`] = `
4+
<div
5+
class="rc-picker"
6+
>
7+
<div
8+
class="rc-picker-input"
9+
>
10+
<input
11+
autocomplete="off"
12+
readonly=""
13+
size="16"
14+
title="2000 年 1 月 1 日"
15+
value="2000 年 1 月 1 日"
16+
/>
17+
</div>
18+
</div>
19+
`;
20+
21+
exports[`Picker.Basic Picker format by locale dateTime 1`] = `
22+
<div
23+
class="rc-picker"
24+
>
25+
<div
26+
class="rc-picker-input"
27+
>
28+
<input
29+
autocomplete="off"
30+
readonly=""
31+
size="28"
32+
title="2000 年 1 月 1 日 0 时 0 分 0 秒"
33+
value="2000 年 1 月 1 日 0 时 0 分 0 秒"
34+
/>
35+
</div>
36+
</div>
37+
`;
38+
39+
exports[`Picker.Basic Picker format by locale month 1`] = `
40+
<div
41+
class="rc-picker"
42+
>
43+
<div
44+
class="rc-picker-input"
45+
>
46+
<input
47+
autocomplete="off"
48+
readonly=""
49+
size="12"
50+
title="2000 年 1 月"
51+
value="2000 年 1 月"
52+
/>
53+
</div>
54+
</div>
55+
`;
56+
57+
exports[`Picker.Basic Picker format by locale quarter 1`] = `
58+
<div
59+
class="rc-picker"
60+
>
61+
<div
62+
class="rc-picker-input"
63+
>
64+
<input
65+
autocomplete="off"
66+
readonly=""
67+
size="13"
68+
title="2000 年 1 季度"
69+
value="2000 年 1 季度"
70+
/>
71+
</div>
72+
</div>
73+
`;
74+
75+
exports[`Picker.Basic Picker format by locale week 1`] = `
76+
<div
77+
class="rc-picker"
78+
>
79+
<div
80+
class="rc-picker-input"
81+
>
82+
<input
83+
autocomplete="off"
84+
readonly=""
85+
size="12"
86+
title="2000 年 52 周"
87+
value="2000 年 52 周"
88+
/>
89+
</div>
90+
</div>
91+
`;
92+
93+
exports[`Picker.Basic Picker format by locale year 1`] = `
94+
<div
95+
class="rc-picker"
96+
>
97+
<div
98+
class="rc-picker-input"
99+
>
100+
<input
101+
autocomplete="off"
102+
readonly=""
103+
size="12"
104+
title="2000 年"
105+
value="2000 年"
106+
/>
107+
</div>
108+
</div>
109+
`;
110+
3111
exports[`Picker.Basic icon 1`] = `
4112
<div
5113
class="rc-picker-input"

‎tests/picker.spec.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1061,4 +1061,31 @@ describe('Picker.Basic', () => {
10611061
// Reset locale
10621062
moment.locale('en');
10631063
});
1064+
1065+
describe('Picker format by locale', () => {
1066+
const myLocale = {
1067+
...zhCN,
1068+
dateFormat: 'YYYY 年 M 月 D 日',
1069+
dateTimeFormat: 'YYYY 年 M 月 D 日 H 时 m 分 s 秒',
1070+
weekFormat: 'YYYY 年 W 周',
1071+
monthFormat: 'YYYY 年 M 月',
1072+
quarterFormat: 'YYYY 年 Q 季度',
1073+
yearFormat: 'YYYY 年',
1074+
};
1075+
1076+
const date = moment('2000-01-01', 'YYYY-MM-DD');
1077+
function matchPicker(name: string, props?: any) {
1078+
it(name, () => {
1079+
const { container } = render(<MomentPicker value={date} {...props} locale={myLocale} />);
1080+
expect(container.firstChild).toMatchSnapshot();
1081+
});
1082+
}
1083+
1084+
matchPicker('date');
1085+
matchPicker('dateTime', { showTime: true });
1086+
matchPicker('week', { picker: 'week' });
1087+
matchPicker('month', { picker: 'month' });
1088+
matchPicker('quarter', { picker: 'quarter' });
1089+
matchPicker('year', { picker: 'year' });
1090+
});
10641091
});

0 commit comments

Comments
 (0)