feat(Transfer): Support for disabling panel operations

alibaba-fusion · Nov 1, 2018 · 40f6743 · 40f6743
1 parent a30ab7d
commit 40f6743
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/docs/transfer/index.en-us.md b/docs/transfer/index.en-us.md
@@ -38,3 +38,5 @@ Move the items in two panels in an intuitive way to select.
 | listStyle           | custom list style                                                                                                                                                                                                                                                                                                                                                                                | Object              | -                                                                     |
 | sortable            | whether to allow drag and drop sort                                                                                                                                                                                                                                                                                                                                                                                     | Boolean             | false                                                                 |
 | onSort              | callback function triggered when dragging sort<br><br>**signatures**:<br>Function(value: Array, position: String) => void<br>**params**:<br>_value_: {Array} sorted value<br>_position_: {String} position of the sorted panel, 'left' or 'right'                                                                                                                                                                                                                        | Function            | -                                                                     |
+| leftDisabled        | disable left panel                                                                                                                                                                                                                                                                                                                                                                            | Boolean            | false                                                              |
+| rightDisabled       | disable right panel                                                                                                                                                                                                                                                                                                                                                                           | Boolean            | false                                                              |
diff --git a/docs/transfer/index.md b/docs/transfer/index.md
@@ -38,3 +38,5 @@
 | listStyle           | 左右面板列表自定义样式对象                                                                                                                                                                                                                                                                                                                                                                                | Object              | -                                                                     |
 | sortable            | 是否允许拖拽排序                                                                                                                                                                                                                                                                                                                                                                                     | Boolean             | false                                                                 |
 | onSort              | 拖拽排序时触发的回调函数<br><br>**签名**:<br>Function(value: Array, position: String) => void<br>**参数**:<br>_value_: {Array} 排序后的值<br>_position_: {String} 拖拽的面板位置，值为：left 或 right                                                                                                                                                                                                                         | Function            | () => {}                                                              |
+| leftDisabled        | 禁止左面板列表项向右移动                                                                                                                                                                                                                                                                                                                                                                             | Boolean            | false                                                              | 
+| rightDisabled       | 禁止右面板列表项向左移动                                                                                                                                                                                                                                                                                                                                                                             | Boolean            | false                                                              |
diff --git a/src/transfer/view/transfer.jsx b/src/transfer/view/transfer.jsx
@@ -397,14 +397,16 @@ class Transfer extends Component {
     renderCenter() {
         const { prefix, mode, operations, disabled } = this.props;
         const { leftCheckedValue, rightCheckedValue } = this.state;
+        const leftDisabled = this.props.leftDisabled || disabled;
+        const rightDisabled = this.props.rightDisabled || disabled;
 
         return (
             <div className={`${prefix}transfer-operations`}>
                 {mode === 'simple' ? <Icon className={`${prefix}transfer-move`} size="large" type="switch" /> : [
-                    <Button key="l2r" className={`${prefix}transfer-operation`} type={leftCheckedValue.length ? 'primary' : 'normal'} disabled={disabled || !leftCheckedValue.length} onClick={this.handleMoveItem.bind(this, 'right')}>
+                    <Button key="l2r" className={`${prefix}transfer-operation`} type={leftCheckedValue.length ? 'primary' : 'normal'} disabled={leftDisabled || !leftCheckedValue.length} onClick={this.handleMoveItem.bind(this, 'right')}>
                         {operations[0]}
                     </Button>,
-                    <Button key="r2l" className={`${prefix}transfer-operation`} type={rightCheckedValue.length ? 'primary' : 'normal'}  disabled={disabled || !rightCheckedValue.length} onClick={this.handleMoveItem.bind(this, 'left')}>
+                    <Button key="r2l" className={`${prefix}transfer-operation`} type={rightCheckedValue.length ? 'primary' : 'normal'}  disabled={rightDisabled || !rightCheckedValue.length} onClick={this.handleMoveItem.bind(this, 'left')}>
                         {operations[1]}
                     </Button>
                 ]}
@@ -419,6 +421,8 @@ class Transfer extends Component {
         const itemValues = dataSource.map(item => item.value);
         const leftDatasource = this.groupDatasource(this.leftValue, itemValues, dataSource);
         const rightDatasource = this.groupDatasource(value, itemValues, dataSource);
+        const leftDisabled = this.props.leftDisabled || disabled;
+        const rightDisabled = this.props.rightDisabled || disabled;
         const panelProps = {
             prefix,
             mode,
@@ -445,12 +449,14 @@ class Transfer extends Component {
                 <TransferPanel {...panelProps}
                     position="left"
                     dataSource={leftDatasource}
+                    disabled={leftDisabled}
                     value={leftCheckedValue}
                     title={titles[0]} />
                 {this.renderCenter()}
                 <TransferPanel {...panelProps}
                     position="right"
                     dataSource={rightDatasource}
+                    disabled={rightDisabled}
                     value={rightCheckedValue}
                     title={titles[1]} />
             </div>