forked from ant-design/ant-design
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: ConfigProvider support locale (ant-design#17816)
* ConfigProvider support locale * update docs * update category * clean up * moving locale * update check script * update related code * add test case * demo link * update doc * hide one rule of md with eslint * update error link
- Loading branch information
Showing
123 changed files
with
2,548 additions
and
2,101 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,187 @@ | ||
| --- | ||
| order: 1 | ||
| title: | ||
| zh-CN: 国际化 | ||
| en-US: Locale | ||
| --- | ||
|
|
||
| ## zh-CN | ||
|
|
||
| 此处列出 Ant Design 中需要国际化支持的组件，你可以在演示里切换语言。 | ||
|
|
||
| ## en-US | ||
|
|
||
| Components which need localization support are listed here, you can toggle the language in the demo. | ||
|
|
||
| ```jsx | ||
| import { | ||
| ConfigProvider, | ||
| Pagination, | ||
| DatePicker, | ||
| TimePicker, | ||
| Calendar, | ||
| Popconfirm, | ||
| Table, | ||
| Modal, | ||
| Button, | ||
| Select, | ||
| Transfer, | ||
| Radio, | ||
| } from 'antd'; | ||
| import zhCN from 'antd/lib/locale/zh_CN'; | ||
| import moment from 'moment'; | ||
| import 'moment/locale/zh-cn'; | ||
|
|
||
| moment.locale('en'); | ||
|
|
||
| const { Option } = Select; | ||
| const { RangePicker } = DatePicker; | ||
|
|
||
| const columns = [ | ||
| { | ||
| title: 'Name', | ||
| dataIndex: 'name', | ||
| filters: [ | ||
| { | ||
| text: 'filter1', | ||
| value: 'filter1', | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| title: 'Age', | ||
| dataIndex: 'age', | ||
| }, | ||
| ]; | ||
|
|
||
| class Page extends React.Component { | ||
| state = { | ||
| visible: false, | ||
| }; | ||
|
|
||
| showModal = () => { | ||
| this.setState({ visible: true }); | ||
| }; | ||
|
|
||
| hideModal = () => { | ||
| this.setState({ visible: false }); | ||
| }; | ||
|
|
||
| render() { | ||
| const info = () => { | ||
| Modal.info({ | ||
| title: 'some info', | ||
| content: 'some info', | ||
| }); | ||
| }; | ||
| const confirm = () => { | ||
| Modal.confirm({ | ||
| title: 'some info', | ||
| content: 'some info', | ||
| }); | ||
| }; | ||
| return ( | ||
| <div className="locale-components"> | ||
| <div className="example"> | ||
| <Pagination defaultCurrent={1} total={50} showSizeChanger /> | ||
| </div> | ||
| <div className="example"> | ||
| <Select showSearch style={{ width: 200 }}> | ||
| <Option value="jack">jack</Option> | ||
| <Option value="lucy">lucy</Option> | ||
| </Select> | ||
| <DatePicker /> | ||
| <TimePicker /> | ||
| <RangePicker style={{ width: 200 }} /> | ||
| </div> | ||
| <div className="example"> | ||
| <Button type="primary" onClick={this.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> | ||
| </div> | ||
| <div className="example"> | ||
| <Transfer dataSource={[]} showSearch targetKeys={[]} render={item => item.title} /> | ||
| </div> | ||
| <div style={{ width: 319, border: '1px solid #d9d9d9', borderRadius: 4 }}> | ||
| <Calendar fullscreen={false} value={moment()} /> | ||
| </div> | ||
| <div className="example"> | ||
| <Table dataSource={[]} columns={columns} /> | ||
| </div> | ||
| <Modal title="Locale Modal" visible={this.state.visible} onCancel={this.hideModal}> | ||
| <p>Locale Modal</p> | ||
| </Modal> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| class App extends React.Component { | ||
| constructor() { | ||
| super(); | ||
| this.state = { | ||
| locale: null, | ||
| }; | ||
| } | ||
|
|
||
| changeLocale = e => { | ||
| const localeValue = e.target.value; | ||
| this.setState({ locale: localeValue }); | ||
| if (!localeValue) { | ||
| moment.locale('en'); | ||
| } else { | ||
| moment.locale('zh-cn'); | ||
| } | ||
| }; | ||
|
|
||
| render() { | ||
| const { locale } = this.state; | ||
| return ( | ||
| <div> | ||
| <div className="change-locale"> | ||
| <span style={{ marginRight: 16 }}>Change locale of components: </span> | ||
| <Radio.Group defaultValue={undefined} onChange={this.changeLocale}> | ||
| <Radio.Button key="en" value={undefined}> | ||
| English | ||
| </Radio.Button> | ||
| <Radio.Button key="cn" value={zhCN}> | ||
| 中文 | ||
| </Radio.Button> | ||
| </Radio.Group> | ||
| </div> | ||
| <ConfigProvider locale={locale}> | ||
| <Page | ||
| key={locale ? locale.locale : 'en' /* Have to refresh for production environment */} | ||
| /> | ||
| </ConfigProvider> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| ReactDOM.render(<App />, mountNode); | ||
| ``` | ||
|
|
||
| ```css | ||
| .locale-components { | ||
| border-top: 1px solid #d9d9d9; | ||
| padding-top: 16px; | ||
| } | ||
|
|
||
| .example { | ||
| margin: 16px 0; | ||
| } | ||
|
|
||
| .example > * { | ||
| margin-right: 8px; | ||
| } | ||
|
|
||
| .change-locale { | ||
| margin-bottom: 16px; | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,42 +1,3 @@ | ||
| import Pagination from 'rc-pagination/lib/locale/ar_EG'; | ||
| import DatePicker from '../date-picker/locale/ar_EG'; | ||
| import TimePicker from '../time-picker/locale/ar_EG'; | ||
| import Calendar from '../calendar/locale/ar_EG'; | ||
| import locale from '../locale/ar_EG'; | ||
|
|
||
| export default { | ||
| locale: 'ar', | ||
| Pagination, | ||
| DatePicker, | ||
| TimePicker, | ||
| Calendar, | ||
| Table: { | ||
| filterTitle: 'الفلاتر', | ||
| filterConfirm: 'تأكيد', | ||
| filterReset: 'إعادة ضبط', | ||
| selectAll: 'اختيار الكل', | ||
| selectInvert: 'إلغاء الاختيار', | ||
| }, | ||
| Modal: { | ||
| okText: 'تأكيد', | ||
| cancelText: 'إلغاء', | ||
| justOkText: 'تأكيد', | ||
| }, | ||
| Popconfirm: { | ||
| okText: 'تأكيد', | ||
| cancelText: 'إلغاء', | ||
| }, | ||
| Transfer: { | ||
| searchPlaceholder: 'ابحث هنا', | ||
| itemUnit: 'عنصر', | ||
| itemsUnit: 'عناصر', | ||
| }, | ||
| Upload: { | ||
| uploading: 'جاري الرفع...', | ||
| removeFile: 'احذف الملف', | ||
| uploadError: 'مشكلة فى الرفع', | ||
| previewFile: 'استعرض الملف', | ||
| }, | ||
| Empty: { | ||
| description: 'لا توجد بيانات', | ||
| }, | ||
| }; | ||
| export default locale; |
Oops, something went wrong.