diff --git a/examples/disable.html b/examples/disable.html new file mode 100644 index 00000000..b3a42524 --- /dev/null +++ b/examples/disable.html @@ -0,0 +1 @@ +placeholder \ No newline at end of file diff --git a/examples/disable.js b/examples/disable.js new file mode 100644 index 00000000..14bde237 --- /dev/null +++ b/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 ( +
+ + this.switch(e.target.checked)}/> 禁用 +
+ ); + } +} + +ReactDOM.render(, document.getElementById('__react-content')); diff --git a/src/Select.jsx b/src/Select.jsx index af36270a..ad2f4663 100644 --- a/src/Select.jsx +++ b/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); diff --git a/tests/Select.checkable.spec.js b/tests/Select.checkable.spec.js index 96e5ba3e..44f1a7ed 100644 --- a/tests/Select.checkable.spec.js +++ b/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 (
+ + this.switch(e.target.checked)} id="checkbox"/> 禁用 +
+ ); + } + } + const wrapper = mount(); + 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 = [ diff --git a/tests/Select.multiple.spec.js b/tests/Select.multiple.spec.js index 92096409..a3193d00 100644 --- a/tests/Select.multiple.spec.js +++ b/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 = [ diff --git a/tests/Select.spec.js b/tests/Select.spec.js index d928e895..785a2ffe 100644 --- a/tests/Select.spec.js +++ b/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; diff --git a/tests/__mocks__/rc-trigger.js b/tests/__mocks__/rc-trigger.js index ff9788d4..06195163 100644 --- a/tests/__mocks__/rc-trigger.js +++ b/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 (