fix style

components/transfer/index.jsx

@@ -23,9 +23,21 @@ class Transfer extends Component {
     });
   }
 
+  checkDirection(direction) {
+    //const { filterKey } = this.props;
+    let { dataSource } = this.state;
+
+    dataSource.forEach((data) => {
+      //if ( !data[filterKey] && data.checked ) {
+      //}
+    });
+    return true;
+  }
+
   moveTo(direction) {
     const { filterKey } = this.props;
     let { dataSource } = this.state;
+    // TODO: 验证是否可点
     if ( direction === 'right' ) {
       dataSource.forEach((data) => {
        // 左边向右移动
@@ -122,6 +134,9 @@ class Transfer extends Component {
     let leftDataSource = [];
     let rightDataSource = [];
 
+    let leftActive = false;
+    let rightActive = false;
+
     dataSource.map((item)=> {
       // filter item
       if ( item[filterKey] ) {
@@ -136,25 +151,27 @@ class Transfer extends Component {
     });
 
     return <div className={prefixCls}>
-      <List style={{ width: '40%', display: 'inline-block'}} config={leftConfig} dataSource={leftDataSource}
+      <List config={leftConfig}
+            dataSource={leftDataSource}
             filter={leftFilter}
             handleFilter={this.handleFilter.bind(this, 'left')}
             handleSelect={this.handleSelect.bind(this)}
             handleSelectAll={this.handleSelectAll.bind(this, 'left')}
-            position={'left'}
+            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}
+      <Operation rightActive={rightActive} rightArrowText={leftConfig.operationText} moveToRight={this.moveTo.bind(this, 'right')}
+                 leftActive={leftActive} leftArrowText={rightConfig.operationText} moveToLeft={this.moveTo.bind(this, 'left')} />
+      <List config={rightConfig}
+            dataSource={rightDataSource}
             filter={rightFilter}
             handleFilter={this.handleFilter.bind(this, 'right')}
             handleSelect={this.handleSelect.bind(this)}
             handleSelectAll={this.handleSelectAll.bind(this, 'right')}
-            position={'right'}
+            position="right"
             showSearch={showSearch}
             header={header}
             body={body}

components/transfer/list.jsx

@@ -16,8 +16,8 @@ class TransferList extends Component {
     this.props.handleSelectAll(this.getGlobalCheckStatus());
   }
 
-  handleSelect(selectedItem, e) {
-    this.props.handleSelect(selectedItem, e.target.checked);
+  handleSelect(selectedItem) {
+    this.props.handleSelect(selectedItem, !selectedItem.checked);
   }
 
   handleFilter(e) {
@@ -69,13 +69,14 @@ class TransferList extends Component {
   }
 
   render() {
-    const { prefixCls, config, header, footer, dataSource, filter, customLayout } = this.props;
+    const { prefixCls, config, header, footer, dataSource, filter, body } = this.props;
 
     let globalCheckStatus = this.getGlobalCheckStatus();
 
+    // Custom Layout
     const headerDom = header({...this.props, globalCheckStatus});
     const footerDom = footer({...this.props, globalCheckStatus});
-    const layout = customLayout({...this.props, globalCheckStatus});
+    const bodyDom = body({...this.props, globalCheckStatus});
 
     return (<div className={prefixCls} {...this.props}>
       { headerDom ? <div className={`${prefixCls}-header`}>
@@ -86,22 +87,21 @@ class TransferList extends Component {
           checked: globalCheckStatus === 'all',
           checkPart: globalCheckStatus === 'part',
           checkable: <span className={`ant-tree-checkbox-inner`}></span>
-        })} {dataSource.length} 条{config.title}
+        })} {dataSource.length} 条
+        <span className={`${prefixCls}-header-title`}>{config.title}</span>
       </div> }
-      <div className={`${prefixCls}-body`}>
-        { 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>
+      { bodyDom ? bodyDom : <div className={`${prefixCls}-body`}>
+        <div className={`${prefixCls}-body-search-wrapper`}>
+          <Search className={`${prefixCls}-body-search-bar`} onChange={this.handleFilter.bind(this)} value={filter} />
+        </div>
+        <ul className="">
+          {dataSource.map((item)=> {
+            return <li onClick={this.handleSelect.bind(this, item)}>
+                <Checkbox checked={item.checked} />
+                { item.title }
+            </li>;})}
+        </ul>
+      </div>}
       { footerDom ? <div className={`${prefixCls}-footer`}>
         { footerDom }
       </div> : null }
@@ -119,7 +119,7 @@ TransferList.defaultProps = {
   //advanced
   header: noop,
   footer: noop,
-  customLayout: noop,
+  body: noop,
 };
 
 TransferList.propTypes = {

components/transfer/operation.jsx

@@ -6,11 +6,11 @@ function noop() {
 
 class TransferOperation extends Component {
   render() {
-    const { moveToLeft, moveToRight, leftArrowText, rightArrowText } = this.props;
+    const { moveToLeft, moveToRight, leftArrowText, rightArrowText, leftActive, rightActive, prefixCls } = this.props;
 
-    return <div style={{ width: '20%', display: 'inline-block'}}>
-      <Button onClick={moveToRight}>{rightArrowText + '>'}</Button>
-      <Button onClick={moveToLeft}>{'<' + leftArrowText}</Button>
+    return <div className={`${prefixCls}`}>
+      <Button style={{ 'margin-bottom': '4px' }} disabled={ !rightActive ? 'disabled' : false } onClick={moveToRight}>{rightArrowText + '>'}</Button>
+      <Button disabled={ !leftActive ? 'disabled' : false } onClick={moveToLeft}>{'<' + leftArrowText}</Button>
     </div>;
   }
 }

components/transfer/search.jsx

@@ -13,13 +13,13 @@ class Search extends Component {
   }
 
   render() {
-    const {placeholder, value} = this.props;
-    return <input placeholder={placeholder} className="ant-input" value={ value } ref="input" onChange={this.handleChange.bind(this)}/>;
+    const {placeholder, value, prefixCls} = this.props;
+    return <input placeholder={placeholder} className={ prefixCls + ' ant-input' } value={ value } ref="input" onChange={this.handleChange.bind(this)}/>;
   }
 }
 
 Search.defaultProps = {
-  prefixCls: 'ant-transfer-search',
+  prefixCls: 'ant-transfer-list-search',
   placeholder: '请输入搜索内容',
   onChange: noop,
   onDelete: noop,

style/components/transfer.less

@@ -5,38 +5,63 @@
   &-list {
 
     border: 1px solid #e9e9e9;
+    display: inline-block;
     border-radius: 6px;
+    width: 160px;
+    height: 191px;
 
     &-header {
-      padding: 13px 20px 14px 20px;
+      padding: 7px 14px;
       border-radius: 5px 5px 0 0;
       background: #fff;
       color: #666;
       border-bottom: 1px solid #e9e9e9;
+
+      &-title {
+        float: right;
+      }
     }
 
     &-body {
       font-size: 12px;
       line-height: 1.5;
-      height: 190px;
-      overflow-y: scroll;
+      position: relative;
+      padding-top: 30px;
+      height: 150px;
+
+      &-search-wrapper {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 28px;
+        padding: 4px;
+        width: 100%;
+
+        &:after {
+        //"\E631" cross-circle
+          content: "\E68C";
+          color: #ccc;
+          position: absolute;
+          top: 2px;
+          right: 2px;
+          font-family: "anticon";
+          width: 32px;
+          height: 32px;
+          line-height: 32px;
+          text-align: center;
+          font-size: 14px;
+        }
+
+      }
 
       ul {
+        height: 100%;
+        overflow: auto;
         li {
           padding: 7px 16px;
-
-          .extra-holder {
-            display: none;
-          }
-
           &:hover {
             cursor: pointer;
             background-color: #eef9fe;
-
-            .extra-holder {
-              float: right;
-              display: inline-block;
-            }
           }
         }
       }
@@ -49,4 +74,16 @@
       border-radius: 0 0 5px 5px;
     }
   }
+
+  &-operation {
+    display: inline-block;
+    overflow: hidden;
+    vertical-align: top;
+    margin: 80px 8px;
+
+    button {
+      float: left;
+      clear: both;
+    }
+  }
 }