update style

components/transfer/index.jsx

@@ -24,14 +24,25 @@ class Transfer extends Component {
   }
 
   checkDirection(direction) {
-    //const { filterKey } = this.props;
+    const { filterKey } = this.props;
     let { dataSource } = this.state;
 
-    dataSource.forEach((data) => {
-      //if ( !data[filterKey] && data.checked ) {
-      //}
-    });
-    return true;
+    let result = false;
+
+    if ( direction === 'right' ) {
+      dataSource.forEach((data) => {
+        if ( !data[filterKey] && data.checked ) {
+          result = true;
+        }
+      });
+    } else {
+      dataSource.forEach((data) => {
+        if ( data[filterKey] && data.checked ) {
+          result = true;
+        }
+      });
+    }
+    return result;
   }
 
   moveTo(direction) {
@@ -109,6 +120,18 @@ class Transfer extends Component {
     }
   }
 
+  handleClear(direction) {
+    if ( direction === 'left') {
+      this.setState({
+        'leftFilter': '',
+      });
+    } else {
+      this.setState({
+        'rightFilter': '',
+      });
+    }
+  }
+
   matchFilter(text, filterText) {
     const regex = new RegExp(filterText);
     return text.match(regex);
@@ -134,8 +157,8 @@ class Transfer extends Component {
     let leftDataSource = [];
     let rightDataSource = [];
 
-    let leftActive = false;
-    let rightActive = false;
+    let leftActive = this.checkDirection('left');
+    let rightActive = this.checkDirection('right');
 
     dataSource.map((item)=> {
       // filter item
@@ -155,6 +178,7 @@ class Transfer extends Component {
             dataSource={leftDataSource}
             filter={leftFilter}
             handleFilter={this.handleFilter.bind(this, 'left')}
+            handleClear={this.handleClear.bind(this, 'left')}
             handleSelect={this.handleSelect.bind(this)}
             handleSelectAll={this.handleSelectAll.bind(this, 'left')}
             position="left"
@@ -169,6 +193,7 @@ class Transfer extends Component {
             dataSource={rightDataSource}
             filter={rightFilter}
             handleFilter={this.handleFilter.bind(this, 'right')}
+            handleClear={this.handleClear.bind(this, 'right')}
             handleSelect={this.handleSelect.bind(this)}
             handleSelectAll={this.handleSelectAll.bind(this, 'right')}
             position="right"

components/transfer/list.jsx

@@ -24,6 +24,10 @@ class TransferList extends Component {
     this.props.handleFilter(e);
   }
 
+  handleClear() {
+    this.props.handleClear();
+  }
+
   getGlobalCheckStatus() {
     let { dataSource } = this.props;
 
@@ -92,7 +96,7 @@ class TransferList extends Component {
       </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} />
+          <Search className={`${prefixCls}-body-search-bar`} onChange={this.handleFilter.bind(this)} handleClear={this.handleClear.bind(this)} value={filter} />
         </div>
         <ul className="">
           {dataSource.map((item)=> {

components/transfer/search.jsx

@@ -14,7 +14,13 @@ class Search extends Component {
 
   render() {
     const {placeholder, value, prefixCls} = this.props;
-    return <input placeholder={placeholder} className={ prefixCls + ' ant-input' } value={ value } ref="input" onChange={this.handleChange.bind(this)}/>;
+    return <div>
+      <input placeholder={placeholder} className={ prefixCls + ' ant-input' } value={ value } ref="input" onChange={this.handleChange.bind(this)}/>
+      { value && value.length > 0 ?
+        <a href="javascirpt:;" className={ prefixCls + '-action' } onClick={this.props.handleClear}><i className="anticon anticon-cross-circle"></i></a>
+        : <span className={ prefixCls + '-action' }><i className="anticon anticon-search"></i></span>
+      }
+    </div>;
   }
 }
 

style/components/transfer.less

@@ -10,6 +10,20 @@
     width: 160px;
     height: 191px;
 
+    &-search {
+      &-action {
+        color: #ccc;
+        position: absolute;
+        top: 2px;
+        right: 2px;
+        width: 32px;
+        height: 32px;
+        line-height: 32px;
+        text-align: center;
+        font-size: 14px;
+      }
+    }
+
     &-header {
       padding: 7px 14px;
       border-radius: 5px 5px 0 0;
@@ -37,21 +51,6 @@
         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 {