From 7c13c4b740d99d9faa3bd2f7a2e35de105e6f6d4 Mon Sep 17 00:00:00 2001 From: paranoidjk Date: Mon, 28 Aug 2017 09:45:52 +0800 Subject: [PATCH 1/4] chore: add disabled demo --- examples/disable.html | 1 + examples/disable.js | 73 +++++++++++++++++++++++++++++++++++ tests/__mocks__/rc-trigger.js | 2 +- 3 files changed, 75 insertions(+), 1 deletion(-) create mode 100644 examples/disable.html create mode 100644 examples/disable.js 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/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 (
From d57e8bfcb780c562fd28a2e52bd29449499343ac Mon Sep 17 00:00:00 2001 From: paranoidjk Date: Mon, 28 Aug 2017 10:17:45 +0800 Subject: [PATCH 2/4] fix: https://github.com/ant-design/ant-design/issues/6731 --- src/Select.jsx | 1 + 1 file changed, 1 insertion(+) 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); From 1c8d7cbc4008653523d41f8540e0f92ba7fcdf66 Mon Sep 17 00:00:00 2001 From: paranoidjk Date: Mon, 28 Aug 2017 10:36:24 +0800 Subject: [PATCH 3/4] test: add test case --- tests/Select.checkable.spec.js | 80 +++++++++++++++++++++++++++++++++- tests/Select.multiple.spec.js | 2 +- tests/Select.spec.js | 2 +- 3 files changed, 80 insertions(+), 4 deletions(-) diff --git a/tests/Select.checkable.spec.js b/tests/Select.checkable.spec.js index 96e5ba3e..7fe97809 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.only('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; From e3b3757fee9f8b160dcbc7dce008034efd6332ed Mon Sep 17 00:00:00 2001 From: paranoidjk Date: Mon, 28 Aug 2017 10:41:45 +0800 Subject: [PATCH 4/4] fix: remove only --- tests/Select.checkable.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/Select.checkable.spec.js b/tests/Select.checkable.spec.js index 7fe97809..44f1a7ed 100644 --- a/tests/Select.checkable.spec.js +++ b/tests/Select.checkable.spec.js @@ -55,7 +55,7 @@ describe('TreeSelect.checkable', () => { }); // https://github.com/ant-design/ant-design/issues/6731 - it.only('clear all should clear cache at the same time', () => { + it('clear all should clear cache at the same time', () => { const treeData = [{ label: 'Node1', value: '0-0',