Skip to content

Commit 8c35f1a

Browse files
author
泊淞
committed
feat(DatePicker2): suppert theme configuration
1 parent 13a13e5 commit 8c35f1a

File tree

6 files changed

+1018
-506
lines changed

6 files changed

+1018
-506
lines changed

‎.fusion

+1
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@
8686
"collapse": "lib/collapse/scss/variable.scss",
8787
"time-picker": "lib/time-picker/scss/variable.scss",
8888
"date-picker": "lib/date-picker/scss/variable.scss",
89+
"date-picker2": "lib/date-picker2/scss/variable.scss",
8990
"drawer": "lib/drawer/scss/variable.scss",
9091
"message": "lib/message/scss/variable.scss",
9192
"dialog": "lib/dialog/scss/variable.scss",

‎components/date-picker2/__docs__/theme/index.tsx

+284
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,284 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import dayjs, { ConfigType, Dayjs } from 'dayjs';
4+
import { Demo, DemoGroup, initDemo } from '../../../demo-helper';
5+
import DatePicker, { type RangePickerProps, type DatePickerProps } from '../../index';
6+
import ConfigProvider from '../../../config-provider';
7+
import zhCN from '../../../locale/zh-cn';
8+
import enUS from '../../../locale/en-us';
9+
import '../../../demo-helper/style';
10+
import '../../style';
11+
12+
const { RangePicker } = DatePicker;
13+
14+
const i18nMap = {
15+
'zh-cn': {
16+
datepicker: '日期选择',
17+
rangepicker: '日期范围选择',
18+
label: '标签：',
19+
normal: '普通',
20+
expandNormal: '普通展开',
21+
expandTime: '带时间展开',
22+
selected: '选中后',
23+
disabled: '禁用',
24+
disabledDate: '禁用某些日期',
25+
week: '星期',
26+
month: '月份',
27+
year: '年份',
28+
decade: '季度',
29+
},
30+
'en-us': {
31+
datepicker: 'Date Picker2',
32+
rangepicker: 'Range Picker2',
33+
label: 'Label',
34+
normal: 'Normal',
35+
expandNormal: 'Date Expanded',
36+
expandTime: 'Datetime Expanded',
37+
selected: 'Selected',
38+
disabled: 'Disabled',
39+
disabledDate: 'Disabled Date',
40+
week: 'Week',
41+
month: 'Month',
42+
year: 'Year',
43+
decade: 'Decade',
44+
},
45+
};
46+
47+
let startValue: ConfigType;
48+
let endValue: ConfigType;
49+
50+
class FunctionDemo extends React.Component<{
51+
locale: (typeof i18nMap)['en-us'];
52+
pickerRender: (
53+
locale: (typeof i18nMap)['en-us'],
54+
demoFunction: any,
55+
onFunctionChange: any,
56+
otherProps: any
57+
) => React.ReactNode;
58+
}> {
59+
state = {
60+
demoFunction: {
61+
label: {
62+
label: '内置标签',
63+
value: 'false',
64+
enum: [
65+
{ label: '显示', value: 'true' },
66+
{ label: '隐藏', value: 'false' },
67+
],
68+
},
69+
},
70+
};
71+
72+
onFunctionChange = (val: unknown) => {
73+
this.setState({
74+
demoFunction: val,
75+
});
76+
};
77+
78+
render() {
79+
const { locale, pickerRender } = this.props;
80+
const { demoFunction } = this.state;
81+
const hasLabel = demoFunction.label.value === 'true';
82+
83+
const otherProps: Record<string, unknown> = {
84+
popupContainer: (target: HTMLElement) => target.parentNode,
85+
};
86+
87+
if (hasLabel) {
88+
otherProps.label = locale.label;
89+
}
90+
91+
return pickerRender(locale, demoFunction, this.onFunctionChange, otherProps);
92+
}
93+
}
94+
95+
function renderDatePicker(
96+
locale: (typeof i18nMap)['en-us'],
97+
demoFunction: any,
98+
onFunctionChange: any,
99+
otherProps: DatePickerProps
100+
) {
101+
const disabledDate = function (date: Dayjs, mode: string) {
102+
switch (mode) {
103+
case 'date':
104+
return date.valueOf() <= dayjs().valueOf();
105+
case 'year':
106+
return date.year() < dayjs().year();
107+
case 'month':
108+
return date.year() * 100 + date.month() < dayjs().year() * 100 + dayjs().month();
109+
default:
110+
return false;
111+
}
112+
};
113+
114+
return (
115+
<Demo
116+
title={locale.datepicker}
117+
demoFunction={demoFunction}
118+
onFunctionChange={onFunctionChange}
119+
block
120+
>
121+
<DemoGroup label={locale.normal}>
122+
<DatePicker visible={false} {...otherProps} />
123+
</DemoGroup>
124+
125+
<DemoGroup label={locale.expandNormal} height="340px">
126+
<DatePicker
127+
value={startValue}
128+
visible
129+
popupProps={{ needAdjust: false }}
130+
{...otherProps}
131+
/>
132+
</DemoGroup>
133+
134+
<DemoGroup label={locale.expandTime} height="370px">
135+
<DatePicker
136+
value={startValue}
137+
visible
138+
showTime
139+
popupProps={{ needAdjust: false }}
140+
{...otherProps}
141+
/>
142+
</DemoGroup>
143+
144+
<DemoGroup label={locale.selected}>
145+
<DatePicker visible={false} value={startValue} {...otherProps} />
146+
</DemoGroup>
147+
148+
<DemoGroup label={locale.disabled}>
149+
<DatePicker disabled value={startValue} {...otherProps} />
150+
</DemoGroup>
151+
152+
<DemoGroup label={locale.disabledDate} height="300px">
153+
<DatePicker
154+
visible
155+
disabledDate={disabledDate}
156+
value={startValue}
157+
{...otherProps}
158+
/>
159+
</DemoGroup>
160+
<DemoGroup label={locale.week} height="300px">
161+
<DatePicker.WeekPicker visible value={startValue} {...otherProps} />
162+
</DemoGroup>
163+
164+
<DemoGroup label={locale.month} height="300px">
165+
<DatePicker.MonthPicker visible value={startValue} {...otherProps} />
166+
</DemoGroup>
167+
168+
<DemoGroup label={locale.year} height="300px">
169+
<DatePicker.YearPicker visible value={startValue} {...otherProps} />
170+
</DemoGroup>
171+
172+
<DemoGroup label={locale.decade} height="300px">
173+
<DatePicker.QuarterPicker visible value={startValue} {...otherProps} />
174+
</DemoGroup>
175+
</Demo>
176+
);
177+
}
178+
179+
function renderRangePicker(
180+
locale: (typeof i18nMap)['en-us'],
181+
demoFunction: any,
182+
onFunctionChange: any,
183+
otherProps: RangePickerProps
184+
) {
185+
const disabledDate = function (date: Dayjs, mode: string) {
186+
switch (mode) {
187+
case 'date':
188+
return date.valueOf() <= dayjs().valueOf();
189+
case 'year':
190+
return date.year() < dayjs().year();
191+
case 'month':
192+
return date.year() * 100 + date.month() < dayjs().year() * 100 + dayjs().month();
193+
default:
194+
return false;
195+
}
196+
};
197+
return (
198+
<Demo
199+
title={locale.rangepicker}
200+
demoFunction={demoFunction}
201+
onFunctionChange={onFunctionChange}
202+
>
203+
<DemoGroup label={locale.normal}>
204+
<RangePicker {...otherProps} />
205+
</DemoGroup>
206+
207+
<DemoGroup label={locale.expandNormal} height="370px">
208+
<RangePicker
209+
visible
210+
value={[startValue, endValue]}
211+
popupProps={{ needAdjust: false }}
212+
{...otherProps}
213+
/>
214+
</DemoGroup>
215+
216+
<DemoGroup label={locale.expandTime} height="370px">
217+
<RangePicker
218+
visible
219+
showTime
220+
value={[startValue, endValue]}
221+
popupProps={{ needAdjust: false }}
222+
{...otherProps}
223+
/>
224+
</DemoGroup>
225+
226+
<DemoGroup label={locale.selected}>
227+
<RangePicker value={[startValue, endValue]} visible={false} {...otherProps} />
228+
</DemoGroup>
229+
230+
<DemoGroup label={locale.disabled} height="370px">
231+
<RangePicker
232+
visible
233+
disabledDate={disabledDate}
234+
value={[startValue, endValue]}
235+
{...otherProps}
236+
/>
237+
</DemoGroup>
238+
239+
<DemoGroup label={locale.week} height="370px">
240+
<RangePicker visible value={[startValue, endValue]} mode="week" {...otherProps} />
241+
</DemoGroup>
242+
243+
<DemoGroup label={locale.month} height="300px">
244+
<RangePicker visible value={[startValue, endValue]} mode="month" {...otherProps} />
245+
</DemoGroup>
246+
247+
<DemoGroup label={locale.year} height="300px">
248+
<RangePicker visible value={[startValue, endValue]} mode="year" {...otherProps} />
249+
</DemoGroup>
250+
251+
<DemoGroup label={locale.decade} height="300px">
252+
<RangePicker
253+
visible
254+
value={[startValue, endValue]}
255+
mode="quarter"
256+
{...otherProps}
257+
/>
258+
</DemoGroup>
259+
</Demo>
260+
);
261+
}
262+
263+
function render(i18n: (typeof i18nMap)['en-us'], lang: string) {
264+
ReactDOM.render(
265+
<ConfigProvider locale={lang === 'en-us' ? enUS : zhCN}>
266+
<div className="demo-container">
267+
<FunctionDemo locale={i18n} pickerRender={renderDatePicker} />
268+
<FunctionDemo locale={i18n} pickerRender={renderRangePicker} />
269+
</div>
270+
</ConfigProvider>,
271+
document.getElementById('container')
272+
);
273+
}
274+
275+
window.renderDemo = function (lang = 'en-us') {
276+
dayjs.locale(lang);
277+
startValue = dayjs('2017-11-15 12:00:00', 'YYYY-MM-DD HH:mm:ss', true);
278+
endValue = dayjs('2017-12-15 12:00:00', 'YYYY-MM-DD HH:mm:ss', true);
279+
render(i18nMap[lang], lang);
280+
};
281+
282+
renderDemo();
283+
284+
initDemo('date-picker2');

0 commit comments

Comments
 (0)