fix(Select): select all doesn't work under control mode

alibaba-fusion · Mar 14, 2019 · a1519d2 · a1519d2
1 parent d19f167
commit a1519d2
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 21 deletions.
diff --git a/docs/config-provider/demo/error-boundary.md b/docs/config-provider/demo/error-boundary.md
@@ -38,7 +38,7 @@ const fallbackUI = (props) => {
     return <span style={{color: 'red'}}>{error.toString()}</span>;
 };
 
-export default class App extends React.Component {
+class App extends React.Component {
     state = {
         throwError: false
     };

diff --git a/docs/select/demo/multiple.md b/docs/select/demo/multiple.md
@@ -32,11 +32,33 @@ function handleChange(value) {
     console.log(value);
 }
 
+
+class Demo extends React.Component{
+  constructor(props) {
+    super(props)
+    this.state = {
+      value: []
+    }
+  }
+
+  handleChange = (value) => {
+    this.setState({value})
+  }
+
+  render() {
+    return (
+    <Select hasSelectAll value={this.state.value}  mode="multiple" onChange={this.handleChange} dataSource={dataSource} style={{width: 200}} />)
+  }
+}
+
+
 ReactDOM.render(
     <div>
         <Select mode="multiple" onChange={handleChange} dataSource={dataSource} style={{width: 200}} />
         &nbsp;&nbsp;&nbsp;&nbsp;
         <Select hasSelectAll mode="multiple" onChange={handleChange} dataSource={dataSource} style={{width: 200}} />
+        &nbsp;&nbsp;&nbsp;&nbsp;
+        <Demo />
     </div>
 , mountNode);
 ````
diff --git a/src/select/base.jsx b/src/select/base.jsx
@@ -176,6 +176,8 @@ export default class Base extends React.Component {
 
     componentWillReceiveProps(nextProps) {
         if ('value' in nextProps) {
+            this.updateSelectAllYet(nextProps.value);
+
             this.setState({
                 value: nextProps.value,
             });
@@ -305,29 +307,33 @@ export default class Base extends React.Component {
         }
     }
 
+    updateSelectAllYet(value) {
+        // multiple mode
+        // is current state select all or not
+        this.selectAllYet = false;
+        if (Array.isArray(value)) {
+            const selectAllValues = this.dataStore
+                .getEnableDS()
+                .map(item => item.value);
+
+            if (selectAllValues.length <= value.length) {
+                this.selectAllYet = true;
+
+                selectAllValues.forEach(val => {
+                    if (value.indexOf(val) === -1) {
+                        this.selectAllYet = false;
+                        return;
+                    }
+                });
+            }
+        }
+    }
+
     handleChange(value, ...args) {
+        this.updateSelectAllYet(value);
+
         // 非受控模式清空内部数据
         if (!('value' in this.props)) {
-            // multiple mode
-            // is current state select all or not
-            this.selectAllYet = false;
-            if (Array.isArray(value)) {
-                const selectAllValues = this.dataStore
-                    .getEnableDS()
-                    .map(item => item.value);
-
-                if (selectAllValues.length <= value.length) {
-                    this.selectAllYet = true;
-
-                    selectAllValues.forEach(val => {
-                        if (value.indexOf(val) === -1) {
-                            this.selectAllYet = false;
-                            return;
-                        }
-                    });
-                }
-            }
-
             this.setState({
                 value: value,
             });