feat: Ability to have default values ✨ (#96)

dowjones · Apr 29, 2018 · ac89c4c · ac89c4c
1 parent 3cb2c3c
commit ac89c4c
Show file tree

Hide file tree

Showing 15 changed files with 1,252 additions and 1,698 deletions.
diff --git a/README.md b/README.md
@@ -216,17 +216,18 @@ Data for rendering the tree select items. The object requires the following stru
 
 ```js
 {
-  label,        // required: Checkbox label
-  value,        // required: Checkbox value
-  children,     // optional: Array of child objects
-  checked,      // optional: Initial state of checkbox. if true, checkbox is selected and corresponding pill is rendered.
-  disabled,     // optional: Selectable state of checkbox. if true, the checkbox is disabled and the node is not selectable.
-  expanded,     // optional: If true, the node is expanded (children of children nodes are not expanded by default unless children nodes also have expanded: true).
-  className,    // optional: Additional css class for the node. This is helpful to style the nodes your way
-  tagClassName, // optional: Css class for the corresponding tag. Use this to add custom style the pill corresponding to the node.
-  actions,      // optional: An array of extra action on the node (such as displaying an info icon or any custom icons/elements)
-  dataset,      // optional: Allows data-* attributes to be set on the node and tag elements
-  ...           // optional: Any extra properties that you'd like to receive during `onChange` event
+  label,          // required: Checkbox label
+  value,          // required: Checkbox value
+  children,       // optional: Array of child objects
+  checked,        // optional: Initial state of checkbox. if true, checkbox is selected and corresponding pill is rendered.
+  disabled,       // optional: Selectable state of checkbox. if true, the checkbox is disabled and the node is not selectable.
+  expanded,       // optional: If true, the node is expanded (children of children nodes are not expanded by default unless children nodes also have expanded: true).
+  className,      // optional: Additional css class for the node. This is helpful to style the nodes your way
+  tagClassName,   // optional: Css class for the corresponding tag. Use this to add custom style the pill corresponding to the node.
+  actions,        // optional: An array of extra action on the node (such as displaying an info icon or any custom icons/elements)
+  dataset,        // optional: Allows data-* attributes to be set on the node and tag elements
+  isDefaultValue, // optional: Indicate if a node is a default value. When true, the dropdown will automatically select the node(s) when there is no other selected node. Can be used on more than one node.
+  ...             // optional: Any extra properties that you'd like to receive during `onChange` event
 }
 ```
 
@@ -434,6 +435,8 @@ npm lint  // fixes anything that can be fixed and reports remaining errors
 npm run test:cov  // test coverage
 ```
 
+**Note:** If your browser doesn't hot reload or reflect changes during `npm run demo`, then delete `docs/bundle.js` and try again. Before submitting final PR, run `npm run build:docs` to build the bundle.js file again.
+
 ## License
 
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](/LICENSE)

diff --git a/docs/bundle.js b/docs/bundle.js
diff --git a/docs/index.html b/docs/index.html
@@ -1,16 +1,15 @@
 <!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>
+    <head>
+        <title>React Dropdown Tree Select Demo</title>
+        <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>
-    <div id="app"></div>
-    <script src="bundle.js"></script>
-</body>
+    <body>
+        <div id="app"></div>
+        <script src="bundle.js"></script>
+    </body>
 
 </html>
diff --git a/docs/src/App.js b/docs/src/App.js
@@ -6,6 +6,7 @@ import HOCReadme from './stories/HOCReadme'
 import Readme from './stories/Readme'
 import Simple from './stories/Simple'
 import Options from './stories/Options'
+import DefaultValues from './stories/DefaultValues'
 
 import './stories/utils/prism.css'
 
@@ -15,6 +16,7 @@ const stories = [
 
   { name: 'Basic (no extra styles)', component: Simple },
   { name: 'Options', component: Options },
+  { name: 'Default Values', component: DefaultValues },
   { name: 'With Bootstrap Styles', component: CodeSandbox('382pjronm') },
   { name: 'With Material Design Styles', component: CodeSandbox('2o1pv6925p') },
   { name: 'With Country flags', component: CodeSandbox('6w41wlvj8z') },