diff --git a/.github/prlint.json b/.github/prlint.json index a7ea9b70..bfd5dfca 100644 --- a/.github/prlint.json +++ b/.github/prlint.json @@ -1,7 +1,7 @@ { "title": [ { - "pattern": "^(feat|fix|docs|style|refactor|perf|test|chore):\\s", + "pattern": "^(feat|fix|docs|style|refactor|perf|test|chore|BREAKING CHANGE):\\s", "flags": ["i"], "message": "PR title doesn't match conventional commit message specs. See https://conventionalcommits.org/" } diff --git a/README.md b/README.md index bf95e1f7..b89db1af 100644 --- a/README.md +++ b/README.md @@ -54,6 +54,7 @@ A lightweight and fast control to render a select component that can display hie - [radioSelect](#radioSelect) - [showPartiallySelected](#showpartiallyselected) - [showDropdown](#showDropdown) + - [showDropdownAlways](#showDropdownAlways) - [form states (disabled|readOnly)](#formstates) - [id](#id) - [Styling and Customization](#styling-and-customization) @@ -341,6 +342,12 @@ Type: `bool` (default: `false`) If set to true, shows the dropdown when rendered. This can be used to render the component with the dropdown open as its initial state. +### showDropdownAlways + +Type: `bool` + +If set to true, always shows the dropdown when rendered, and toggling dropdown will be disabled. + ### form states (disabled|readOnly) Type: `bool` (default: `false`) diff --git a/__snapshots__/src/index.test.js.md b/__snapshots__/src/index.test.js.md index 0b9b76f1..599fb5a8 100644 --- a/__snapshots__/src/index.test.js.md +++ b/__snapshots__/src/index.test.js.md @@ -407,4 +407,154 @@ Generated by [AVA](https://ava.li). /> + Snapshot 1 + +
+
+ + + +
+ { + _children: [ + 'rdts-0-0', + 'rdts-0-1', + ], + _depth: 0, + _id: 'rdts-0', + children: undefined, + label: 'item1', + value: 'value1', + }, + 'rdts-0-0' => { + _children: [ + 'rdts-0-0-0', + 'rdts-0-0-1', + ], + _depth: 1, + _id: 'rdts-0-0', + _parent: 'rdts-0', + children: undefined, + label: 'item1-1', + value: 'value1-1', + }, + 'rdts-0-0-0' => { + _depth: 2, + _id: 'rdts-0-0-0', + _parent: 'rdts-0-0', + label: 'item1-1-1', + value: 'value1-1-1', + }, + 'rdts-0-0-1' => { + _depth: 2, + _id: 'rdts-0-0-1', + _parent: 'rdts-0-0', + label: 'item1-1-2', + value: 'value1-1-2', + }, + 'rdts-0-1' => { + _depth: 1, + _id: 'rdts-0-1', + _parent: 'rdts-0', + label: 'item1-2', + value: 'value1-2', + }, + 'rdts-1' => { + _children: [ + 'rdts-1-0', + 'rdts-1-1', + ], + _depth: 0, + _id: 'rdts-1', + children: undefined, + label: 'item2', + value: 'value2', + }, + 'rdts-1-0' => { + _children: [ + 'rdts-1-0-0', + 'rdts-1-0-1', + 'rdts-1-0-2', + ], + _depth: 1, + _id: 'rdts-1-0', + _parent: 'rdts-1', + children: undefined, + label: 'item2-1', + value: 'value2-1', + }, + 'rdts-1-0-0' => { + _depth: 2, + _id: 'rdts-1-0-0', + _parent: 'rdts-1-0', + label: 'item2-1-1', + value: 'value2-1-1', + }, + 'rdts-1-0-1' => { + _depth: 2, + _id: 'rdts-1-0-1', + _parent: 'rdts-1-0', + label: 'item2-1-2', + value: 'value2-1-2', + }, + 'rdts-1-0-2' => { + _children: [ + 'rdts-1-0-2-0', + ], + _depth: 2, + _id: 'rdts-1-0-2', + _parent: 'rdts-1-0', + children: undefined, + label: 'item2-1-3', + value: 'value2-1-3', + }, + 'rdts-1-0-2-0' => { + _depth: 3, + _id: 'rdts-1-0-2-0', + _parent: 'rdts-1-0-2', + label: 'item2-1-3-1', + value: 'value2-1-3-1', + }, + 'rdts-1-1' => { + _depth: 1, + _id: 'rdts-1-1', + _parent: 'rdts-1', + label: 'item2-2', + value: 'value2-2', + }, + } + } + onAction={Function {}} + onCheckboxChange={Function {}} + onNodeToggle={Function {}} + pageSize={100} + searchModeOn={false} + /> +
+
diff --git a/__snapshots__/src/index.test.js.snap b/__snapshots__/src/index.test.js.snap index 30da685c..ec82ecf2 100644 Binary files a/__snapshots__/src/index.test.js.snap and b/__snapshots__/src/index.test.js.snap differ diff --git a/src/index.js b/src/index.js index 3be305c2..0f8646d9 100644 --- a/src/index.js +++ b/src/index.js @@ -28,6 +28,7 @@ class DropdownTreeSelect extends Component { keepOpenOnSelect: PropTypes.bool, placeholderText: PropTypes.string, showDropdown: PropTypes.bool, + showDropdownAlways: PropTypes.bool, className: PropTypes.string, onChange: PropTypes.func, onAction: PropTypes.func, @@ -53,7 +54,7 @@ class DropdownTreeSelect extends Component { constructor(props) { super(props) this.state = { - showDropdown: this.props.showDropdown || false, + showDropdown: this.props.showDropdown || this.props.showDropdownAlways || false, searchModeOn: false, } this.clientId = props.id || clientIdGenerator.get(this) @@ -97,7 +98,7 @@ class DropdownTreeSelect extends Component { handleClick = () => { this.setState(prevState => { // keep dropdown active when typing in search box - const showDropdown = this.keepDropdownActive || !prevState.showDropdown + const showDropdown = this.props.showDropdownAlways || this.keepDropdownActive || !prevState.showDropdown // register event listeners only if there is a state change if (showDropdown !== prevState.showDropdown) { @@ -116,7 +117,7 @@ class DropdownTreeSelect extends Component { } handleOutsideClick = e => { - if (!isOutsideClick(e, this.node)) { + if (this.props.showDropdownAlways || !isOutsideClick(e, this.node)) { return } diff --git a/src/index.test.js b/src/index.test.js index 3e86b94d..625549ad 100644 --- a/src/index.test.js +++ b/src/index.test.js @@ -72,6 +72,19 @@ test('shows dropdown', t => { t.snapshot(toJson(wrapper)) }) +test('always shows dropdown', t => { + const { tree } = t.context + const wrapper = shallow() + t.snapshot(toJson(wrapper)) +}) + +test('keeps dropdown open for showDropdownAlways', t => { + const { tree } = t.context + const wrapper = mount() + wrapper.instance().handleClick() + t.true(wrapper.state().showDropdown) +}) + test('notifies on action', t => { const handler = spy() const { tree } = t.context diff --git a/types/react-dropdown-tree-select.d.ts b/types/react-dropdown-tree-select.d.ts index f5a21005..40f10ad3 100644 --- a/types/react-dropdown-tree-select.d.ts +++ b/types/react-dropdown-tree-select.d.ts @@ -25,6 +25,9 @@ declare module "react-dropdown-tree-select" { * This can be used to render the component with the dropdown open as its initial state */ showDropdown?: boolean; + /** If set to true, always shows the dropdown when rendered, and toggling dropdown will be disabled. + */ + showDropdownAlways?: boolean; /** Additional classname for container. * The container renders with a default classname of react-dropdown-tree-select */