feat: Simple select ✨ (#60)

mrchief · web-flow · commit 2e780c0489ce · 2018-03-14T22:53:18.000-04:00
* feat: Simple select ✨

* fix: Attempt to fix CodeClimate issues

* refactor: Move node-label to its own file (reduce code complexity)

* chore: Remove console logs

* docs: Example for simple select

* feat: Select single node only with simpleSelect

* refactor: Trying to remove cognitive complexity
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 ---
 
-[![NPM version][npm-image]][npm-url] [![gzip][gzip-image]][gzip-url] [![npm download][download-image]][npm-url] 
+[![NPM version][npm-image]][npm-url] [![gzip][gzip-image]][gzip-url] [![npm download][download-image]][npm-url]
 
 [![build status][travis-image]][travis-url] [![Test coverage][coveralls-image]][coveralls-url] [![semantic-release][semantic-release]][semantic-release-url] [![Commitizen friendly][commitizen]][commitizen-url] [![Greenkeeper badge][greenkeeper]][greenkeeper-url]
 
@@ -75,6 +75,10 @@ Online demo: http://dowjones.github.io/react-dropdown-tree-select/examples/boots
 
 Online demo: http://dowjones.github.io/react-dropdown-tree-select/examples/material
 
+##### As Single Select
+
+Online demo: http://dowjones.github.io/react-dropdown-tree-select/examples/simple
+
 ## Install
 
 ```
@@ -223,7 +227,13 @@ The text to display as placeholder on the search box. Defaults to `Choose...`
 
 Type: `bool`
 
-Displays search results as a tree instead of flatten results
+Displays search results as a tree instead of flattened results
+
+### simpleSelect
+
+Type: `bool` (default: `false`)
+
+Turns the dropdown into a simple, single select dropdown. If you pass tree data, only immediate children are picked, grandchildren nodes are ignored. Defaults to `false`.
 
 ## Styling and Customization
 
diff --git a/docs/examples/simple/index.css b/docs/examples/simple/index.css
@@ -0,0 +1,45 @@
+* {
+  box-sizing: border-box;
+}
+
+body, html, #app {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: monospace;
+}
+
+body {
+  margin: 20px;
+  width: calc(100% - 10px);
+}
+
+h2 {
+  margin: 0;
+}
+
+#app {
+  height: 50%;
+  width: 500px;
+}
+
+.suspended .node-label {
+  font-style: italic;
+  text-decoration: line-through;
+}
+
+.dropdown-content {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.node .fa {
+  font-size: 12px;
+  margin-left: 4px;
+  cursor: pointer;
+}
+
+.node .fa-ban {
+  color: darkorange;
+}
diff --git a/docs/examples/simple/index.html b/docs/examples/simple/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>React Dropdown Tree Select Demo</title>
+        <link rel="stylesheet" href="./index.css" />
+        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
+    </head>
+    <body>
+        <h2>React Dropdown Tree Select Demo</h2>
+        <br/>
+        <div id="app"></div>
+        <script src="bundle.js"></script>
+    </body>
+</html>
diff --git a/docs/examples/simple/index.js b/docs/examples/simple/index.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import DropdownTreeSelect from '../../../src'
+import data from '../../demo-data.json'
+
+const onChange = (curNode, selectedNodes) => {
+  console.log('onChange::', curNode, selectedNodes)
+}
+const onAction = ({ action, node }) => {
+  console.log(`onAction:: [${action}]`, node)
+}
+const onNodeToggle = curNode => {
+  console.log('onNodeToggle::', curNode)
+}
+
+ReactDOM.render(
+  <DropdownTreeSelect
+    data={data}
+    onChange={onChange}
+    onAction={onAction}
+    onNodeToggle={onNodeToggle}
+    keepTreeOnSearch
+    simpleSelect
+  />,
+  document.getElementById('app')
+)
diff --git a/docs/webpack.config.js b/docs/webpack.config.js
@@ -62,4 +62,11 @@ module.exports = [{
     path: path.join(__dirname, 'examples/material'),
     filename: 'bundle.js'
   }
+}, {
+  ...baseConfig,
+  entry: path.join(__dirname, 'examples/simple'),
+  output: {
+    path: path.join(__dirname, 'examples/simple'),
+    filename: 'bundle.js'
+  }
 }]
diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
     "semantic-release": "semantic-release",
     "travis-deploy-once": "travis-deploy-once",
     "test": "cross-env NODE_ENV=test ava",
-    "test:cov": "rimraf .nyc_output && nyc npm test"
+    "test:cov": "rimraf .nyc_output && nyc npm test && nyc report --reporter=lcov "
   },
   "files": [
     "dist"
diff --git a/src/index.js b/src/index.js
@@ -25,7 +25,8 @@ class DropdownTreeSelect extends Component {
     className: PropTypes.string,
     onChange: PropTypes.func,
     onAction: PropTypes.func,
-    onNodeToggle: PropTypes.func
+    onNodeToggle: PropTypes.func,
+    simpleSelect: PropTypes.bool
   }
 
   constructor (props) {
@@ -40,8 +41,8 @@ class DropdownTreeSelect extends Component {
     typeof this.props.onChange === 'function' && this.props.onChange(...args)
   }
 
-  createList = tree => {
-    this.treeManager = new TreeManager(tree)
+  createList = (tree, simple) => {
+    this.treeManager = new TreeManager(tree, simple)
     return this.treeManager.tree
   }
 
@@ -57,13 +58,13 @@ class DropdownTreeSelect extends Component {
   }
 
   componentWillMount () {
-    const tree = this.createList(this.props.data)
+    const tree = this.createList(this.props.data, this.props.simpleSelect)
     const tags = this.treeManager.getTags()
     this.setState({ tree, tags })
   }
 
   componentWillReceiveProps (nextProps) {
-    const tree = this.createList(nextProps.data)
+    const tree = this.createList(nextProps.data, nextProps.simpleSelect)
     const tags = this.treeManager.getTags()
     this.setState({ tree, tags })
   }
@@ -116,7 +117,9 @@ class DropdownTreeSelect extends Component {
   onCheckboxChange = (id, checked) => {
     this.treeManager.setNodeCheckedState(id, checked)
     const tags = this.treeManager.getTags()
-    this.setState({ tree: this.treeManager.tree, tags })
+    const showDropdown = this.props.simpleSelect ? false : this.state.showDropdown
+    this.setState({ tree: this.treeManager.tree, tags, showDropdown })
+    if (this.props.simpleSelect) this.resetSearch()
     this.notifyChange(this.treeManager.getNodeById(id), tags)
   }
 
@@ -132,6 +135,7 @@ class DropdownTreeSelect extends Component {
       top: this.state.showDropdown,
       bottom: !this.state.showDropdown
     })
+
     return (
       <div
         className={cx(this.props.className, 'react-dropdown-tree-select')}
@@ -169,6 +173,7 @@ class DropdownTreeSelect extends Component {
                   onAction={this.onAction}
                   onCheckboxChange={this.onCheckboxChange}
                   onNodeToggle={this.onNodeToggle}
+                  simpleSelect={this.props.simpleSelect}
                 />
               )}
             </div>
diff --git a/src/tree-manager/flatten-tree.js b/src/tree-manager/flatten-tree.js
@@ -90,9 +90,9 @@ const tree = [
  * @param  {[type]} tree The incoming tree object
  * @return {object}      The flattened list
  */
-function flattenTree (tree) {
+function flattenTree (tree, simple) {
   const forest = Array.isArray(tree) ? tree : [tree]
-  const list = walkNodes({nodes: forest})
+  const list = walkNodes({ nodes: forest, simple })
   return list
 }
 
@@ -114,7 +114,7 @@ function setInitialStateProps (node, parent = {}) {
   }
 }
 
-function walkNodes ({nodes, list = new Map(), parent, depth = 0}) {
+function walkNodes ({ nodes, list = new Map(), parent, depth = 0, simple }) {
   nodes.forEach((node, i) => {
     node._depth = depth
 
@@ -129,7 +129,7 @@ function walkNodes ({nodes, list = new Map(), parent, depth = 0}) {
     setInitialStateProps(node, parent)
 
     list.set(node._id, node)
-    if (node.children) {
+    if (!simple && node.children) {
       node._children = []
       walkNodes({nodes: node.children, list, parent: node, depth: depth + 1})
       node.children = undefined
diff --git a/src/tree-manager/index.js b/src/tree-manager/index.js
@@ -2,9 +2,10 @@ import isEmpty from '../isEmpty'
 import flattenTree from './flatten-tree'
 
 class TreeManager {
-  constructor (tree) {
+  constructor (tree, simple) {
     this._src = tree
-    this.tree = flattenTree(JSON.parse(JSON.stringify(tree)))
+    this.tree = flattenTree(JSON.parse(JSON.stringify(tree)), simple)
+    this.simpleSelect = simple
     this.searchMaps = new Map()
   }
 
@@ -82,13 +83,24 @@ class TreeManager {
     return this.tree
   }
 
+  togglePreviousChecked (id) {
+    const prevChecked = this.currentChecked
+    if (prevChecked) this.getNodeById(prevChecked).checked = false
+    this.currentChecked = id
+  }
+
   setNodeCheckedState (id, checked) {
     const node = this.getNodeById(id)
     node.checked = checked
-    this.toggleChildren(id, checked)
 
-    if (!checked) {
-      this.unCheckParents(node)
+    if (this.simpleSelect) {
+      this.togglePreviousChecked(id)
+    } else {
+      this.toggleChildren(id, checked)
+
+      if (!checked) {
+        this.unCheckParents(node)
+      }
     }
   }
 
diff --git a/src/tree-manager/index.test.js b/src/tree-manager/index.test.js
@@ -398,3 +398,36 @@ test('should get matching nodes with mixed case when searched', t => {
   const nodes = ['i1', 'c1']
   nodes.forEach(n => t.false(manager.getNodeById(n).hide))
 })
+
+test('should uncheck previous node in simple select mode', t => {
+  const tree = [{
+    id: 'i1',
+    label: 'l1',
+    value: 'v1',
+    children: [{
+      id: 'c1',
+      label: 'l1c1',
+      value: 'l1v1'
+    }]
+  }, {
+    id: 'i2',
+    label: 'l2',
+    value: 'v2',
+    children: [{
+      id: 'c2',
+      label: 'l2c2',
+      value: 'l2v2'
+    }]
+  }]
+  const manager = new TreeManager(tree, true)
+  manager.setNodeCheckedState('i1', true)
+  t.true(manager.getNodeById('i1').checked)
+
+  manager.setNodeCheckedState('i2', true)
+  t.false(manager.getNodeById('i1').checked)
+  t.true(manager.getNodeById('i2').checked)
+
+  manager.setNodeCheckedState('i1', true)
+  t.true(manager.getNodeById('i1').checked)
+  t.false(manager.getNodeById('i2').checked)
+})
diff --git a/src/tree-node/index.js b/src/tree-node/index.js
@@ -1,8 +1,11 @@
-import React from 'react'
+import cn from 'classnames/bind'
 import PropTypes from 'prop-types'
-import isEmpty from '../isEmpty'
+import React from 'react'
+
 import Action from './action'
-import cn from 'classnames/bind'
+import isEmpty from '../isEmpty'
+import NodeLabel from './node-label'
+
 import styles from './index.css'
 
 const cx = cn.bind(styles)
@@ -33,32 +36,22 @@ const getToggleCx = ({ node }) => {
 }
 
 const getNodeActions = (props) => {
-  const {node, onAction} = props
+  const { node, onAction } = props
 
   return (node.actions || []).map((a, idx) => (
     <Action key={`action-${idx}`} {...a} actionData={{ action: a.id, node }} onAction={onAction} />
   ))
 }
 
 const TreeNode = props => {
-  const { keepTreeOnSearch, node, searchModeOn, onNodeToggle, onCheckboxChange } = props
+  const { simpleSelect, keepTreeOnSearch, node, searchModeOn, onNodeToggle, onCheckboxChange } = props
   const liCx = getNodeCx(props)
   const toggleCx = getToggleCx(props)
+
   return (
     <li className={liCx} style={keepTreeOnSearch || !searchModeOn ? { paddingLeft: `${node._depth * 20}px` } : {}}>
       <i className={toggleCx} onClick={() => onNodeToggle(node._id)} />
-      <label title={node.title || node.label}>
-        <input
-          type="checkbox"
-          name={node._id}
-          className="checkbox-item"
-          checked={node.checked}
-          onChange={e => onCheckboxChange(node._id, e.target.checked)}
-          value={node.value}
-          disabled={node.disabled}
-        />
-        <span className="node-label">{node.label}</span>
-      </label>
+      <NodeLabel node={node} simpleSelect={simpleSelect} onCheckboxChange={onCheckboxChange} />
       {getNodeActions(props)}
     </li>
   )
@@ -81,7 +74,8 @@ TreeNode.propTypes = {
   searchModeOn: PropTypes.bool,
   onNodeToggle: PropTypes.func,
   onAction: PropTypes.func,
-  onCheckboxChange: PropTypes.func
+  onCheckboxChange: PropTypes.func,
+  simpleSelect: PropTypes.bool
 }
 
 export default TreeNode
diff --git a/src/tree-node/index.test.js b/src/tree-node/index.test.js
diff --git a/src/tree-node/node-label.js b/src/tree-node/node-label.js
diff --git a/src/tree-node/node-label.test.js b/src/tree-node/node-label.test.js
diff --git a/src/tree/index.js b/src/tree/index.js
