Skip to content

Commit

Permalink
feat: disable input (#188) ✨
Browse files Browse the repository at this point in the history
* chore: Update package.json dependencies

* feat: Add disabled prop to Input and DropdownTreeSelect

* chore: Rebuild bundle.js

* style: Show arrow as disabled, update disabled logic

* chore: Update docs

* chore: Make demo script easier to use
  • Loading branch information
itrombitas authored and mrchief committed Oct 23, 2018
1 parent d5798e4 commit 7cd6111
Show file tree
Hide file tree
Showing 12 changed files with 84 additions and 10 deletions.
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)
})

0 comments on commit 7cd6111

Please sign in to comment.