feat: Display Partially selected nodes ✨ (#73)

Author: mrchief

.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "parser": "babel-eslint",
-  "extends": ["standard", "react-app"],
+  "extends": ["standard", "react-app", "eslint:recommended"],
   "rules": {
     "react/jsx-filename-extension": [
       1,
@@ -15,6 +15,15 @@
       }
     ],
     "import/prefer-default-export": 0,
+    "object-curly-newline": [
+      "error",
+      {
+        "ObjectExpression": { "multiline": true, "minProperties": 3 },
+        "ObjectPattern": { "multiline": true, "minProperties": 3 },
+        "ImportDeclaration": { "multiline": true, "minProperties": 3 },
+        "ExportDeclaration": { "multiline": true, "minProperties": 3 }
+      }
+    ],
     "no-underscore-dangle": 0,
     "no-plusplus": 0,
     "no-shadow": 0,

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+    "spellright.language": "en",
+    "spellright.documentTypes": [
+        "markdown",
+        "latex",
+        "plaintext",
+        "javascript"
+    ]
+}

README.md

@@ -24,7 +24,7 @@
 
 ## React Dropdown Tree Select
 
-A lightweight and fast control to render a select component that can display hierarchical tree data. In addition, the control shows the selection in pills and allows user to search the options for quick filtering and selection.
+A lightweight and fast control to render a select component that can display hierarchical tree data. In addition, the control shows the selection in pills and allows user to search the options for quick filtering and selection. Also supports displaying partially selected nodes.
 
 ## Table of Contents
 
