feat: Support disabled/readOnly states ✨ (#200)

* fix: Show cursor in Edge, IE 11 properly

* feat: Support readOnly state

* chore: Fix lint errors

* docs: Add documentation for form states

* chore: Use action's id if available, otherwise fall back to array index

* test: Add tests for actions

* test: Updated snapshots

Author: mrchief

README.md

@@ -49,6 +49,7 @@ A lightweight and fast control to render a select component that can display hie
   - [simpleSelect](#simpleselect)
   - [showPartiallySelected](#showpartiallyselected)
   - [showDropdown](#showDropdown)
+  - [form states (disabled|readOnly)](#formstates)
 - [Styling and Customization](#styling-and-customization)
   - [Using default styles](#default-styles)
   - [Customizing with Bootstrap, Material Design styles](#customizing-styles)
@@ -101,7 +102,7 @@ You can import the standalone UMD build from a CDN such as:
 
 ```html
 <script src="https://unpkg.com/react-dropdown-tree-select/dist/react-dropdown-tree-select.js"></script>
-<link href="https://unpkg.com/react-dropdown-tree-select/dist/styles.css" rel="stylesheet">
+<link href="https://unpkg.com/react-dropdown-tree-select/dist/styles.css" rel="stylesheet" />
 ```
 
 **Note:** Above example will always fetch the latest version. To fetch a specific version, use `https://unpkg.com/react-dropdown-tree-select@<version>/dist/...`
@@ -292,6 +293,13 @@ 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.
 
+### form states (disabled|readOnly)
+
+Type: `bool` (default: `false`)
+
+`disabled=true` disables the dropdown completely. This is useful during form submit events.
+`readOnly=true` makes the dropdown read only, which means that the user can still interact with it but cannot change any of its values. This can be useful for display only forms.
+
 ## Styling and Customization
 
 ### Default styles
@@ -327,7 +335,7 @@ module: {
 You can import and place a style link directly by referencing it from a CDN.
 
 ```html
-<link href="https://unpkg.com/react-dropdown-tree-select/dist/styles.css" rel="stylesheet">
+<link href="https://unpkg.com/react-dropdown-tree-select/dist/styles.css" rel="stylesheet" />
 ```
 
 Note: Above example will always fetch the latest version. To fetch a specific version, use `https://unpkg.com/react-dropdown-tree-select@<version>/dist/styles.css`. Visit [unpkg.com](https://unpkg.com/#/) to see other options.
@@ -470,6 +478,7 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
 | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
 | [<img src="https://avatars1.githubusercontent.com/u/13344028?v=4" width="100px;"/><br /><sub><b>BaarishRain</b></sub>](https://github.com/BaarishRain)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3ABaarishRain "Bug reports") | [<img src="https://avatars0.githubusercontent.com/u/32507174?v=4" width="100px;"/><br /><sub><b>Kovacs Alexandru Robert</b></sub>](http://kovacsalexandrurobert.ro)<br />[🤔](#ideas-akovacspentalog "Ideas, Planning, & Feedback") | [<img src="https://avatars2.githubusercontent.com/u/11201133?v=4" width="100px;"/><br /><sub><b>Alexis Mondragon</b></sub>](https://github.com/amondragon)<br />[🤔](#ideas-amondragon "Ideas, Planning, & Feedback") | [<img src="https://avatars2.githubusercontent.com/u/13438795?v=4" width="100px;"/><br /><sub><b>Charlie91</b></sub>](https://github.com/Charlie91)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3ACharlie91 "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/1930681?v=4" width="100px;"/><br /><sub><b>Dhirendrasinh</b></sub>](https://github.com/dhirendrarathod2000)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3Adhirendrarathod2000 "Bug reports") | [<img src="https://avatars1.githubusercontent.com/u/7006862?v=4" width="100px;"/><br /><sub><b>JKapostins</b></sub>](https://github.com/JKapostins)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3AJKapostins "Bug reports") | [<img src="https://avatars0.githubusercontent.com/u/24354568?v=4" width="100px;"/><br /><sub><b>josvegit</b></sub>](https://github.com/josvegit)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3Ajosvegit "Bug reports") |
 | [<img src="https://avatars1.githubusercontent.com/u/12422912?v=4" width="100px;"/><br /><sub><b>Luis Locon</b></sub>](https://twitter.com/LoconLuis)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3Aloconluis "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/10121255?v=4" width="100px;"/><br /><sub><b>Mikdat DOĞRU</b></sub>](https://github.com/mikdatdogru)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3Amikdatdogru "Bug reports") | [<img src="https://avatars1.githubusercontent.com/u/7553535?v=4" width="100px;"/><br /><sub><b>Will Izard</b></sub>](https://github.com/will-izard)<br />[🤔](#ideas-will-izard "Ideas, Planning, & Feedback") | [<img src="https://avatars3.githubusercontent.com/u/4504265?v=4" width="100px;"/><br /><sub><b>Nikola Peric</b></sub>](https://gitlab.com/nikperic)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3Anikolap "Bug reports") | [<img src="https://avatars2.githubusercontent.com/u/6119839?v=4" width="100px;"/><br /><sub><b>Ramón Alejandro Reyes Fajardo</b></sub>](https://github.com/ramonrf)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3Aramonrf "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/10716099?v=4" width="100px;"/><br /><sub><b>Sarada Cherukupalli</b></sub>](https://github.com/sarada-Cheukupalli)<br />[🤔](#ideas-sarada-Cheukupalli "Ideas, Planning, & Feedback") | [<img src="https://avatars1.githubusercontent.com/u/45608461?v=4" width="100px;"/><br /><sub><b>Dilip Gavara</b></sub>](https://github.com/dilip025)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=dilip025 "Code") |
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!

__snapshots__/src/index.test.js.md

@@ -4,6 +4,33 @@ The actual snapshot is saved in `index.test.js.snap`.
 
 Generated by [AVA](https://ava.li).
 
+## 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>
+
 ## renders default state
 
 > Snapshot 1
@@ -261,31 +288,4 @@ Generated by [AVA](https://ava.li).
           />
         </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>
+    </div>

__snapshots__/src/index.test.js.snap

@@ -107,7 +107,7 @@ Generated by [AVA](https://ava.li).
           type="text"
         />
       </li>
-    </ul
+    </ul>
 
 ## should render disabled input
 
@@ -127,4 +127,4 @@ Generated by [AVA](https://ava.li).
           type="text"
         />
       </li>
-    </ul>
+    </ul>

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

@@ -0,0 +1,36 @@
+# Snapshot report for `src\tree-node\actions.test.js`
+
+The actual snapshot is saved in `actions.test.js.snap`.
+
+Generated by [AVA](https://ava.li).
+
+## renders actions
+
+> Snapshot 1
+
+    [
+      <Action
+        actionData={
+          {
+            action: 'action-0',
+            id: undefined,
+          }
+        }
+        className="cn0-0-0"
+        junk="1"
+        key="action-0"
+        onAction={Function onAction {}}
+        text="hello"
+        title="action"
+      />,
+    ]
+
+## returns null if actions are empty
+
+> Snapshot 1
+
+    ''
+
+> Snapshot 2
+
+    ''

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

@@ -36,6 +36,5 @@ Generated by [AVA](https://ava.li).
           ]
         }
         id="0-0-0"
-        onAction={Function onAction {}}
       />
     </li>

__snapshots__/src/tree-node/actions.test.js.md

@@ -2,6 +2,7 @@
   {
     "label": "VP Accounting",
     "tagClassName": "special",
+    "checked": true,
     "children": [
       {
         "label": "iWay",

__snapshots__/src/tree-node/actions.test.js.snap

@@ -15,7 +15,8 @@ class WithOptions extends PureComponent {
       keepTreeOnSearch: false,
       simpleSelect: false,
       showPartiallySelected: false,
-      disabled: false
+      disabled: false,
+      readOnly: false
     }
   }
 
@@ -34,7 +35,7 @@ class WithOptions extends PureComponent {
   }
 
   render() {
-    const { clearSearchOnChange, keepTreeOnSearch, simpleSelect, showPartiallySelected, disabled } = this.state
+    const { clearSearchOnChange, keepTreeOnSearch, simpleSelect, showPartiallySelected, disabled, readOnly } = this.state
 
     return (
       <div>
@@ -52,7 +53,8 @@ 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} />
+          <Checkbox label="Disabled" value="disabled" checked={disabled} onChange={this.onOptionsChange} />
+          <Checkbox label="Read Only" value="readOnly" checked={readOnly} onChange={this.onOptionsChange} />
         </div>
         <div>
           <DropdownTreeSelect
@@ -65,6 +67,7 @@ class WithOptions extends PureComponent {
             simpleSelect={simpleSelect}
             showPartiallySelected={showPartiallySelected}
             disabled={disabled}
+            readOnly={readOnly}
           />
         </div>
       </div>

__snapshots__/src/tree-node/index.test.js.md

@@ -12,7 +12,9 @@ class Checkbox extends PureComponent {
   static propTypes = {
     checked: PropTypes.bool,
     indeterminate: PropTypes.bool,
-    onChange: PropTypes.func
+    onChange: PropTypes.func,
+    disabled: PropTypes.bool,
+    readOnly: PropTypes.bool
   }
 
   // this (stopPropagation) is needed since FireFox wrongly detects inside clicks
@@ -25,9 +27,11 @@ class Checkbox extends PureComponent {
   }
 
   render() {
-    const { checked, indeterminate = false, onChange, ...rest } = this.props
+    const { checked, indeterminate = false, onChange, disabled, readOnly, ...rest } = this.props
 
-    return <input type="checkbox" ref={refUpdater({ checked, indeterminate })} onChange={this.handleChange} {...rest} />
+    const isDisabled = disabled || readOnly
+
+    return <input type="checkbox" ref={refUpdater({ checked, indeterminate })} onChange={this.handleChange} disabled={isDisabled} {...rest} />
   }
 }
 

__snapshots__/src/tree-node/index.test.js.snap

@@ -35,7 +35,8 @@ class DropdownTreeSelect extends Component {
     simpleSelect: PropTypes.bool,
     noMatchesText: PropTypes.string,
     showPartiallySelected: PropTypes.bool,
-    disabled: PropTypes.bool
+    disabled: PropTypes.bool,
+    readOnly: PropTypes.bool
   }
 
   static defaultProps = {
@@ -180,6 +181,7 @@ class DropdownTreeSelect extends Component {
       'dropdown-trigger': true,
       arrow: true,
       disabled: this.props.disabled,
+      readOnly: this.props.readOnly,
       top: this.state.showDropdown,
       bottom: !this.state.showDropdown
     })
@@ -204,6 +206,7 @@ class DropdownTreeSelect extends Component {
               onBlur={this.onInputBlur}
               onTagRemove={this.onTagRemove}
               disabled={this.props.disabled}
+              readOnly={this.props.readOnly}
             />
           </a>
           {this.state.showDropdown && (
@@ -220,6 +223,7 @@ class DropdownTreeSelect extends Component {
                   onNodeToggle={this.onNodeToggle}
                   simpleSelect={this.props.simpleSelect}
                   showPartiallySelected={this.props.showPartiallySelected}
+                  readOnly={this.props.readOnly}
                 />
               )}
             </div>

docs/bundle.js

@@ -7,12 +7,12 @@ import { getDataset, debounce } from '../utils'
 
 const cx = cn.bind(styles)
 
-const getTags = (tags = [], onDelete) =>
+const getTags = (tags = [], onDelete, readOnly) =>
   tags.map(tag => {
     const { _id, label, tagClassName, dataset } = tag
     return (
       <li className={cx('tag-item', tagClassName)} key={`tag-item-${_id}`} {...getDataset(dataset)}>
-        <Tag label={label} id={_id} onDelete={onDelete} />
+        <Tag label={label} id={_id} onDelete={onDelete} readOnly={readOnly} />
       </li>
     )
   })
@@ -26,7 +26,8 @@ class Input extends PureComponent {
     onBlur: PropTypes.func,
     onTagRemove: PropTypes.func,
     inputRef: PropTypes.func,
-    disabled: PropTypes.bool
+    disabled: PropTypes.bool,
+    readOnly: PropTypes.bool
   }
 
   constructor(props) {
@@ -40,11 +41,11 @@ class Input extends PureComponent {
   }
 
   render() {
-    const { tags, onTagRemove, inputRef, placeholderText = 'Choose...', onFocus, onBlur, disabled } = this.props
+    const { tags, onTagRemove, inputRef, placeholderText = 'Choose...', onFocus, onBlur, disabled, readOnly } = this.props
 
     return (
       <ul className={cx('tag-list')}>
-        {getTags(tags, onTagRemove)}
+        {getTags(tags, onTagRemove, readOnly)}
         <li className={cx('tag-item')}>
           <input
             type="text"
@@ -55,6 +56,7 @@ class Input extends PureComponent {
             onChange={this.handleInputChange}
             onFocus={onFocus}
             onBlur={onBlur}
+            readOnly={readOnly}
           />
         </li>
       </ul>

docs/src/stories/Options/data.json

@@ -14,4 +14,8 @@
   background-color: transparent;
   border: none;
   outline: none;
+
+  &.readOnly {
+    cursor: not-allowed;
+  }
 }

docs/src/stories/Options/index.js

@@ -10,7 +10,8 @@ class Tag extends PureComponent {
   static propTypes = {
     id: PropTypes.string.isRequired,
     label: PropTypes.string.isRequired,
-    onDelete: PropTypes.func
+    onDelete: PropTypes.func,
+    readOnly: PropTypes.bool
   }
 
   handleClick = e => {
@@ -21,12 +22,12 @@ class Tag extends PureComponent {
   }
 
   render() {
-    const { label } = this.props
+    const { label, readOnly } = this.props
 
     return (
       <span className={cx('tag')}>
         {label}
-        <button onClick={this.handleClick} className={cx('tag-remove')} type="button">
+        <button onClick={!readOnly && this.handleClick} className={cx('tag-remove', { readOnly })} type="button">
           x
         </button>
       </span>

src/checkbox/index.js

@@ -7,7 +7,8 @@ class Action extends PureComponent {
     text: PropTypes.string,
     className: PropTypes.string,
     actionData: PropTypes.object,
-    onAction: PropTypes.func
+    onAction: PropTypes.func,
+    readOnly: PropTypes.bool
   }
 
   static defaultProps = {
@@ -19,10 +20,10 @@ class Action extends PureComponent {
   }
 
   render() {
-    const { title, className, text } = this.props
+    const { title, className, text, readOnly } = this.props
 
     return (
-      <i title={title} className={className} onClick={this.handleClick}>
+      <i title={title} className={className} onClick={!readOnly && this.handleClick}>
         {text}
       </i>
     )