From d8f599fd3a1c5a5ae693e19b84977a96bc61294d Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 3 Mar 2016 16:28:02 +0800 Subject: [PATCH 1/9] Add LocalProvider, ref #1055 --- components/locale-provider/demo/basic.md | 29 ++++++++++++++++++++++++ components/locale-provider/en_US.js | 3 +++ components/locale-provider/index.jsx | 20 ++++++++++++++++ components/locale-provider/index.md | 21 +++++++++++++++++ components/pagination/demo/locale.md | 8 ++++--- components/pagination/index.jsx | 12 ++++++++++ index.js | 1 + scripts/demo.js | 2 ++ 8 files changed, 93 insertions(+), 3 deletions(-) create mode 100644 components/locale-provider/demo/basic.md create mode 100644 components/locale-provider/en_US.js create mode 100644 components/locale-provider/index.jsx create mode 100644 components/locale-provider/index.md diff --git a/components/locale-provider/demo/basic.md b/components/locale-provider/demo/basic.md new file mode 100644 index 0000000000..b38653f8c4 --- /dev/null +++ b/components/locale-provider/demo/basic.md @@ -0,0 +1,29 @@ +# 国际化 + +- order: 1 + +用 `LocaleProvider` 包裹你的应用，并引用对应的语言包。 + +--- + +````jsx +import { Pagination, DatePicker, LocaleProvider } from 'antd'; +import enUS from 'antd/lib/locale-provider/en_US'; + +const App = React.createClass({ + render() { + return ( +
+ + +
+ ); + } +}); + +ReactDOM.render( + + + +, mountNode); +```` diff --git a/components/locale-provider/en_US.js b/components/locale-provider/en_US.js new file mode 100644 index 0000000000..e7ed5181f1 --- /dev/null +++ b/components/locale-provider/en_US.js @@ -0,0 +1,3 @@ +module.exports = { + Pagination: require('rc-pagination/lib/locale/en_US'), +}; diff --git a/components/locale-provider/index.jsx b/components/locale-provider/index.jsx new file mode 100644 index 0000000000..65b0795ee4 --- /dev/null +++ b/components/locale-provider/index.jsx @@ -0,0 +1,20 @@ +import React from 'react'; + +export default class LocaleProvider extends React.Component { + getChildContext() { + return { + locale: this.props.locale, + }; + } + render() { + return React.cloneElement(this.props.children); + } +} + +LocaleProvider.childContextTypes = { + locale: React.PropTypes.object, +}; + +LocaleProvider.propTypes = { + locale: React.PropTypes.object, +}; diff --git a/components/locale-provider/index.md b/components/locale-provider/index.md new file mode 100644 index 0000000000..fef081902b --- /dev/null +++ b/components/locale-provider/index.md @@ -0,0 +1,21 @@ +# LocaleProvider + +- category: Components +- chinese: 国际化 +- cols: 1 + +--- + +为组件文案提供统一的国际化配置功能。 + +## API + +Wrap your App with `LocaleProvider` once. + +```jsx + + + +``` + +### Add a language diff --git a/components/pagination/demo/locale.md b/components/pagination/demo/locale.md index d617906b86..484583496c 100644 --- a/components/pagination/demo/locale.md +++ b/components/pagination/demo/locale.md @@ -7,10 +7,12 @@ --- ````jsx -import { Pagination } from 'antd'; -import enUS from 'antd/lib/pagination/locale/en_US'; +import { Pagination, LocaleProvider } from 'antd'; +import enUS from 'antd/lib/locale-provider/en_US'; ReactDOM.render( - , + + + , mountNode); ```` diff --git a/components/pagination/index.jsx b/components/pagination/index.jsx index 1bbf3ac0cf..3f5ba452a7 100644 --- a/components/pagination/index.jsx +++ b/components/pagination/index.jsx @@ -16,6 +16,13 @@ class AntPagination extends React.Component { let className = this.props.className; let selectComponentClass = Select; + let locale; + if (this.context.locale && this.context.locale.Pagination) { + locale = this.context.locale.Pagination; + } else { + locale = this.props.locale; + } + if (this.props.size === 'small') { className += ' mini'; selectComponentClass = MiniSelect; @@ -25,6 +32,7 @@ class AntPagination extends React.Component { ); } @@ -36,4 +44,8 @@ AntPagination.defaultProps = { prefixCls: 'ant-pagination', }; +AntPagination.contextTypes = { + locale: React.PropTypes.object, +}; + export default AntPagination; diff --git a/index.js b/index.js index 8d81517e75..695ace85ac 100644 --- a/index.js +++ b/index.js @@ -46,6 +46,7 @@ const antd = { Transfer: require('./components/transfer'), Cascader: require('./components/cascader'), Card: require('./components/card'), + LocaleProvider: require('./components/locale-provider'), }; module.exports = antd; diff --git a/scripts/demo.js b/scripts/demo.js index 62278e0bd6..9aad398c00 100644 --- a/scripts/demo.js +++ b/scripts/demo.js @@ -61,6 +61,8 @@ antd.Pagination.locale = { zh_CN: require('../components/pagination/locale/zh_CN'), }; +antd.LocaleProvider['en_US'] = require('../components/locale-provider/en_US'), + InstantClickChangeFns.push(function () { // auto complete for components var Select = antd.Select; From 99b58e67ecdc44b08f8b349718b8445b517199c9 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 3 Mar 2016 17:43:38 +0800 Subject: [PATCH 2/9] Add other component for locale --- components/date-picker/PickerMixin.jsx | 15 ++++- components/locale-provider/demo/all.md | 70 ++++++++++++++++++++++++ components/locale-provider/demo/basic.md | 3 +- components/locale-provider/en_US.js | 16 ++++++ components/modal/Modal.jsx | 17 ++++-- components/pagination/demo/locale.md | 18 ------ components/popconfirm/index.jsx | 10 +++- components/table/index.jsx | 16 +++++- components/time-picker/index.jsx | 15 ++++- 9 files changed, 147 insertions(+), 33 deletions(-) create mode 100644 components/locale-provider/demo/all.md delete mode 100644 components/pagination/demo/locale.md diff --git a/components/date-picker/PickerMixin.jsx b/components/date-picker/PickerMixin.jsx index 837fba5e01..59d62220ed 100644 --- a/components/date-picker/PickerMixin.jsx +++ b/components/date-picker/PickerMixin.jsx @@ -1,14 +1,23 @@ +import React from 'react'; import objectAssign from 'object-assign'; import defaultLocale from './locale/zh_CN'; import DateTimeFormat from 'gregorian-calendar-format'; import GregorianCalendar from 'gregorian-calendar'; export default { + contextTypes: { + locale: React.PropTypes.object, + }, + getLocale() { + let locale = defaultLocale; + if (this.context.locale && this.context.locale.DatePicker) { + locale = this.context.locale.DatePicker; + } // 统一合并为完整的 Locale - let locale = objectAssign({}, defaultLocale, this.props.locale); - locale.lang = objectAssign({}, defaultLocale.lang, this.props.locale.lang); - return locale; + const result = objectAssign({}, locale, this.props.locale); + result.lang = objectAssign({}, locale.lang, this.props.locale.lang); + return result; }, getFormatter() { diff --git a/components/locale-provider/demo/all.md b/components/locale-provider/demo/all.md new file mode 100644 index 0000000000..a9a3f43461 --- /dev/null +++ b/components/locale-provider/demo/all.md @@ -0,0 +1,70 @@ +# 所有组件 + +- order: 2 + +此处列出 Ant Design 中需要国际化支持的组件。 + +--- + +````jsx +import { LocaleProvider, Pagination, DatePicker, TimePicker, Popconfirm, Table, Modal, Button } from 'antd'; +import enUS from 'antd/lib/locale-provider/en_US'; + +const columns = [{ + title: 'Name', + dataIndex: 'name', + render() { + return 'Luck'; + }, + filters: [{ + text: 'filter1', + value: 'filter1', + }, { + text: 'filter2', + value: 'filter2', + }], +}, { + title: 'Age', + dataIndex: 'age', + render() { + return 18; + }, +}]; + +const App = React.createClass({ + getInitialState() { + return { + visible: false, + }; + }, + showModal() { + this.setState({ visible: true }); + }, + hideModal() { + this.setState({ visible: false }); + }, + render() { + return ( +
+ + + + + Click to confirm + + + + +

