mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 15:49:10 +08:00
141 lines
3.2 KiB
TypeScript
141 lines
3.2 KiB
TypeScript
import type { RadioChangeEvent } from 'antd';
|
|
import {
|
|
Button,
|
|
Calendar,
|
|
ConfigProvider,
|
|
DatePicker,
|
|
Modal,
|
|
Pagination,
|
|
Popconfirm,
|
|
Radio,
|
|
Select,
|
|
Space,
|
|
Table,
|
|
theme,
|
|
TimePicker,
|
|
Transfer,
|
|
} from 'antd';
|
|
import type { Locale } from 'antd/es/locale';
|
|
import enUS from 'antd/locale/en_US';
|
|
import zhCN from 'antd/locale/zh_CN';
|
|
import dayjs from 'dayjs';
|
|
import 'dayjs/locale/zh-cn';
|
|
import React, { useState } from 'react';
|
|
|
|
dayjs.locale('en');
|
|
|
|
const { Option } = Select;
|
|
const { RangePicker } = DatePicker;
|
|
|
|
const columns = [
|
|
{
|
|
title: 'Name',
|
|
dataIndex: 'name',
|
|
filters: [{ text: 'filter1', value: 'filter1' }],
|
|
},
|
|
{
|
|
title: 'Age',
|
|
dataIndex: 'age',
|
|
},
|
|
];
|
|
|
|
const Page: React.FC = () => {
|
|
const { token } = theme.useToken();
|
|
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const showModal = () => {
|
|
setOpen(true);
|
|
};
|
|
|
|
const hideModal = () => {
|
|
setOpen(false);
|
|
};
|
|
|
|
const info = () => {
|
|
Modal.info({
|
|
title: 'some info',
|
|
content: 'some info',
|
|
});
|
|
};
|
|
|
|
const confirm = () => {
|
|
Modal.confirm({
|
|
title: 'some info',
|
|
content: 'some info',
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Space
|
|
direction="vertical"
|
|
size={[0, 16]}
|
|
style={{ width: '100%', paddingTop: 16, borderTop: `1px solid #d9d9d9` }}
|
|
>
|
|
<Pagination defaultCurrent={1} total={50} showSizeChanger />
|
|
<Space wrap>
|
|
<Select showSearch style={{ width: 200 }}>
|
|
<Option value="jack">jack</Option>
|
|
<Option value="lucy">lucy</Option>
|
|
</Select>
|
|
<DatePicker />
|
|
<TimePicker />
|
|
<RangePicker style={{ width: 200 }} />
|
|
</Space>
|
|
<Space wrap>
|
|
<Button type="primary" onClick={showModal}>
|
|
Show Modal
|
|
</Button>
|
|
<Button onClick={info}>Show info</Button>
|
|
<Button onClick={confirm}>Show confirm</Button>
|
|
<Popconfirm title="Question?">
|
|
<a href="#">Click to confirm</a>
|
|
</Popconfirm>
|
|
</Space>
|
|
<Transfer dataSource={[]} showSearch targetKeys={[]} />
|
|
<div style={{ width: 320, border: `1px solid ${token.colorBorder}`, borderRadius: 8 }}>
|
|
<Calendar fullscreen={false} value={dayjs()} />
|
|
</div>
|
|
<Table dataSource={[]} columns={columns} />
|
|
<Modal title="Locale Modal" open={open} onCancel={hideModal}>
|
|
<p>Locale Modal</p>
|
|
</Modal>
|
|
</Space>
|
|
);
|
|
};
|
|
|
|
const App: React.FC = () => {
|
|
const [locale, setLocal] = useState<Locale>(enUS);
|
|
|
|
const changeLocale = (e: RadioChangeEvent) => {
|
|
const localeValue = e.target.value;
|
|
setLocal(localeValue);
|
|
if (!localeValue) {
|
|
dayjs.locale('en');
|
|
} else {
|
|
dayjs.locale('zh-cn');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div style={{ marginBottom: 16 }}>
|
|
<span style={{ marginRight: 16 }}>Change locale of components:</span>
|
|
<Radio.Group value={locale} onChange={changeLocale}>
|
|
<Radio.Button key="en" value={enUS}>
|
|
English
|
|
</Radio.Button>
|
|
<Radio.Button key="cn" value={zhCN}>
|
|
中文
|
|
</Radio.Button>
|
|
</Radio.Group>
|
|
</div>
|
|
<ConfigProvider locale={locale}>
|
|
<Page />
|
|
</ConfigProvider>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default App;
|