Skip to content

Commit

Permalink
feat(DatePicker2): suppert theme configuration
Browse files Browse the repository at this point in the history
  • Loading branch information
泊淞 committed Jan 9, 2025
1 parent 3b5569c commit 56cc3fa
Show file tree
Hide file tree
Showing 6 changed files with 1,018 additions and 506 deletions.
1 change: 1 addition & 0 deletions .fusion
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@
"collapse": "lib/collapse/scss/variable.scss",
"time-picker": "lib/time-picker/scss/variable.scss",
"date-picker": "lib/date-picker/scss/variable.scss",
"date-picker2": "lib/date-picker2/scss/variable.scss",
"drawer": "lib/drawer/scss/variable.scss",
"message": "lib/message/scss/variable.scss",
"dialog": "lib/dialog/scss/variable.scss",
Expand Down
284 changes: 284 additions & 0 deletions components/date-picker2/__docs__/theme/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,284 @@
import React from 'react';
import ReactDOM from 'react-dom';
import dayjs, { ConfigType, Dayjs } from 'dayjs';
import { Demo, DemoGroup, initDemo } from '../../../demo-helper';
import DatePicker, { type RangePickerProps, type DatePickerProps } from '../../index';
import ConfigProvider from '../../../config-provider';
import zhCN from '../../../locale/zh-cn';
import enUS from '../../../locale/en-us';
import '../../../demo-helper/style';
import '../../style';

const { RangePicker } = DatePicker;

const i18nMap = {
'zh-cn': {
datepicker: '日期选择',
rangepicker: '日期范围选择',
label: '标签：',
normal: '普通',
expandNormal: '普通展开',
expandTime: '带时间展开',
selected: '选中后',
disabled: '禁用',
disabledDate: '禁用某些日期',
week: '星期',
month: '月份',
year: '年份',
decade: '季度',
},
'en-us': {
datepicker: 'Date Picker2',
rangepicker: 'Range Picker2',
label: 'Label',
normal: 'Normal',
expandNormal: 'Date Expanded',
expandTime: 'Datetime Expanded',
selected: 'Selected',
disabled: 'Disabled',
disabledDate: 'Disabled Date',
week: 'Week',
month: 'Month',
year: 'Year',
decade: 'Decade',
},
};

let startValue: ConfigType;
let endValue: ConfigType;

class FunctionDemo extends React.Component<{
locale: (typeof i18nMap)['en-us'];
pickerRender: (
locale: (typeof i18nMap)['en-us'],
demoFunction: any,
onFunctionChange: any,
otherProps: any
) => React.ReactNode;
}> {
state = {
demoFunction: {
label: {
label: '内置标签',
value: 'false',
enum: [
{ label: '显示', value: 'true' },
{ label: '隐藏', value: 'false' },
],
},
},
};

onFunctionChange = (val: unknown) => {
this.setState({
demoFunction: val,
});
};

render() {
const { locale, pickerRender } = this.props;
const { demoFunction } = this.state;
const hasLabel = demoFunction.label.value === 'true';

const otherProps: Record<string, unknown> = {
popupContainer: (target: HTMLElement) => target.parentNode,
};

if (hasLabel) {
otherProps.label = locale.label;
}

return pickerRender(locale, demoFunction, this.onFunctionChange, otherProps);
}
}