@@ -35,6 +35,8 @@ A lightweight and fast control to render a select component that can display hie
   * [With Material Design](#with-material-design)
   * [As Single Select](#as-single-select)
 * [Install](#install)
+  * [As NPM package](#as-npm-package)
+  * [Using a CDN](#using-a-cdn)
   * [Peer Dependencies](#peer-dependencies)
 * [Usage](#usage)
 * [Props](#props)
@@ -46,6 +48,7 @@ A lightweight and fast control to render a select component that can display hie
   * [noMatchesText](#noMatchesText)
   * [keepTreeOnSearch](#keeptreeonsearch)
   * [simpleSelect](#simpleselect)
+  * [showPartiallySelected](#showPartiallySelected)
 * [Styling and Customization](#styling-and-customization)
   * [Using default styles](#default-styles)
   * [Customizing with Bootstrap, Material Design styles](#customizing-styles)
@@ -83,24 +86,46 @@ Online demo: https://dowjones.github.io/react-dropdown-tree-select/#/story/simpl
 
 ## Install
 
-```
-> npm i react-dropdown-tree-select
+### As NPM package
+
+```js
+npm i react-dropdown-tree-select
 
 // or if using yarn
+yarn add react-dropdown-tree-select
+```
+
+### Using a CDN
 
-> yarn add react-dropdown-tree-select
+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">
 ```
 
+**Note:** Above example will always fetch the latest version. To fetch a specific version, use `https://unpkg.com/react-dropdown-tree-select@<version>/dist/...`
+Visit [unpkg.com](https://unpkg.com/#/) to see other options.
+
 ### Peer Dependencies
 
 In order to avoid version conflicts in your project, you must specify and install [react](https://www.npmjs.com/package/react), [react-dom](https://www.npmjs.com/package/react-dom) as [peer dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/). Note that NPM doesn't install peer dependencies automatically. Instead it will show you a warning message with instructions on how to install them.
 
+If you're using the UMD builds, you'd also need to install the peer dependencies in your application:
+
+```html
+<script src="https://unpkg.com/react/dist/react.js"></script>
+<script src="https://unpkg.com/react-dom/dist/react-dom.js"></script>
+```
+
 ## Usage
 
 ```jsx
 import React from 'react'
 import ReactDOM from 'react-dom'
+
 import DropdownTreeSelect from 'react-dropdown-tree-select'
+import 'react-dropdown-tree-select/dist/styles.css'
 
 const data = {
   label: 'search me',
@@ -129,15 +154,7 @@ const onNodeToggle = currentNode => {
   console.log('onNodeToggle::', currentNode)
 }
 
-ReactDOM.render(
-  <DropdownTreeSelect
-    data={data}
-    onChange={onChange}
-    onAction={onAction}
-    onNodeToggle={onNodeToggle}
-  />,
-  document.body
-) // in real world, you'd want to render to an element, instead of body.
+ReactDOM.render(<DropdownTreeSelect data={data} onChange={onChange} onAction={onAction} onNodeToggle={onNodeToggle} />, document.body) // in real world, you'd want to render to an element, instead of body.
 ```
 
 ## Props
@@ -244,6 +261,12 @@ 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`.
 
+### showPartiallySelected
+
+Type: `bool` (default: `false`)
+
+If set to true, shows checkboxes in a partial state when one, but not all of their children are selected. Allows styling of partially selected nodes as well, by using [:indeterminate](https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate) pseudo class. Simply add desired styles to `.node.partial .checkbox-item:indeterminate { ... }` in your CSS.
+
 ## Styling and Customization
 
 ### Default styles

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

@@ -0,0 +1,23 @@
+# Snapshot report for `src\checkbox\index.test.js`
+
+The actual snapshot is saved in `index.test.js.snap`.
+
+Generated by [AVA](https://ava.li).
+
+## Checkbox component
+
+> Snapshot 1
+
+    <input
+      className="sample"
+      type="checkbox"
+    />
+
+## renders disabled state
+
+> Snapshot 1
+
+    <input
+      disabled={true}
+      type="checkbox"
+    />

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

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "no-console": 0
+  }
+}

docs/.eslintrc.json

@@ -1,17 +1,20 @@
 import React from 'react'
 import ReactStory, { defaultProps } from 'react-story'
 
-import CodeSandbox from './CodeSandbox.js'
-import HOCReadme from './stories/HOCReadme.js'
-import Readme from './stories/Readme.js'
+import CodeSandbox from './CodeSandbox'
+import HOCReadme from './stories/HOCReadme'
+import Readme from './stories/Readme'
+import Simple from './stories/Simple'
+import Options from './stories/Options'
 
 import './stories/utils/prism.css'
 
 const stories = [
   { name: 'Readme', component: Readme },
   { name: 'HOC Readme', component: HOCReadme },
 
-  { name: 'With Vanilla Styles', component: CodeSandbox('v0nmw5ykk5') },
+  { name: 'Basic (no extra styles)', component: Simple },
+  { name: 'Options', component: Options },
   { name: 'With Bootstrap Styles', component: CodeSandbox('382pjronm') },
   { name: 'With Material Design Styles', component: CodeSandbox('2o1pv6925p') },
   { name: 'With Country flags', component: CodeSandbox('6w41wlvj8z') },
@@ -31,35 +34,33 @@ const stories = [
   { name: 'Tree Node Paths (HOC)', component: CodeSandbox('l765q6lmrq') }
 ]
 
-export default class App extends React.Component {
-  render() {
-    return (
-      <ReactStory
-        style={{
-          display: 'block',
-          width: '100%',
-          height: '100%'
+const App = () => (
+  <ReactStory
+    style={{
+      display: 'block',
+      width: '100%',
+      height: '100%'
+    }}
+    pathPrefix="story/"
+    Story={props => (
+      <defaultProps.StoryWrapper
+        css={{
+          padding: 0,
+          display: 'flex',
+          flexDirection: 'column'
         }}
-        pathPrefix="story/"
-        Story={props => (
-          <defaultProps.StoryWrapper
-            css={{
-              padding: 0,
-              display: 'flex',
-              flexDirection: 'column'
-            }}
-          >
-            <div
-              {...props}
-              style={{
-                flex: '1 0 auto',
-                position: 'relative'
-              }}
-            />
-          </defaultProps.StoryWrapper>
-        )}
-        stories={stories}
-      />
-    )
-  }
-}
+      >
+        <div
+          {...props}
+          style={{
+            flex: '1 0 auto',
+            position: 'relative'
+          }}
+        />
+      </defaultProps.StoryWrapper>
+    )}
+    stories={stories}
+  />
+)
+
+export default App

docs/src/App.js

@@ -1,29 +1,11 @@
-html, body, #app {
+html,
+body,
+#app {
   height: 100%;
 }
 
 body {
   margin: 0;
   padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;;
-}
-
-.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;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }

docs/src/index.css

@@ -0,0 +1,37 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+
+class Checkbox extends PureComponent {
+  state = {isChecked: this.props.checked || false}
+
+  toggleCheckboxChange = () => {
+    const { onChange, value } = this.props
+
+    this.setState(({ isChecked }) => ({isChecked: !isChecked}))
+
+    onChange(value)
+  }
+
+  render() {
+    const { label, value } = this.props
+    const { isChecked } = this.state
+
+    return (
+      <div className="checkbox">
+        <label>
+          <input type="checkbox" value={value} defaultChecked={isChecked} onChange={this.toggleCheckboxChange} />
+          {label}
+        </label>
+      </div>
+    )
+  }
+}
+
+Checkbox.propTypes = {
+  label: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  checked: PropTypes.bool
+}
+
+export default Checkbox