feat: disable input (#188) ✨

* 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

Author: itrombitas

__snapshots__/src/index.test.js.md

@@ -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>

__snapshots__/src/index.test.js.snap

@@ -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>

__snapshots__/src/input/index.test.js.md

@@ -14,7 +14,8 @@ class WithOptions extends PureComponent {
       clearSearchOnChange: false,
       keepTreeOnSearch: false,
       simpleSelect: false,
-      showPartiallySelected: false
+      showPartiallySelected: false,
+      disabled: false
     }
   }
 
@@ -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>
@@ -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
@@ -62,6 +64,7 @@ class WithOptions extends PureComponent {
             keepTreeOnSearch={keepTreeOnSearch}
             simpleSelect={simpleSelect}
             showPartiallySelected={showPartiallySelected}
+            disabled={disabled}
           />
         </div>
       </div>

__snapshots__/src/input/index.test.js.snap

@@ -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\"",

docs/bundle.js

@@ -32,6 +32,14 @@
           color: #3c3c3c;
           margin-right: 2px;
         }
+
+        &.disabled {
+          cursor: not-allowed;
+
+          &.bottom::after {
+            color: rgb(185, 185, 185);
+          }
+        }
       }
     }
 

docs/src/stories/Options/index.js

@@ -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 = {
@@ -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
     })
@@ -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
@@ -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 && (

package.json

@@ -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} />)

src/index.css

@@ -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) {
@@ -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}

src/index.js

@@ -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)
+})