add box width

components/transfer/index.jsx

@@ -144,7 +144,7 @@ class Transfer extends Component {
   }
 
   render() {
-    const { prefixCls, titles, operations, showSearch, searchPlaceholder, body, footer } = this.props;
+    const { prefixCls, titles, operations, showSearch, searchPlaceholder, body, footer, boxWidth } = this.props;
     const { leftFilter, rightFilter, leftCheckedKeys, rightCheckedKeys } = this.state;
 
     const { leftDataSource, rightDataSource } = this.splitDataSource();
@@ -158,6 +158,7 @@ class Transfer extends Component {
       <List title={titles[0]}
             dataSource={leftDataSource}
             filter={leftFilter}
+            width={boxWidth}
             checkedKeys={leftCheckedKeys}
             checkStatus={leftCheckStatus}
             handleFilter={this.handleFilter.bind(this, 'left')}
@@ -176,6 +177,7 @@ class Transfer extends Component {
       <List title={titles[1]}
             dataSource={rightDataSource}
             filter={rightFilter}
+            width={boxWidth}
             checkedKeys={rightCheckedKeys}
             checkStatus={rightCheckStatus}
             handleFilter={this.handleFilter.bind(this, 'right')}
@@ -199,6 +201,7 @@ Transfer.defaultProps = {
   render: noop,
   targetKeys: [],
   onChange: noop,
+  boxWidth: 160,
   titles: ['源列表', '目的列表'],
   operations: [],
   showSearch: false,
@@ -213,6 +216,7 @@ Transfer.propTypes = {
   render: PropTypes.func,
   targetKeys: PropTypes.array,
   onChange: PropTypes.func,
+  boxWidth: PropTypes.number,
   titles: PropTypes.array,
   operations: PropTypes.array,
   showSearch: PropTypes.bool,

components/transfer/index.md

@@ -22,6 +22,7 @@
 | render | 渲染每行数据 | Function(record)  | false    |
 | targetKeys | 显示在右侧框的数据 | Array  | [] |
 | onChange | 变化时回调函数 | Function(e:Event) |  |
+| boxWidth | 单个穿梭框的宽度 | Number | 160 |
 | titles | 标题集合,顺序从左至右 | Array | ['源列表', '目的列表'] |
 | operations | 操作文案集合,顺序从上至下 | Array | [] |
 | showSearch | 是否显示搜索框 | Boolean | false |

components/transfer/list.jsx

@@ -57,13 +57,13 @@ class TransferList extends Component {
 
   render() {
     let self = this;
-    const { prefixCls, dataSource, title, filter, checkedKeys, checkStatus, body, footer, showSearch } = this.props;
+    const { prefixCls, dataSource, title, filter, width, checkedKeys, checkStatus, body, footer, showSearch } = this.props;
 
     // Custom Layout
     const footerDom = footer({...this.props});
     const bodyDom = body({...this.props});
 
-    return (<div className={prefixCls} {...this.props}>
+    return (<div className={prefixCls} {...this.props} style={{width: width}}>
       <div className={`${prefixCls}-header`}>
         {this.renderCheckbox({
           prefixCls: 'ant-tree',
@@ -109,6 +109,7 @@ TransferList.defaultProps = {
   dataSource: [],
   showSearch: false,
   searchPlaceholder: '',
+  width: 160,
   handleFilter: noop,
   handleSelect: noop,
   handleSelectAll: noop,
@@ -123,6 +124,7 @@ TransferList.propTypes = {
   dataSource: PropTypes.array,
   showSearch: PropTypes.bool,
   searchPlaceholder: PropTypes.string,
+  width: PropTypes.number,
   handleFilter: PropTypes.func,
   handleSelect: PropTypes.func,
   handleSelectAll: PropTypes.func,