function renderDatePicker(
locale: (typeof i18nMap)['en-us'],
demoFunction: any,
onFunctionChange: any,
otherProps: DatePickerProps
) {
const disabledDate = function (date: Dayjs, mode: string) {
switch (mode) {
case 'date':
return date.valueOf() <= dayjs().valueOf();
case 'year':
return date.year() < dayjs().year();
case 'month':
return date.year() * 100 + date.month() < dayjs().year() * 100 + dayjs().month();
default:
return false;
}
};

return (
<Demo
title={locale.datepicker}
demoFunction={demoFunction}
onFunctionChange={onFunctionChange}
block
>
<DemoGroup label={locale.normal}>
<DatePicker visible={false} {...otherProps} />
</DemoGroup>

<DemoGroup label={locale.expandNormal} height="340px">
<DatePicker
value={startValue}
visible
popupProps={{ needAdjust: false }}
{...otherProps}
/>
</DemoGroup>

<DemoGroup label={locale.expandTime} height="370px">
<DatePicker
value={startValue}
visible
showTime
popupProps={{ needAdjust: false }}
{...otherProps}
/>
</DemoGroup>

<DemoGroup label={locale.selected}>
<DatePicker visible={false} value={startValue} {...otherProps} />
</DemoGroup>

<DemoGroup label={locale.disabled}>
<DatePicker disabled value={startValue} {...otherProps} />
</DemoGroup>

<DemoGroup label={locale.disabledDate} height="300px">
<DatePicker
visible
disabledDate={disabledDate}
value={startValue}
{...otherProps}
/>
</DemoGroup>
<DemoGroup label={locale.week} height="300px">
<DatePicker.WeekPicker visible value={startValue} {...otherProps} />
</DemoGroup>

<DemoGroup label={locale.month} height="300px">
<DatePicker.MonthPicker visible value={startValue} {...otherProps} />
</DemoGroup>

<DemoGroup label={locale.year} height="300px">
<DatePicker.YearPicker visible value={startValue} {...otherProps} />
</DemoGroup>

<DemoGroup label={locale.decade} height="300px">
<DatePicker.QuarterPicker visible value={startValue} {...otherProps} />
</DemoGroup>
</Demo>
);
}

function renderRangePicker(
locale: (typeof i18nMap)['en-us'],
demoFunction: any,
onFunctionChange: any,
otherProps: RangePickerProps
) {
const disabledDate = function (date: Dayjs, mode: string) {
switch (mode) {
case 'date':
return date.valueOf() <= dayjs().valueOf();
case 'year':
return date.year() < dayjs().year();
case 'month':
return date.year() * 100 + date.month() < dayjs().year() * 100 + dayjs().month();
default:
return false;
}
};
return (
<Demo
title={locale.rangepicker}
demoFunction={demoFunction}
onFunctionChange={onFunctionChange}
>
<DemoGroup label={locale.normal}>
<RangePicker {...otherProps} />
</DemoGroup>

<DemoGroup label={locale.expandNormal} height="370px">
<RangePicker
visible
value={[startValue, endValue]}
popupProps={{ needAdjust: false }}
{...otherProps}
/>
</DemoGroup>

<DemoGroup label={locale.expandTime} height="370px">
<RangePicker
visible
showTime
value={[startValue, endValue]}
popupProps={{ needAdjust: false }}
{...otherProps}
/>
</DemoGroup>

<DemoGroup label={locale.selected}>
<RangePicker value={[startValue, endValue]} visible={false} {...otherProps} />
</DemoGroup>

<DemoGroup label={locale.disabled} height="370px">
<RangePicker
visible
disabledDate={disabledDate}
value={[startValue, endValue]}
{...otherProps}
/>
</DemoGroup>

<DemoGroup label={locale.week} height="370px">
<RangePicker visible value={[startValue, endValue]} mode="week" {...otherProps} />
</DemoGroup>

<DemoGroup label={locale.month} height="300px">
<RangePicker visible value={[startValue, endValue]} mode="month" {...otherProps} />
</DemoGroup>

<DemoGroup label={locale.year} height="300px">
<RangePicker visible value={[startValue, endValue]} mode="year" {...otherProps} />
</DemoGroup>

<DemoGroup label={locale.decade} height="300px">
<RangePicker
visible
value={[startValue, endValue]}
mode="quarter"
{...otherProps}
/>
</DemoGroup>
</Demo>
);
}

function render(i18n: (typeof i18nMap)['en-us'], lang: string) {
ReactDOM.render(
<ConfigProvider locale={lang === 'en-us' ? enUS : zhCN}>
<div className="demo-container">
<FunctionDemo locale={i18n} pickerRender={renderDatePicker} />
<FunctionDemo locale={i18n} pickerRender={renderRangePicker} />
</div>
</ConfigProvider>,
document.getElementById('container')
);
}

window.renderDemo = function (lang = 'en-us') {
dayjs.locale(lang);
startValue = dayjs('2017-11-15 12:00:00', 'YYYY-MM-DD HH:mm:ss', true);
endValue = dayjs('2017-12-15 12:00:00', 'YYYY-MM-DD HH:mm:ss', true);
render(i18nMap[lang], lang);
};

renderDemo();

initDemo('date-picker2');
Loading

0 comments on commit 56cc3fa

Please sign in to comment.