Merge pull request #70 from react-component/fix-clear-cache

Fix clear cache

Author: afc163

examples/disable.html

@@ -0,0 +1 @@
+placeholder

examples/disable.js

@@ -0,0 +1,73 @@
+/* eslint react/no-multi-comp:0, no-console:0 */
+import 'rc-tree-select/assets/index.less';
+import TreeSelect from 'rc-tree-select';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const SHOW_PARENT = TreeSelect.SHOW_PARENT;
+
+const treeData = [{
+  label: 'Node1',
+  value: '0-0',
+  key: '0-0',
+  children: [{
+    label: 'Child Node1',
+    value: '0-0-0',
+    key: '0-0-0',
+  }],
+}, {
+  label: 'Node2',
+  value: '0-1',
+  key: '0-1',
+  children: [{
+    label: 'Child Node3',
+    value: '0-1-0',
+    key: '0-1-0',
+  }, {
+    label: 'Child Node4',
+    value: '0-1-1',
+    key: '0-1-1',
+  }, {
+    label: 'Child Node5',
+    value: '0-1-2',
+    key: '0-1-2',
+  }],
+}];
+
+class Demo extends React.Component {
+  state = {
+    value: ['0-0-0'],
+    disabled: false,
+  }
+  onChange = (value) => {
+    console.log('onChange ', value, arguments);
+    this.setState({ value });
+  }
+  switch = (checked) => {
+    this.setState({ disabled: checked });
+  }
+  render() {
+    const tProps = {
+      treeData,
+      disabled: this.state.disabled,
+      value: this.state.value,
+      onChange: this.onChange,
+      multiple: true,
+      allowClear: true,
+      treeCheckable: true,
+      showCheckedStrategy: SHOW_PARENT,
+      searchPlaceholder: 'Please select',
+      style: {
+        width: 300,
+      },
+    };
+    return (
+      <div>
+        <TreeSelect {...tProps} />
+        <input type="checkbox" onChange={e => this.switch(e.target.checked)}/> 禁用
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<Demo />, document.getElementById('__react-content'));

src/Select.jsx

@@ -376,6 +376,7 @@ class Select extends Component {
     }
     event.stopPropagation();
     this._cacheTreeNodesStates = 'no';
+    this._checkedNodes = [];
     if (state.inputValue || state.value.length) {
       this.fireChange([]);
       this.setOpenState(false);

tests/Select.checkable.spec.js

@@ -1,7 +1,7 @@
-/* eslint-disable no-undef */
+/* eslint-disable no-undef, react/no-multi-comp */
 import React from 'react';
 import { mount } from 'enzyme';
-import TreeSelect, { SHOW_PARENT } from '..';
+import TreeSelect, { SHOW_PARENT } from '../src';
 
 describe('TreeSelect.checkable', () => {
   it('allow clear when controlled', () => {
@@ -54,6 +54,82 @@ describe('TreeSelect.checkable', () => {
     expect(wrapper.find('.rc-tree-select-selection__choice')).toHaveLength(0);
   });
 
+  // https://github.com/ant-design/ant-design/issues/6731
+  it('clear all should clear cache at the same time', () => {
+    const treeData = [{
+      label: 'Node1',
+      value: '0-0',
+      key: '0-0',
+      children: [{
+        label: 'Child Node1',
+        value: '0-0-0',
+        key: '0-0-0',
+      }],
+    }, {
+      label: 'Node2',
+      value: '0-1',
+      key: '0-1',
+      children: [{
+        label: 'Child Node3',
+        value: '0-1-0',
+        key: '0-1-0',
+      }, {
+        label: 'Child Node4',
+        value: '0-1-1',
+        key: '0-1-1',
+      }, {
+        label: 'Child Node5',
+        value: '0-1-2',
+        key: '0-1-2',
+      }],
+    }];
+
+    class App extends React.Component {
+      state = {
+        value: ['0-0-0'],
+        disabled: false,
+      }
+
+      handleChange = (value) => {
+        this.setState({ value });
+      }
+      switch = (checked) => {
+        this.setState({ disabled: checked });
+      }
+      render() {
+        return (<div>
+          <TreeSelect
+            treeData={treeData}
+            treeCheckable
+            allowClear
+            multiple
+            showCheckedStrategy={SHOW_PARENT}
+            value={this.state.value}
+            onChange={this.handleChange}
+            disabled={this.state.disabled}
+          />
+          <input type="checkbox" onChange={e => this.switch(e.target.checked)} id="checkbox"/> 禁用
+          </div>
+        );
+      }
+    }
+    const wrapper = mount(<App />);
+    expect(wrapper.find('.rc-tree-select-selection__choice')).toHaveLength(1);
+    // open
+    jest.useFakeTimers();
+    wrapper.find('.rc-tree-select').simulate('click');
+    jest.runAllTimers();
+    // select
+    wrapper.find('.rc-tree-select-tree-checkbox').at(2).simulate('click');
+    expect(wrapper.find('.rc-tree-select-selection__choice')).toHaveLength(2);
+    // clear
+    wrapper.find('.rc-tree-select-selection__clear').simulate('click');
+    expect(wrapper.find('.rc-tree-select-selection__choice')).toHaveLength(0);
+    // disabled
+    wrapper.find('#checkbox').simulate('change', { target: { checked: true } });
+    expect(wrapper.find('.rc-tree-select-selection__choice')).toHaveLength(0);
+  });
+
   // Fix https://github.com/ant-design/ant-design/issues/7312#issuecomment-324865971
   it('should be checkable when treeCheckStrictly is true', () => {
     const treeData = [

tests/Select.multiple.spec.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import { mount, render } from 'enzyme';
 import KeyCode from 'rc-util/lib/KeyCode';
-import TreeSelect from '..';
+import TreeSelect from '../src';
 
 describe('TreeSelect.multiple', () => {
   const treeData = [

tests/Select.spec.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import { render, mount } from 'enzyme';
 import KeyCode from 'rc-util/lib/KeyCode';
-import TreeSelect from '..';
+import TreeSelect from '../src';
 
 const { TreeNode } = TreeSelect;
 

tests/__mocks__/rc-trigger.js

@@ -4,7 +4,7 @@ const Trigger = require.requireActual('rc-trigger');
 
 const render = Trigger.prototype.render;
 
-Trigger.prototype.render = function () {
+Trigger.prototype.render = function _render() {
   const { popupVisible } = this.state;
   return (
     <div id="TriggerContainer">