refactor: Update mode to include hierarchical (#251)

BREAKING CHANGE: `hierarchical` prop

`hierarchical` prop is now moved under `mode` prop.

```
// before
<DropdownTreeSelect data={data} hierarchical={true} />

// after
<DropdownTreeSelect data={data} mode="hierarchical" />
```

Author: mrchief

README.md

@@ -51,6 +51,7 @@ A lightweight and fast control to render a select component that can display hie
   - [keepOpenOnSelect](#keepopenonselect)
   - [mode](#mode)
     - [multiSelect](#multiSelect)
+    - [hierarchical](#hierarchical)
     - [simpleSelect](#simpleSelect)
     - [radioSelect](#radioSelect)
   - [showPartiallySelected](#showpartiallyselected)
@@ -327,7 +328,13 @@ Defines how the dropdown is rendered / behaves
 
 #### multiSelect
 
-This is the default mode. A multi selectable dropdown which supports hierarchical data.
+A multi selectable dropdown which supports tree data with parent-child relationships. This is the default mode.
+
+#### hierarchical
+
+A multi selectable dropdown which supports tree data **without** parent-child relationships. In this mode, selecting a node has no ripple effects on its descendants or ancestors. Subsequently, `showPartiallySelected` becomes a moot flag and has no effect as well.
+
+⚠️ Note that `hierarchical=true` negates/overrides `showPartiallySelected`.
 
 #### simpleSelect
 

docs/src/stories/Options/index.js

@@ -45,7 +45,6 @@ class WithOptions extends PureComponent {
       showPartiallySelected,
       disabled,
       readOnly,
-      hierarchical,
     } = this.state
 
     return (
@@ -66,6 +65,7 @@ class WithOptions extends PureComponent {
               <option value="multiSelect">Multi select</option>
               <option value="simpleSelect">Simple select</option>
               <option value="radioSelect">Radio select</option>
+              <option value="hierarchical">Hierarchical</option>
             </select>
           </div>
           <Checkbox
@@ -94,7 +94,6 @@ class WithOptions extends PureComponent {
           />
           <Checkbox label="Disabled" value="disabled" checked={disabled} onChange={this.onOptionsChange} />
           <Checkbox label="Read Only" value="readOnly" checked={readOnly} onChange={this.onOptionsChange} />
-          <Checkbox label="Hierarchical" value="hierarchical" checked={hierarchical} onChange={this.onOptionsChange} />
         </div>
         <div>
           <DropdownTreeSelect
@@ -110,7 +109,6 @@ class WithOptions extends PureComponent {
             showPartiallySelected={showPartiallySelected}
             disabled={disabled}
             readOnly={readOnly}
-            hierarchical={hierarchical}
           />
         </div>
       </div>

package.json

@@ -184,7 +184,7 @@
     }
   },
   "lint-staged": {
-    "*.{js,json,css,md}": [
+    "*.{js,json,css,md,ts}": [
       "prettier --write",
       "git add -f"
     ]

src/index.js

@@ -42,11 +42,10 @@ class DropdownTreeSelect extends Component {
     onNodeToggle: PropTypes.func,
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
-    mode: PropTypes.oneOf(['multiSelect', 'simpleSelect', 'radioSelect']),
+    mode: PropTypes.oneOf(['multiSelect', 'simpleSelect', 'radioSelect', 'hierarchical']),
     showPartiallySelected: PropTypes.bool,
     disabled: PropTypes.bool,
     readOnly: PropTypes.bool,
-    hierarchical: PropTypes.bool,
     id: PropTypes.string,
   }
 
@@ -67,12 +66,11 @@ class DropdownTreeSelect extends Component {
     this.clientId = props.id || clientIdGenerator.get(this)
   }
 
-  initNewProps = ({ data, mode, showPartiallySelected, hierarchical }) => {
+  initNewProps = ({ data, mode, showPartiallySelected }) => {
     this.treeManager = new TreeManager({
       data,
       mode,
       showPartiallySelected,
-      hierarchical,
       rootPrefixId: this.clientId,
     })
     // Restore focus-state
@@ -94,8 +92,8 @@ class DropdownTreeSelect extends Component {
   }
 
   componentWillMount() {
-    const { data, hierarchical } = this.props
-    this.initNewProps({ data, hierarchical, ...this.props })
+    const { data, mode, showPartiallySelected } = this.props
+    this.initNewProps({ data, mode, showPartiallySelected })
   }
 
   componentWillUnmount() {

src/tree-manager/index.js

@@ -5,23 +5,24 @@ import nodeVisitor from './nodeVisitor'
 import keyboardNavigation, { FocusActionNames } from './keyboardNavigation'
 
 class TreeManager {
-  constructor({ data, mode, showPartiallySelected, hierarchical, rootPrefixId }) {
+  constructor({ data, mode, showPartiallySelected, rootPrefixId }) {
     this._src = data
     this.simpleSelect = mode === 'simpleSelect'
     this.radioSelect = mode === 'radioSelect'
+    this.hierarchical = mode === 'hierarchical'
     const { list, defaultValues, singleSelectedNode } = flattenTree({
       tree: JSON.parse(JSON.stringify(data)),
       simple: this.simpleSelect,
       radio: this.radioSelect,
       showPartialState: showPartiallySelected,
-      hierarchical,
+      hierarchical: this.hierarchical,
       rootPrefixId,
     })
     this.tree = list
     this.defaultValues = defaultValues
-    this.showPartialState = !hierarchical && showPartiallySelected
+    this.showPartialState = !this.hierarchical && showPartiallySelected
     this.searchMaps = new Map()
-    this.hierarchical = hierarchical
+
     if ((this.simpleSelect || this.radioSelect) && singleSelectedNode) {
       // Remembers initial check on single select dropdowns
       this.currentChecked = singleSelectedNode._id

src/tree-node/index.js

@@ -69,7 +69,7 @@ class TreeNode extends PureComponent {
     onNodeToggle: PropTypes.func,
     onAction: PropTypes.func,
     onCheckboxChange: PropTypes.func,
-    mode: PropTypes.oneOf(['multiSelect', 'simpleSelect', 'radioSelect']),
+    mode: PropTypes.oneOf(['multiSelect', 'simpleSelect', 'radioSelect', 'hierarchical']),
     showPartiallySelected: PropTypes.bool,
     readOnly: PropTypes.bool,
     clientId: PropTypes.string,

src/tree-node/node-label.js

@@ -19,7 +19,7 @@ class NodeLabel extends PureComponent {
     partial: PropTypes.bool,
     disabled: PropTypes.bool,
     dataset: PropTypes.object,
-    mode: PropTypes.oneOf(['multiSelect', 'simpleSelect', 'radioSelect']),
+    mode: PropTypes.oneOf(['multiSelect', 'simpleSelect', 'radioSelect', 'hierarchical']),
     showPartiallySelected: PropTypes.bool,
     onCheckboxChange: PropTypes.func,
     readOnly: PropTypes.bool,

src/tree/index.js

@@ -23,7 +23,7 @@ class Tree extends Component {
     onNodeToggle: PropTypes.func,
     onAction: PropTypes.func,
     onCheckboxChange: PropTypes.func,
-    mode: PropTypes.oneOf(['multiSelect', 'simpleSelect', 'radioSelect']),
+    mode: PropTypes.oneOf(['multiSelect', 'simpleSelect', 'radioSelect', 'hierarchical']),
     showPartiallySelected: PropTypes.bool,
     pageSize: PropTypes.number,
     readOnly: PropTypes.bool,

src/trigger/index.js

@@ -14,7 +14,7 @@ class Trigger extends PureComponent {
     disabled: PropTypes.bool,
     readOnly: PropTypes.bool,
     showDropdown: PropTypes.bool,
-    mode: PropTypes.oneOf(['multiSelect', 'simpleSelect', 'radioSelect']),
+    mode: PropTypes.oneOf(['multiSelect', 'simpleSelect', 'radioSelect', 'hierarchical']),
     texts: PropTypes.object,
   }