Add other component for locale

components/date-picker/PickerMixin.jsx

+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() {

components/locale-provider/demo/all.md

+# 所有组件
+
+- 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 (
+      <div>
+        <Pagination defaultCurrent={1} total={50} showSizeChanger />
+        <DatePicker />
+        <TimePicker />
+        <Popconfirm title="Question?">
+          <a href="#">Click to confirm</a>
+        </Popconfirm>
+        <Table dataSource={[]} columns={columns} />
+        <Button type="primary" onClick={this.showModal}>Show Modal</Button>
+        <Modal title="Locale Modal" visible={this.state.visible} onCancel={this.hideModal}>
+          <p>Locale Modal</p>
+        </Modal>
+      </div>
+    );
+  }
+});
+
+ReactDOM.render(
+  <LocaleProvider locale={enUS}>
+    <App />
+  </LocaleProvider>
+, mountNode);
+````

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 (
       <div>
-        <DatePicker />
         <Pagination defaultCurrent={1} total={50} showSizeChanger />
       </div>
     );

components/locale-provider/en_US.js

 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',
+  },
 };

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 = [
       <Button key="cancel"
         type="ghost"
         size="large"
         onClick={this.handleCancel}>
-        {props.cancelText}
+        {cancelText || '确定'}
       </Button>,
       <Button key="confirm"
         type="primary"
         size="large"
         loading={props.confirmLoading}
         onClick={this.handleOk}>
-        {props.okText}
+        {okText || '取消'}
       </Button>
     ];
     let footer = props.footer || defaultFooter;

components/pagination/demo/locale.md

-# 国际化
-
-- order: 7
-
-通过 `locale` 配置时区、语言等, 默认支持 en_US, zh_CN
-
----
-
-````jsx
-import { Pagination, LocaleProvider } from 'antd';
-import enUS from 'antd/lib/locale-provider/en_US';
-
-ReactDOM.render(
-  <LocaleProvider locale={enUS}>
-    <Pagination defaultCurrent={1} total={50} />
-  </LocaleProvider>,
- mountNode);
-````

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 = (
       <div>
         <div className={`${prefixCls}-content`}>

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,

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({
       <TimePicker
         {...props}
         className={className}
-        locale={this.getLocale()}
+        locale={locale}
         formatter={this.getFormatter()}
         onChange={this.handleChange}
       />