Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 28 additions & 1 deletion __snapshots__/src/index.test.js.md
Original file line number Diff line number Diff line change
Expand Up @@ -261,4 +261,31 @@ Generated by [AVA](https://ava.li).
/>
</div>
</div>
</div>
</div

## doesn't toggle dropdown if it's disabled

> Snapshot 1

<div
className="react-dropdown-tree-select"
>
<div
className="dropdown"
>
<a
className="dropdown-trigger arrow disabled bottom"
onClick={false}
>
<Input
disabled={true}
inputRef={Function inputRef {}}
onBlur={Function {}}
onFocus={Function {}}
onInputChange={Function {}}
onTagRemove={Function {}}
tags={[]}
/>
</a>
</div>
</div>
Binary file modified __snapshots__/src/index.test.js.snap
Binary file not shown.
22 changes: 21 additions & 1 deletion __snapshots__/src/input/index.test.js.md
Original file line number Diff line number Diff line change
Expand Up @@ -107,4 +107,24 @@ Generated by [AVA](https://ava.li).
type="text"
/>
</li>
</ul>
</ul

## should render disabled input

> Snapshot 1

<ul
className="tag-list"
>
<li
className="tag-item"
>
<input
className="search"
disabled={true}
onChange={Function {}}
placeholder="Choose..."
type="text"
/>
</li>
</ul>
Binary file modified __snapshots__/src/input/index.test.js.snap
Binary file not shown.
2 changes: 1 addition & 1 deletion docs/bundle.js

Large diffs are not rendered by default.

7 changes: 5 additions & 2 deletions docs/src/stories/Options/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ class WithOptions extends PureComponent {
clearSearchOnChange: false,
keepTreeOnSearch: false,
simpleSelect: false,
showPartiallySelected: false
showPartiallySelected: false,
disabled: false
}
}

Expand All @@ -33,7 +34,7 @@ class WithOptions extends PureComponent {
}

render() {
const { clearSearchOnChange, keepTreeOnSearch, simpleSelect, showPartiallySelected } = this.state
const { clearSearchOnChange, keepTreeOnSearch, simpleSelect, showPartiallySelected, disabled } = this.state

return (
<div>
Expand All @@ -51,6 +52,7 @@ class WithOptions extends PureComponent {
<Checkbox label="Keep tree on search" value="keepTreeOnSearch" checked={keepTreeOnSearch} onChange={this.onOptionsChange} />
<Checkbox label="Simple Select" value="simpleSelect" checked={simpleSelect} onChange={this.onOptionsChange} />
<Checkbox label="Show Partially Selected" value="showPartiallySelected" checked={showPartiallySelected} onChange={this.onOptionsChange} />
<Checkbox label="Disable Input" value="disabled" checked={disabled} onChange={this.onOptionsChange} />
</div>
<div>
<DropdownTreeSelect
Expand All @@ -62,6 +64,7 @@ class WithOptions extends PureComponent {
keepTreeOnSearch={keepTreeOnSearch}
simpleSelect={simpleSelect}
showPartiallySelected={showPartiallySelected}
disabled={disabled}
/>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
"commit": "git-cz",
"commitmsg": "commitlint -e $GIT_PARAMS",
"coveralls": "nyc npm test && nyc report --reporter=text-lcov | coveralls",
"demo": "webpack-serve --content ./docs --port 3000 --open --config docs/webpack.config.js",
"demo": "rimraf ./docs/bundle.js && webpack-serve --content ./docs --port 3000 --open --config docs/webpack.config.js",
"prepublishOnly": "npm run build",
"lint": "eslint src docs webpack.config.js && stylelint \"src/**/*.css\" --fix",
"lint:nofix": "eslint src webpack.config.js && stylelint \"src/**/*.css\"",
Expand Down
8 changes: 8 additions & 0 deletions src/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,14 @@
color: #3c3c3c;
margin-right: 2px;
}

&.disabled {
cursor: not-allowed;

&.bottom::after {
color: rgb(185, 185, 185);
}
}
}
}

Expand Down
7 changes: 5 additions & 2 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@ class DropdownTreeSelect extends Component {
onBlur: PropTypes.func,
simpleSelect: PropTypes.bool,
noMatchesText: PropTypes.string,
showPartiallySelected: PropTypes.bool
showPartiallySelected: PropTypes.bool,
disabled: PropTypes.bool
}

static defaultProps = {
Expand Down Expand Up @@ -176,6 +177,7 @@ class DropdownTreeSelect extends Component {
const dropdownTriggerClassname = cx({
'dropdown-trigger': true,
arrow: true,
disabled: this.props.disabled,
top: this.state.showDropdown,
bottom: !this.state.showDropdown
})
Expand All @@ -188,7 +190,7 @@ class DropdownTreeSelect extends Component {
}}
>
<div className="dropdown">
<a className={dropdownTriggerClassname} onClick={this.handleClick}>
<a className={dropdownTriggerClassname} onClick={!this.props.disabled && this.handleClick}>
<Input
inputRef={el => {
this.searchInput = el
Expand All @@ -199,6 +201,7 @@ class DropdownTreeSelect extends Component {
onFocus={this.onInputFocus}
onBlur={this.onInputBlur}
onTagRemove={this.onTagRemove}
disabled={this.props.disabled}
/>
</a>
{this.state.showDropdown && (
Expand Down
6 changes: 6 additions & 0 deletions src/index.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,12 @@ test('toggles dropdown', t => {
t.false(wrapper.state().showDropdown)
})

test('doesn\'t toggle dropdown if it\'s disabled', t => {
const { tree } = t.context
const wrapper = shallow(<DropdownTreeSelect data={tree} disabled />)
t.snapshot(toJson(wrapper))
})

test('keeps dropdown active on focus', t => {
const { tree } = t.context
const wrapper = shallow(<DropdownTreeSelect data={tree} />)
Expand Down
6 changes: 4 additions & 2 deletions src/input/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@ class Input extends PureComponent {
onFocus: PropTypes.func,
onBlur: PropTypes.func,
onTagRemove: PropTypes.func,
inputRef: PropTypes.func
inputRef: PropTypes.func,
disabled: PropTypes.bool
}

constructor(props) {
Expand All @@ -39,14 +40,15 @@ class Input extends PureComponent {
}

render() {
const { tags, onTagRemove, inputRef, placeholderText = 'Choose...', onFocus, onBlur } = this.props
const { tags, onTagRemove, inputRef, placeholderText = 'Choose...', onFocus, onBlur, disabled } = this.props

return (
<ul className={cx('tag-list')}>
{getTags(tags, onTagRemove)}
<li className={cx('tag-item')}>
<input
type="text"
disabled={disabled}
ref={inputRef}
className={cx('search')}
placeholder={placeholderText}
Expand Down
5 changes: 5 additions & 0 deletions src/input/index.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -47,3 +47,8 @@ test('should render data attributes', t => {

t.snapshot(wrapper)
})

test('should render disabled input', t => {
const wrapper = toJson(shallow(<Input disabled />))
t.snapshot(wrapper)
})