modify api

components/transfer/demo/basic.md

@@ -7,23 +7,9 @@
 ---
 
 ````jsx
-import { Transfer, Button, Menu, Dropdown, Icon } from 'antd';
+import { Transfer, Button } from 'antd';
 const container = document.getElementById('components-transfer-demo-basic');
 
-const menu = <Menu>
-  <Menu.Item>
-    <a target="_blank" href="http://www.alipay.com/">编辑</a>
-  </Menu.Item>
-</Menu>;
-
-function makeDropdown(item) {
-  return <Dropdown overlay={menu}>
-           <Button type="small">
-             {item.title} <Icon type="down" />
-           </Button>
-         </Dropdown>;
-}
-
 const App = React.createClass({
   getInitialState() {
     return {
@@ -51,7 +37,7 @@ const App = React.createClass({
   },
   render() {
     return <div>
-      <Transfer dataSource={this.state.mockData} extraRender={makeDropdown} />
+      <Transfer dataSource={this.state.mockData} />
       <Button onClick={this.getMock}>刷新数据</Button>
     </div>;
   }

components/transfer/index.jsx

@@ -24,7 +24,6 @@ class Transfer extends Component {
   }
 
   moveTo(direction) {
-    // TODO: 将新移动的元素置顶: 存index至state中
     const { filterKey } = this.props;
     let { dataSource } = this.state;
     if ( direction === 'right' ) {
@@ -89,11 +88,11 @@ class Transfer extends Component {
     const filterText = e.target.value;
     if ( direction === 'left') {
       this.setState({
-        'leftFilter': filterText
+        'leftFilter': filterText,
       });
     } else {
       this.setState({
-        'rightFilter': filterText
+        'rightFilter': filterText,
       });
     }
   }
@@ -117,7 +116,7 @@ class Transfer extends Component {
   }
 
   render() {
-    const { prefixCls, leftConfig, rightConfig, filterKey, extraRender } = this.props;
+    const { prefixCls, leftConfig, rightConfig, filterKey, showSearch, header, body, footer } = this.props;
     const { dataSource, leftFilter, rightFilter } = this.state;
 
     let leftDataSource = [];
@@ -142,7 +141,12 @@ class Transfer extends Component {
             handleFilter={this.handleFilter.bind(this, 'left')}
             handleSelect={this.handleSelect.bind(this)}
             handleSelectAll={this.handleSelectAll.bind(this, 'left')}
-            extraRender={extraRender}/>
+            position={'left'}
+            showSearch={showSearch}
+            header={header}
+            body={body}
+            footer={footer}
+      />
       <Operation rightArrowText={leftConfig.operationText} moveToRight={this.moveTo.bind(this, 'right')}
                  leftArrowText={rightConfig.operationText} moveToLeft={this.moveTo.bind(this, 'left')} />
       <List style={{ width: '40%', display: 'inline-block'}} config={rightConfig} dataSource={rightDataSource}
@@ -150,7 +154,12 @@ class Transfer extends Component {
             handleFilter={this.handleFilter.bind(this, 'right')}
             handleSelect={this.handleSelect.bind(this)}
             handleSelectAll={this.handleSelectAll.bind(this, 'right')}
-            extraRender={extraRender} />
+            position={'right'}
+            showSearch={showSearch}
+            header={header}
+            body={body}
+            footer={footer}
+      />
     </div>;
   }
 }
@@ -175,9 +184,9 @@ Transfer.defaultProps = {
   },
   showSearch: false,
   searchPlaceholder: '请输入搜索内容',
-  extraRender: noop,
-  footer: ()=> {
-  },
+  header: noop,
+  footer: noop,
+  body: noop,
 };
 
 Transfer.propTypes = {

components/transfer/list.jsx

@@ -69,36 +69,41 @@ class TransferList extends Component {
   }
 
   render() {
-    const { prefixCls, config, footer, extraRender, dataSource, filter } = this.props;
+    const { prefixCls, config, header, footer, dataSource, filter, customLayout } = this.props;
 
     let globalCheckStatus = this.getGlobalCheckStatus();
 
+    const headerDom = header({...this.props, globalCheckStatus});
+    const footerDom = footer({...this.props, globalCheckStatus});
+    const layout = customLayout({...this.props, globalCheckStatus});
+
     return (<div className={prefixCls} {...this.props}>
-      <div className={`${prefixCls}-header`}>
+      { headerDom ? <div className={`${prefixCls}-header`}>
+        { headerDom }
+      </div> : <div className={`${prefixCls}-header`}>
         {this.renderCheckbox({
           prefixCls: 'ant-tree',
           checked: globalCheckStatus === 'all',
           checkPart: globalCheckStatus === 'part',
           checkable: <span className={`ant-tree-checkbox-inner`}></span>
         })} {dataSource.length} 条{config.title}
-      </div>
+      </div> }
       <div className={`${prefixCls}-body`}>
-        <Search onChange={this.handleFilter.bind(this)} value={filter} />
-        <ul>
-          {dataSource.map((item)=> {
-            return <li>
-              <label>
-                <Checkbox checked={item.checked} onChange={this.handleSelect.bind(this, item)} />
-                { item.title }
-              </label>
-              <div className="extra-holder">
-                {extraRender(item)}
-              </div>
-            </li>;})}
-        </ul>
+        { layout ? layout : <div>
+          <Search onChange={this.handleFilter.bind(this)} value={filter} />
+          <ul>
+            {dataSource.map((item)=> {
+              return <li>
+                <label>
+                  <Checkbox checked={item.checked} onChange={this.handleSelect.bind(this, item)} />
+                  { item.title }
+                </label>
+              </li>;})}
+          </ul>
+        </div>}
       </div>
-      { footer ? <div className={`${prefixCls}-footer`}>
-        { footer }
+      { footerDom ? <div className={`${prefixCls}-footer`}>
+        { footerDom }
       </div> : null }
     </div>);
   }
@@ -107,15 +112,20 @@ class TransferList extends Component {
 TransferList.defaultProps = {
   prefixCls: 'ant-transfer-list',
   dataSource: [],
+  defaultDataSource: [],
+  handleFilter: noop,
+  handleSelect: noop,
   onChange: noop,
-  footer: [],
-  extraRender: noop,
+  //advanced
+  header: noop,
+  footer: noop,
+  customLayout: noop,
 };
 
 TransferList.propTypes = {
   prefixCls: PropTypes.string,
   dataSource: PropTypes.array,
-  footer: PropTypes.array,
+  footer: PropTypes.func,
   searchPlaceholder: PropTypes.string,
   handleFilter: PropTypes.func,
   handleSelect: PropTypes.func,