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;