Locale Modal

+ + + ); + } +}); + +ReactDOM.render( + + + +, mountNode); +```` diff --git a/components/locale-provider/demo/basic.md b/components/locale-provider/demo/basic.md index b38653f8c4..8137c42259 100644 --- a/components/locale-provider/demo/basic.md +++ b/components/locale-provider/demo/basic.md @@ -7,14 +7,13 @@ --- ````jsx -import { Pagination, DatePicker, LocaleProvider } from 'antd'; +import { Pagination, LocaleProvider } from 'antd'; import enUS from 'antd/lib/locale-provider/en_US'; const App = React.createClass({ render() { return (
-
); diff --git a/components/locale-provider/en_US.js b/components/locale-provider/en_US.js index e7ed5181f1..fe83a74721 100644 --- a/components/locale-provider/en_US.js +++ b/components/locale-provider/en_US.js @@ -1,3 +1,19 @@ module.exports = { Pagination: require('rc-pagination/lib/locale/en_US'), + DatePicker: require('../date-picker/locale/en_US'), + TimePicker: require('../time-picker/locale/en_US'), + Table: { + filterTitle: 'Filter Menu', + filterConfirm: 'OK', + filterReset: 'Reset', + emptyText: 'No Data', + }, + Modal: { + okText: 'OK', + cancelText: 'Cancel', + }, + Popconfirm: { + okText: 'OK', + cancelText: 'Cancel', + }, }; diff --git a/components/modal/Modal.jsx b/components/modal/Modal.jsx index 7bf8f2a311..c0fa7f8a44 100644 --- a/components/modal/Modal.jsx +++ b/components/modal/Modal.jsx @@ -14,8 +14,6 @@ let AntModal = React.createClass({ prefixCls: 'ant-modal', onOk: noop, onCancel: noop, - okText: '确定', - cancelText: '取消', width: 520, transitionName: 'zoom', maskAnimation: 'fade', @@ -24,6 +22,10 @@ let AntModal = React.createClass({ }; }, + contextTypes: { + locale: React.PropTypes.object, + }, + handleCancel(e) { this.props.onCancel(e); }, @@ -52,19 +54,26 @@ let AntModal = React.createClass({ render() { let props = this.props; + + let { okText, cancelText } = props; + if (this.context.locale && this.context.locale.Modal) { + okText = okText || this.context.locale.Modal.okText; + cancelText = cancelText || this.context.locale.Modal.cancelText; + } + let defaultFooter = [ , ]; let footer = props.footer || defaultFooter; diff --git a/components/pagination/demo/locale.md b/components/pagination/demo/locale.md deleted file mode 100644 index 484583496c..0000000000 --- a/components/pagination/demo/locale.md +++ /dev/null @@ -1,18 +0,0 @@ -# 国际化 - -- order: 7 - -通过 `locale` 配置时区、语言等, 默认支持 en_US, zh_CN - ---- - -````jsx -import { Pagination, LocaleProvider } from 'antd'; -import enUS from 'antd/lib/locale-provider/en_US'; - -ReactDOM.render( - - - , - mountNode); -```` diff --git a/components/popconfirm/index.jsx b/components/popconfirm/index.jsx index 79e21f0747..ab104993c6 100644 --- a/components/popconfirm/index.jsx +++ b/components/popconfirm/index.jsx @@ -39,6 +39,9 @@ export default React.createClass({ onVisibleChange() {}, }; }, + contextTypes: { + locale: React.PropTypes.object, + }, componentWillReceiveProps(nextProps) { if ('visible' in nextProps) { this.setState({ visible: nextProps.visible }); @@ -62,7 +65,12 @@ export default React.createClass({ } }, render() { - const { title, okText, cancelText, placement, overlayStyle, trigger, ...restProps } = this.props; + const { title, placement, overlayStyle, trigger, ...restProps } = this.props; + let { okText, cancelText } = this.props; + if (this.context.locale && this.context.locale.Popconfirm) { + okText = okText || this.context.locale.Popconfirm.okText; + cancelText = cancelText || this.context.locale.Popconfirm.cancelText; + } const overlay = (
diff --git a/components/table/index.jsx b/components/table/index.jsx index 32ffc4d205..da7a6ca5ed 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -74,6 +74,10 @@ let AntTable = React.createClass({ locale: React.PropTypes.object, }, + contextTypes: { + locale: React.PropTypes.object, + }, + getDefaultSelection() { if (!this.props.rowSelection || !this.props.rowSelection.getCheckboxProps) { return []; @@ -83,6 +87,14 @@ let AntTable = React.createClass({ .map((record, rowIndex) => this.getRecordKey(record, rowIndex)); }, + getLocale() { + let locale = {}; + if (this.context.locale && this.context.locale.Table) { + locale = this.context.locale.Table; + } + return objectAssign({}, defaultLocale, locale, this.props.locale); + }, + componentWillReceiveProps(nextProps) { if (('pagination' in nextProps) && nextProps.pagination !== false) { this.setState({ @@ -405,7 +417,7 @@ let AntTable = React.createClass({ }, renderColumnsDropdown(columns) { - let locale = objectAssign({}, defaultLocale, this.props.locale); + const locale = this.getLocale(); return columns.map((originColumn, i) => { let column = objectAssign({}, originColumn); let key = this.getColumnKey(column, i); @@ -563,7 +575,7 @@ let AntTable = React.createClass({ const data = this.getCurrentPageData(); let columns = this.renderRowSelection(); const expandIconAsCell = this.props.expandedRowRender && this.props.expandIconAsCell !== false; - const locale = objectAssign({}, defaultLocale, this.props.locale); + const locale = this.getLocale(); const classString = classNames({ [`ant-table-${this.props.size}`]: true, diff --git a/components/time-picker/index.jsx b/components/time-picker/index.jsx index aecc2e727f..91da1a1e3b 100644 --- a/components/time-picker/index.jsx +++ b/components/time-picker/index.jsx @@ -27,6 +27,10 @@ const AntTimePicker = React.createClass({ }; }, + contextTypes: { + locale: React.PropTypes.object, + }, + getFormatter() { return new DateTimeFormat(this.props.format); }, @@ -68,14 +72,19 @@ const AntTimePicker = React.createClass({ }, getLocale() { + let locale = defaultLocale; + if (this.context.locale && this.context.locale.TimePicker) { + locale = this.context.locale.TimePicker; + } // 统一合并为完整的 Locale - return objectAssign({}, defaultLocale, this.props.locale); + return objectAssign({}, locale, this.props.locale); }, render() { + const locale = this.getLocale(); const props = objectAssign({}, this.props); props.placeholder = ('placeholder' in this.props) - ? props.placeholder : this.getLocale().placeholder; + ? props.placeholder : locale.placeholder; if (props.defaultValue) { props.defaultValue = this.parseTimeFromValue(props.defaultValue); } else { @@ -99,7 +108,7 @@ const AntTimePicker = React.createClass({ From 193eb14423176140e99adffafed204b29ccb1f0b Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 3 Mar 2016 21:00:38 +0800 Subject: [PATCH 3/9] update demo --- components/locale-provider/demo/all.md | 44 ++++++++++++++++---------- components/locale-provider/index.md | 2 +- components/popconfirm/index.jsx | 6 ++-- 3 files changed, 31 insertions(+), 21 deletions(-) diff --git a/components/locale-provider/demo/all.md b/components/locale-provider/demo/all.md index a9a3f43461..79a9a8a01a 100644 --- a/components/locale-provider/demo/all.md +++ b/components/locale-provider/demo/all.md @@ -7,31 +7,23 @@ --- ````jsx -import { LocaleProvider, Pagination, DatePicker, TimePicker, Popconfirm, Table, Modal, Button } from 'antd'; +import { LocaleProvider, Pagination, DatePicker, TimePicker, Popconfirm, Table, Modal, Button, Select } from 'antd'; import enUS from 'antd/lib/locale-provider/en_US'; +const Option = Select.Option; const columns = [{ title: 'Name', dataIndex: 'name', - render() { - return 'Luck'; - }, filters: [{ text: 'filter1', value: 'filter1', - }, { - text: 'filter2', - value: 'filter2', }], }, { title: 'Age', dataIndex: 'age', - render() { - return 18; - }, }]; -const App = React.createClass({ +const Page = React.createClass({ getInitialState() { return { visible: false, @@ -62,9 +54,29 @@ const App = React.createClass({ } }); -ReactDOM.render( - - - -, mountNode); +const App = React.createClass({ + getInitialState() { + return { + locale: enUS, + }; + }, + changeLocale(locale) { + this.setState({ locale }); + }, + render() { + return ( +
+ +
+ +
+
+ ); + } +}); + +ReactDOM.render(, mountNode); ```` diff --git a/components/locale-provider/index.md b/components/locale-provider/index.md index fef081902b..a4439f4cf9 100644 --- a/components/locale-provider/index.md +++ b/components/locale-provider/index.md @@ -6,7 +6,7 @@ --- -为组件文案提供统一的国际化配置功能。 +为组件内建文案提供统一的国际化支持。 ## API diff --git a/components/popconfirm/index.jsx b/components/popconfirm/index.jsx index ab104993c6..d8532f2f8a 100644 --- a/components/popconfirm/index.jsx +++ b/components/popconfirm/index.jsx @@ -34,8 +34,6 @@ export default React.createClass({ overlayStyle: {}, onConfirm: noop, onCancel: noop, - okText: '确定', - cancelText: '取消', onVisibleChange() {}, }; }, @@ -79,8 +77,8 @@ export default React.createClass({ {title}

- - + +
From 2482140d2f1d8bbce90e0354ea7d780464e7a19d Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 5 Mar 2016 16:39:27 +0800 Subject: [PATCH 4/9] Change context locale name --- components/date-picker/PickerMixin.jsx | 6 +++--- components/locale-provider/demo/all.md | 5 +++-- components/locale-provider/index.jsx | 6 +++--- components/modal/Modal.jsx | 8 ++++---- components/pagination/index.jsx | 6 +++--- components/popconfirm/index.jsx | 8 ++++---- components/table/index.jsx | 6 +++--- components/time-picker/index.jsx | 6 +++--- 8 files changed, 26 insertions(+), 25 deletions(-) diff --git a/components/date-picker/PickerMixin.jsx b/components/date-picker/PickerMixin.jsx index 59d62220ed..f936dabe69 100644 --- a/components/date-picker/PickerMixin.jsx +++ b/components/date-picker/PickerMixin.jsx @@ -6,13 +6,13 @@ import GregorianCalendar from 'gregorian-calendar'; export default { contextTypes: { - locale: React.PropTypes.object, + antLocale: React.PropTypes.object, }, getLocale() { let locale = defaultLocale; - if (this.context.locale && this.context.locale.DatePicker) { - locale = this.context.locale.DatePicker; + if (this.context.antLocale && this.context.antLocale.DatePicker) { + locale = this.context.antLocale.DatePicker; } // 统一合并为完整的 Locale const result = objectAssign({}, locale, this.props.locale); diff --git a/components/locale-provider/demo/all.md b/components/locale-provider/demo/all.md index 79a9a8a01a..e556c54e93 100644 --- a/components/locale-provider/demo/all.md +++ b/components/locale-provider/demo/all.md @@ -7,7 +7,8 @@ --- ````jsx -import { LocaleProvider, Pagination, DatePicker, TimePicker, Popconfirm, Table, Modal, Button, Select } from 'antd'; +import { LocaleProvider, Pagination, DatePicker, TimePicker, + Popconfirm, Table, Modal, Button, Select } from 'antd'; import enUS from 'antd/lib/locale-provider/en_US'; const Option = Select.Option; @@ -68,7 +69,7 @@ const App = React.createClass({
- diff --git a/components/locale-provider/index.jsx b/components/locale-provider/index.jsx index 65b0795ee4..5a92bf9b77 100644 --- a/components/locale-provider/index.jsx +++ b/components/locale-provider/index.jsx @@ -3,16 +3,16 @@ import React from 'react'; export default class LocaleProvider extends React.Component { getChildContext() { return { - locale: this.props.locale, + antLocale: this.props.locale, }; } render() { - return React.cloneElement(this.props.children); + return React.Children.only(this.props.children); } } LocaleProvider.childContextTypes = { - locale: React.PropTypes.object, + antLocale: React.PropTypes.object, }; LocaleProvider.propTypes = { diff --git a/components/modal/Modal.jsx b/components/modal/Modal.jsx index c0fa7f8a44..b2b228b922 100644 --- a/components/modal/Modal.jsx +++ b/components/modal/Modal.jsx @@ -23,7 +23,7 @@ let AntModal = React.createClass({ }, contextTypes: { - locale: React.PropTypes.object, + antLocale: React.PropTypes.object, }, handleCancel(e) { @@ -56,9 +56,9 @@ let AntModal = React.createClass({ let props = this.props; let { okText, cancelText } = props; - if (this.context.locale && this.context.locale.Modal) { - okText = okText || this.context.locale.Modal.okText; - cancelText = cancelText || this.context.locale.Modal.cancelText; + if (this.context.antLocale && this.context.antLocale.Modal) { + okText = okText || this.context.antLocale.Modal.okText; + cancelText = cancelText || this.context.antLocale.Modal.cancelText; } let defaultFooter = [ diff --git a/components/pagination/index.jsx b/components/pagination/index.jsx index 3f5ba452a7..725d20a0a5 100644 --- a/components/pagination/index.jsx +++ b/components/pagination/index.jsx @@ -17,8 +17,8 @@ class AntPagination extends React.Component { let selectComponentClass = Select; let locale; - if (this.context.locale && this.context.locale.Pagination) { - locale = this.context.locale.Pagination; + if (this.context.antLocale && this.context.antLocale.Pagination) { + locale = this.context.antLocale.Pagination; } else { locale = this.props.locale; } @@ -45,7 +45,7 @@ AntPagination.defaultProps = { }; AntPagination.contextTypes = { - locale: React.PropTypes.object, + antLocale: React.PropTypes.object, }; export default AntPagination; diff --git a/components/popconfirm/index.jsx b/components/popconfirm/index.jsx index d8532f2f8a..887ea73d59 100644 --- a/components/popconfirm/index.jsx +++ b/components/popconfirm/index.jsx @@ -38,7 +38,7 @@ export default React.createClass({ }; }, contextTypes: { - locale: React.PropTypes.object, + antLocale: React.PropTypes.object, }, componentWillReceiveProps(nextProps) { if ('visible' in nextProps) { @@ -65,9 +65,9 @@ export default React.createClass({ render() { const { title, placement, overlayStyle, trigger, ...restProps } = this.props; let { okText, cancelText } = this.props; - if (this.context.locale && this.context.locale.Popconfirm) { - okText = okText || this.context.locale.Popconfirm.okText; - cancelText = cancelText || this.context.locale.Popconfirm.cancelText; + if (this.context.antLocale && this.context.antLocale.Popconfirm) { + okText = okText || this.context.antLocale.Popconfirm.okText; + cancelText = cancelText || this.context.antLocale.Popconfirm.cancelText; } const overlay = (
diff --git a/components/table/index.jsx b/components/table/index.jsx index da7a6ca5ed..dc82598d12 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -75,7 +75,7 @@ let AntTable = React.createClass({ }, contextTypes: { - locale: React.PropTypes.object, + antLocale: React.PropTypes.object, }, getDefaultSelection() { @@ -89,8 +89,8 @@ let AntTable = React.createClass({ getLocale() { let locale = {}; - if (this.context.locale && this.context.locale.Table) { - locale = this.context.locale.Table; + if (this.context.antLocale && this.context.antLocale.Table) { + locale = this.context.antLocale.Table; } return objectAssign({}, defaultLocale, locale, this.props.locale); }, diff --git a/components/time-picker/index.jsx b/components/time-picker/index.jsx index 91da1a1e3b..5240390c4d 100644 --- a/components/time-picker/index.jsx +++ b/components/time-picker/index.jsx @@ -28,7 +28,7 @@ const AntTimePicker = React.createClass({ }, contextTypes: { - locale: React.PropTypes.object, + antLocale: React.PropTypes.object, }, getFormatter() { @@ -73,8 +73,8 @@ const AntTimePicker = React.createClass({ getLocale() { let locale = defaultLocale; - if (this.context.locale && this.context.locale.TimePicker) { - locale = this.context.locale.TimePicker; + if (this.context.antLocale && this.context.antLocale.TimePicker) { + locale = this.context.antLocale.TimePicker; } // 统一合并为完整的 Locale return objectAssign({}, locale, this.props.locale); From 83f96e5f191faca6f73c1ecdc3749f6a434dd693 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 5 Mar 2016 17:14:45 +0800 Subject: [PATCH 5/9] Make LocalProvider compatible with Modal.xxx --- components/locale-provider/demo/all.md | 14 +++++++++++++ components/locale-provider/en_US.js | 1 + components/locale-provider/index.jsx | 11 +++++++++++ components/modal/confirm.jsx | 27 +++++++++++++++++++++----- 4 files changed, 48 insertions(+), 5 deletions(-) diff --git a/components/locale-provider/demo/all.md b/components/locale-provider/demo/all.md index e556c54e93..67c9a08ce7 100644 --- a/components/locale-provider/demo/all.md +++ b/components/locale-provider/demo/all.md @@ -37,6 +37,18 @@ const Page = React.createClass({ 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 (
@@ -50,6 +62,8 @@ const Page = React.createClass({

Locale Modal

 + +
); } diff --git a/components/locale-provider/en_US.js b/components/locale-provider/en_US.js index fe83a74721..72b0036b2f 100644 --- a/components/locale-provider/en_US.js +++ b/components/locale-provider/en_US.js @@ -11,6 +11,7 @@ module.exports = { Modal: { okText: 'OK', cancelText: 'Cancel', + justOkText: 'OK', }, Popconfirm: { okText: 'OK', diff --git a/components/locale-provider/index.jsx b/components/locale-provider/index.jsx index 5a92bf9b77..9588eb5eec 100644 --- a/components/locale-provider/index.jsx +++ b/components/locale-provider/index.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import { changeConfirmLocale } from '../modal/confirm'; export default class LocaleProvider extends React.Component { getChildContext() { @@ -6,6 +7,16 @@ export default class LocaleProvider extends React.Component { antLocale: this.props.locale, }; } + componentDidMount() { + this.componentDidUpdate(); + } + componentDidUpdate() { + const { locale } = this.props; + changeConfirmLocale(locale && locale.Modal); + } + componentWillUnMount() { + changeConfirmLocale(); + } render() { return React.Children.only(this.props.children); } diff --git a/components/modal/confirm.jsx b/components/modal/confirm.jsx index 28f95931db..036af82f11 100644 --- a/components/modal/confirm.jsx +++ b/components/modal/confirm.jsx @@ -5,8 +5,24 @@ import Icon from '../icon'; import Button from '../button'; import objectAssign from 'object-assign'; -export default function (config) { - const props = objectAssign({}, config || {}); +const defaultLocale = { + okText: '确定', + cancelText: '取消', + justOkText: '知道了', +}; + +let runtimeLocale = { ...defaultLocale }; + +export function changeConfirmLocale(newLocale) { + if (newLocale) { + objectAssign(runtimeLocale, newLocale); + } else { + runtimeLocale = defaultLocale; + } +} + +export default function confirm(config) { + const props = objectAssign({}, config); let div = document.createElement('div'); document.body.appendChild(div); @@ -22,12 +38,13 @@ export default function (config) { props.okCancel = true; } - props.okText = props.okText || (props.okCancel ? '确定' : '知道了'); - props.cancelText = props.cancelText || '取消'; + props.okText = props.okText || + (props.okCancel ? runtimeLocale.okText : runtimeLocale.justOkText); + props.cancelText = props.cancelText || runtimeLocale.cancelText; function close() { d.setState({ - visible: false + visible: false, }); ReactDOM.unmountComponentAtNode(div); div.parentNode.removeChild(div); From 95c1ead55b04b121d6c2679c888462aedad40695 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 7 Mar 2016 12:08:52 +0800 Subject: [PATCH 6/9] fix text --- components/modal/Modal.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/modal/Modal.jsx b/components/modal/Modal.jsx index b2b228b922..bd2274306b 100644 --- a/components/modal/Modal.jsx +++ b/components/modal/Modal.jsx @@ -66,14 +66,14 @@ let AntModal = React.createClass({ type="ghost" size="large" onClick={this.handleCancel}> - {cancelText || '确定'} + {cancelText || '取消'} , ]; let footer = props.footer || defaultFooter; From 2fa1d0f9a5fa3d0138f7946c5f5d0e9f6ee0020c Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 7 Mar 2016 14:52:14 +0800 Subject: [PATCH 7/9] Add component locale support for Transfer --- components/locale-provider/demo/all.md | 62 ++++++++++++++++++++------ components/locale-provider/en_US.js | 6 +++ components/transfer/index.jsx | 2 - components/transfer/index.md | 4 +- components/transfer/list.jsx | 40 ++++++++++++++--- 5 files changed, 89 insertions(+), 25 deletions(-) diff --git a/components/locale-provider/demo/all.md b/components/locale-provider/demo/all.md index 67c9a08ce7..1deada712b 100644 --- a/components/locale-provider/demo/all.md +++ b/components/locale-provider/demo/all.md @@ -8,7 +8,7 @@ ````jsx import { LocaleProvider, Pagination, DatePicker, TimePicker, - Popconfirm, Table, Modal, Button, Select } from 'antd'; + Popconfirm, Table, Modal, Button, Select, Transfer } from 'antd'; import enUS from 'antd/lib/locale-provider/en_US'; const Option = Select.Option; @@ -50,20 +50,34 @@ const Page = React.createClass({ }); }; return ( -
- - - - - Click to confirm - -
- +
+
+ +
+
+ + + + + + + Click to confirm + +
+
+ item.title} /> +
+
+
+

Locale Modal

 - - ); } @@ -81,13 +95,14 @@ const App = React.createClass({ render() { return (
- -
+
+ Change Locale:
+
); } @@ -95,3 +110,22 @@ const App = React.createClass({ ReactDOM.render(, 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; +} +```` diff --git a/components/locale-provider/en_US.js b/components/locale-provider/en_US.js index 72b0036b2f..9e5b243e76 100644 --- a/components/locale-provider/en_US.js +++ b/components/locale-provider/en_US.js @@ -17,4 +17,10 @@ module.exports = { okText: 'OK', cancelText: 'Cancel', }, + Transfer: { + notFoundContent: 'Not Found', + searchPlaceholder: 'Search here', + itemUnit: 'item', + itemsUnit: 'items', + }, }; diff --git a/components/transfer/index.jsx b/components/transfer/index.jsx index eef2f2b9e6..f57bfaf72c 100644 --- a/components/transfer/index.jsx +++ b/components/transfer/index.jsx @@ -223,8 +223,6 @@ Transfer.defaultProps = { titles: ['源列表', '目的列表'], operations: [], showSearch: false, - searchPlaceholder: '请输入搜索内容', - notFoundContent: 'Not Found', body: noop, footer: noop, }; diff --git a/components/transfer/index.md b/components/transfer/index.md index 51326c12f9..4f28a8e81e 100644 --- a/components/transfer/index.md +++ b/components/transfer/index.md @@ -27,6 +27,6 @@ | titles | 标题集合,顺序从左至右 | Array | ['源列表', '目的列表'] | | operations | 操作文案集合,顺序从上至下 | Array | [] | | showSearch | 是否显示搜索框 | Boolean | false | -| searchPlaceholder | 搜索框的默认值 | String | 请输入搜索的内容 | -| notFoundContent | 当列表为空时显示的内容 | React.node | 'Not Found' | +| searchPlaceholder | 搜索框的默认值 | String | '请输入搜索内容' | +| notFoundContent | 当列表为空时显示的内容 | React.node | '列表为空' | | footer | 底部渲染函数 | Function(props) | | | diff --git a/components/transfer/list.jsx b/components/transfer/list.jsx index 0b34cc2913..e22c0f8056 100644 --- a/components/transfer/list.jsx +++ b/components/transfer/list.jsx @@ -69,8 +69,10 @@ class TransferList extends Component { } render() { - const { prefixCls, dataSource, titleText, filter, checkedKeys, notFoundContent, - checkStatus, body, footer, showSearch, searchPlaceholder } = this.props; + const { prefixCls, dataSource, titleText, filter, checkedKeys, + checkStatus, body, footer, showSearch } = this.props; + + let { searchPlaceholder, notFoundContent } = this.props; // Custom Layout const footerDom = footer({ ...this.props }); @@ -95,6 +97,18 @@ class TransferList extends Component { ); }); + let unit = '条'; + if (this.context.antLocale && + this.context.antLocale.Transfer) { + unit = dataSource.length > 1 + ? this.context.antLocale.Transfer.itemsUnit + : this.context.antLocale.Transfer.itemUnit; + searchPlaceholder = searchPlaceholder + || this.context.antLocale.Transfer.searchPlaceholder; + notFoundContent = notFoundContent + || this.context.antLocale.Transfer.notFoundContent; + } + return (
@@ -103,8 +117,15 @@ class TransferList extends Component { checked: checkStatus === 'all', checkPart: checkStatus === 'part', checkable: - })}{(checkedKeys.length > 0 ? `${checkedKeys.length}/` : '') + dataSource.length} 条 - {titleText} + })} + + + {(checkedKeys.length > 0 ? `${checkedKeys.length}/` : '') + dataSource.length} {unit} + + + {titleText} + +
{ bodyDom ||
@@ -112,13 +133,15 @@ class TransferList extends Component {
: null } - {showItems.length > 0 ? showItems :
{notFoundContent}
} + {showItems.length > 0 + ? showItems + :
{notFoundContent || '列表为空'}
}
} { footerDom ?
@@ -133,7 +156,6 @@ TransferList.defaultProps = { dataSource: [], titleText: '', showSearch: false, - searchPlaceholder: '', handleFilter: noop, handleSelect: noop, handleSelectAll: noop, @@ -158,4 +180,8 @@ TransferList.propTypes = { footer: PropTypes.func, }; +TransferList.contextTypes = { + antLocale: React.PropTypes.object, +}; + export default TransferList; From 8b89313ffa23f6ef5518339b626d8f150f762602 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 7 Mar 2016 15:18:39 +0800 Subject: [PATCH 8/9] update locale-provider docs --- components/locale-provider/demo/all.md | 4 ++-- components/locale-provider/index.md | 25 ++++++++++++++++++++----- 2 files changed, 22 insertions(+), 7 deletions(-) diff --git a/components/locale-provider/demo/all.md b/components/locale-provider/demo/all.md index 1deada712b..6a5e5c6233 100644 --- a/components/locale-provider/demo/all.md +++ b/components/locale-provider/demo/all.md @@ -2,7 +2,7 @@ - order: 2 -此处列出 Ant Design 中需要国际化支持的组件。 +此处列出 Ant Design 中需要国际化支持的组件，你可以在演示里切换语言。 --- @@ -96,7 +96,7 @@ const App = React.createClass({ return (
- Change Locale: + Change locale of components: