Add component locale support for Transfer

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 (
-      <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>
+      <div className="locale-components">
+        <div className="example">
+          <Pagination defaultCurrent={1} total={50} showSizeChanger />
+        </div>
+        <div className="example">
+          <DatePicker />
+          <TimePicker />
+          <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
+          titles={['', '']}
+          targetKeys={[]}
+          render={item => item.title} />
+        </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>
-        <Button onClick={info}>Show info</Button>
-        <Button onClick={confirm}>Show confirm</Button>
       </div>
     );
   }
@@ -81,13 +95,14 @@ const App = React.createClass({
   render() {
     return (
       <div>
-        <LocaleProvider locale={this.state.locale}><Page /></LocaleProvider>
-        <div>
+        <div className="change-locale">
+          <span>Change Locale: </span>
           <Select defaultValue={enUS} onChange={this.changeLocale} dropdownMatchSelectWidth={false}>
             <Option value={enUS}>English</Option>
             <Option value={null}>中文</Option>
           </Select>
         </div>
+        <LocaleProvider locale={this.state.locale}><Page /></LocaleProvider>
       </div>
     );
   }
@@ -95,3 +110,22 @@ const App = React.createClass({
 
 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;
+}
+````

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

components/transfer/index.jsx

@@ -223,8 +223,6 @@ Transfer.defaultProps = {
   titles: ['源列表', '目的列表'],
   operations: [],
   showSearch: false,
-  searchPlaceholder: '请输入搜索内容',
-  notFoundContent: 'Not Found',
   body: noop,
   footer: noop,
 };

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) |  |  |

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 (
       <div className={listCls} {...this.props}>
         <div className={`${prefixCls}-header`}>
@@ -103,8 +117,15 @@ class TransferList extends Component {
             checked: checkStatus === 'all',
             checkPart: checkStatus === 'part',
             checkable: <span className={'ant-transfer-checkbox-inner'}></span>
-          })}<span className={`${prefixCls}-header-selected`}><span>{(checkedKeys.length > 0 ? `${checkedKeys.length}/` : '') + dataSource.length} 条</span>
-          <span className={`${prefixCls}-header-title`}>{titleText}</span></span>
+          })}
+          <span className={`${prefixCls}-header-selected`}>
+            <span>
+              {(checkedKeys.length > 0 ? `${checkedKeys.length}/` : '') + dataSource.length} {unit}
+            </span>
+            <span className={`${prefixCls}-header-title`}>
+              {titleText}
+            </span>
+          </span>
         </div>
         { bodyDom ||
         <div className={ showSearch ? `${prefixCls}-body ${prefixCls}-body-with-search` : `${prefixCls}-body`}>
@@ -112,13 +133,15 @@ class TransferList extends Component {
             <Search prefixCls={`${prefixCls}-search`}
               onChange={this.handleFilter.bind(this)}
               handleClear={this.handleClear.bind(this)}
-              placeholder={searchPlaceholder}
+              placeholder={searchPlaceholder || '请输入搜索内容'}
               value={filter} />
           </div> : null }
           <Animate component="ul"
             transitionName={this.state.mounted ? `${prefixCls}-highlight` : ''}
             transitionLeave={false}>
-            {showItems.length > 0 ? showItems : <div className={`${prefixCls}-body-not-found`}>{notFoundContent}</div>}
+            {showItems.length > 0
+              ? showItems
+              : <div className={`${prefixCls}-body-not-found`}>{notFoundContent || '列表为空'}</div>}
           </Animate>
         </div>}
         { footerDom ? <div className={`${prefixCls}-footer`}>
@@ -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;