feat: Group logically related props together (#242) ⚡️

README.md

@@ -45,20 +45,19 @@ A lightweight and fast control to render a select component that can display hie
   - [onChange](#onchange)
   - [onNodeToggle](#onnodetoggle)
   - [data](#data)
-  - [placeholderText](#placeholdertext)
-  - [noMatchesText](#nomatchestext)
+  - [texts](#texts)
   - [keepTreeOnSearch](#keeptreeonsearch)
   - [keepChildrenOnSearch](#keepchildrenonsearch)
   - [keepOpenOnSelect](#keepopenonselect)
-  - [simpleSelect](#simpleselect)
-  - [radioSelect](#radioSelect)
+  - [mode](#mode)
+    - [multiSelect](#multiSelect)
+    - [simpleSelect](#simpleSelect)
+    - [radioSelect](#radioSelect)
   - [showPartiallySelected](#showpartiallyselected)
   - [showDropdown](#showDropdown)
   - [showDropdownAlways](#showDropdownAlways)
   - [form states (disabled|readOnly)](#formstates)
   - [id](#id)
-  - [label](#label)
-  - [labelRemove](#labelRemove)
 - [Styling and Customization](#styling-and-customization)
   - [Using default styles](#default-styles)
   - [Customizing with Bootstrap, Material Design styles](#customizing-styles)
@@ -283,17 +282,20 @@ The `action` object requires the following structure:
 
 An array renders a tree with multiple root level items whereas an object renders a tree with a single root element (e.g. a `Select All` root node).
 
-### placeholderText
+### texts
 
-Type: `string`
-
-The text to display as placeholder on the search box. Defaults to `Choose...`
-
-### noMatchesText
+Texts to override various labels, place holders & messages used in the component. You can also use this to provide translated messages.
 
-Type: `string`
+The `texts` object requires the following structure:
 
-The text to display when the search does not find results in the content list. Defaults to `No matches found`
+```js
+{
+  placeholder,  // optional: The text to display as placeholder on the search box. Defaults to `Choose...`
+  noMatches,    // optional: The text to display when the search does not find results in the content list. Defaults to `No matches found`
+  label,        // optional: Adds `aria-labelledby` to search input when input starts with `#`, adds `aria-label` to search input when label has value (not containing '#')
+  labelRemove,  // optional: The text to display for `aria-label` on tag delete buttons which is combined with `aria-labelledby` pointing to the node label. Defaults to `Remove`
+}
+```
 
 ### keepTreeOnSearch
 
@@ -317,21 +319,29 @@ Keeps single selects open after selection. Defaults to `false`
 
 _NOTE_ this works only in combination with `simpleSelect` or `radioSelect`
 
-### simpleSelect
+### mode
 
-Type: `bool` (default: `false`)
+Type: `string` (default: `multiSelect`)
 
-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`.
+Defines how the dropdown is rendered / behaves
 
-_NOTE_ if multiple nodes in data are selected, `checked` or `isDefaultValue`, only the first visited node is selected
+#### multiSelect
 
-### radioSelect
+This is the default mode. A multi selectable dropdown which supports hierarchical data.
 
-Type: `bool` (default: `false`)
+#### simpleSelect
+
+Turns the dropdown into a simple, single select dropdown. If you pass tree data, only immediate children are picked, grandchildren nodes are ignored.
 
-Turns the dropdown into radio select dropdown. Similar to simpleSelect but keeps tree/children. Defaults to `false`.
+⚠️ If multiple nodes in data are selected - by setting either `checked` or `isDefaultValue`, only the first visited node stays selected.
 
-_NOTE_ if multiple nodes in data are selected, `checked` or `isDefaultValue`, only the first visited node is selected
+#### radioSelect
+
+Turns the dropdown into radio select dropdown.
+
+Like `simpleSelect`, you can only select one value; but keeps the tree/children structure.
+
+⚠️ If multiple nodes in data are selected - by setting either `checked` or `isDefaultValue`, only the first visited node stays selected.
 
 ### showPartiallySelected
 
@@ -366,18 +376,6 @@ Specific id for container. The container renders with a default id of `rdtsN` wh
 
 Use to ensure a own unique id when a simple counter is not sufficient, e.g in a partial server render (SSR)
 
-### label
-
-Type: `string`
-
-Adds `aria-labelledby` to search input when input starts with `#`, adds `aria-label` to search input when label has value (not containing '#')
-
-### labelRemove
-
-Type: `string`
-
-The text to display for `aria-label` on tag delete buttons which is combined with `aria-labelledby` pointing to the node label. Defaults to `Remove`
-
 ## Styling and Customization
 
 ### Default styles
@@ -386,10 +384,10 @@ The component brings minimal styles for bare-bones functional rendering. It is k
 
 #### Using WebPack
 
-If you're using a bundler like webpack, make sure you configure webpack to import the default styles. To do so, simply add this rule to your webpack config:
+If you're using a bundler like WebPack, make sure you configure WebPack to import the default styles. To do so, simply add this rule to your WebPack config:
 
 ```js
-// allow webpack to import/bundle styles from node_modules for this component
+// allow WebPack to import/bundle styles from node_modules for this component
 module: {
   rules: [
     {
@@ -470,10 +468,10 @@ Node toggling also achieves the expand/collapse effect by manipulating css class
 
 ### How do I change the placeholder text?
 
-The default [placeholder](#placeholdertext) is `Choose...`. If you want to change this to something else, you can use `placeholderText` property to set it.
+The default [placeholder](#texts) is `Choose...`. If you want to change this to something else, you can use `placeholder` property to set it.
 
 ```jsx
-<DropdownTreeSelect placeholderText="Search" />
+<DropdownTreeSelect texts={{ placeholder: 'Search' }} />
 ```
 
 ### How do I tweak styles?
@@ -486,11 +484,11 @@ Easy style customization is one of the design goals of this component. Every vis
 }
 ```
 
-The css classes needed to overide can be found by inspecting the component via developer tools (chrome/safari/ie) or firebug (firefox). You can also inspect the [source code](/src) or look in [examples](/docs/index.css).
+The css classes needed to override can be found by inspecting the component via developer tools (Chrome/Safari/IE/Edge/Firefox). You can also inspect the [source code](/src) or look in [examples](/docs/index.css).
 
 ### I do not want the default styles, do I need to fork the project?
 
-Absolutely not! Simply do not import the styles (webpack) or include it in your html (link tags). Roughly, this is the HTML/CSS skeleton rendered by the component:
+Absolutely not! Simply do not import the styles (WebPack) or include it in your html (link tags). Roughly, this is the HTML/CSS skeleton rendered by the component:
 
 ```pug
 div.react-dropdown-tree-select

__snapshots__/src/index.test.js.md

@@ -18,6 +18,7 @@ Generated by [AVA](https://ava.li).
         <Trigger
           onTrigger={Function {}}
           showDropdown={true}
+          texts={{}}
         >
           <Input
             inputRef={Function inputRef {}}
@@ -27,6 +28,7 @@ Generated by [AVA](https://ava.li).
             onKeyDown={Function {}}
             onTagRemove={Function {}}
             tags={[]}
+            texts={{}}
           />
         </Trigger>
         <div
@@ -157,6 +159,7 @@ Generated by [AVA](https://ava.li).
             onNodeToggle={Function {}}
             pageSize={100}
             searchModeOn={false}
+            texts={{}}
           />
         </div>
       </div>
@@ -177,6 +180,7 @@ Generated by [AVA](https://ava.li).
           disabled={true}
           onTrigger={Function {}}
           showDropdown={false}
+          texts={{}}
         >
           <Input
             disabled={true}
@@ -187,6 +191,7 @@ Generated by [AVA](https://ava.li).
             onKeyDown={Function {}}
             onTagRemove={Function {}}
             tags={[]}
+            texts={{}}
           />
         </Trigger>
       </div>
@@ -267,10 +272,11 @@ Generated by [AVA](https://ava.li).
         ]
       }
       id="rdts"
+      mode="radioSelect"
       onBlur={Function onBlur {}}
       onChange={Function onChange {}}
       onFocus={Function onFocus {}}
-      radioSelect={true}
+      texts={{}}
     >
       <div
         className="react-dropdown-tree-select"
@@ -280,9 +286,10 @@ Generated by [AVA](https://ava.li).
           className="dropdown radio-select"
         >
           <Trigger
+            mode="radioSelect"
             onTrigger={Function {}}
-            radioSelect={true}
             showDropdown={false}
+            texts={{}}
           >
             <a
               "aria-expanded"="false"
@@ -295,13 +302,14 @@ Generated by [AVA](https://ava.li).
             >
               <Input
                 inputRef={Function inputRef {}}
+                mode="radioSelect"
                 onBlur={Function {}}
                 onFocus={Function {}}
                 onInputChange={Function {}}
                 onKeyDown={Function {}}
                 onTagRemove={Function {}}
-                radioSelect={true}
                 tags={[]}
+                texts={{}}
               >
                 <ul
                   className="tag-list"
@@ -406,6 +414,7 @@ Generated by [AVA](https://ava.li).
       onBlur={Function onBlur {}}
       onChange={Function onChange {}}
       onFocus={Function onFocus {}}
+      texts={{}}
     >
       <div
         className="react-dropdown-tree-select"
@@ -417,6 +426,7 @@ Generated by [AVA](https://ava.li).
           <Trigger
             onTrigger={Function {}}
             showDropdown={false}
+            texts={{}}
           >
             <a
               "aria-expanded"="false"
@@ -435,6 +445,7 @@ Generated by [AVA](https://ava.li).
                 onKeyDown={Function {}}
                 onTagRemove={Function {}}
                 tags={[]}
+                texts={{}}
               >
                 <ul
                   className="tag-list"
@@ -475,6 +486,7 @@ Generated by [AVA](https://ava.li).
         <Trigger
           onTrigger={Function {}}
           showDropdown={true}
+          texts={{}}
         >
           <Input
             inputRef={Function inputRef {}}
@@ -484,6 +496,7 @@ Generated by [AVA](https://ava.li).
             onKeyDown={Function {}}
             onTagRemove={Function {}}
             tags={[]}
+            texts={{}}
           />
         </Trigger>
         <div
@@ -614,6 +627,7 @@ Generated by [AVA](https://ava.li).
             onNodeToggle={Function {}}
             pageSize={100}
             searchModeOn={false}
+            texts={{}}
           />
         </div>
       </div>

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

@@ -160,7 +160,7 @@ Generated by [AVA](https://ava.li).
         checked={false}
         id="0-0-0"
         label="item0-0-0"
-        simpleSelect={true}
+        mode="simpleSelect"
         value="value0-0-0"
       />
       <Actions
@@ -191,7 +191,7 @@ Generated by [AVA](https://ava.li).
         checked={true}
         id="0-0-0"
         label="item0-0-0"
-        simpleSelect={true}
+        mode="simpleSelect"
         value="value0-0-0"
       />
       <Actions

docs/src/stories/Options/index.js

@@ -14,8 +14,7 @@ class WithOptions extends PureComponent {
       clearSearchOnChange: false,
       keepTreeOnSearch: false,
       keepOpenOnSelect: false,
-      simpleSelect: false,
-      radioSelect: false,
+      mode: 'multiSelect',
       showPartiallySelected: false,
       disabled: false,
       readOnly: false,
@@ -42,8 +41,7 @@ class WithOptions extends PureComponent {
       clearSearchOnChange,
       keepTreeOnSearch,
       keepOpenOnSelect,
-      simpleSelect,
-      radioSelect,
+      mode,
       showPartiallySelected,
       disabled,
       readOnly,
@@ -62,6 +60,14 @@ class WithOptions extends PureComponent {
             padding: 10,
           }}
         >
+          <div style={{ marginBottom: '10px' }}>
+            <label htmlFor={mode}>Mode: </label>
+            <select id="mode" value={mode} onChange={e => this.setState({ mode: e.target.value })}>
+              <option value="multiSelect">Multi select</option>
+              <option value="simpleSelect">Simple select</option>
+              <option value="radioSelect">Radio select</option>
+            </select>
+          </div>
           <Checkbox
             label="Clear search on selection"
             value="clearSearchOnChange"
@@ -80,8 +86,6 @@ class WithOptions extends PureComponent {
             checked={keepOpenOnSelect}
             onChange={this.onOptionsChange}
           />
-          <Checkbox label="Simple Select" value="simpleSelect" checked={simpleSelect} onChange={this.onOptionsChange} />
-          <Checkbox label="Radio Select" value="radioSelect" checked={radioSelect} onChange={this.onOptionsChange} />
           <Checkbox
             label="Show Partially Selected"
             value="showPartiallySelected"
@@ -102,8 +106,7 @@ class WithOptions extends PureComponent {
             clearSearchOnChange={clearSearchOnChange}
             keepTreeOnSearch={keepTreeOnSearch}
             keepOpenOnSelect={keepOpenOnSelect}
-            simpleSelect={simpleSelect}
-            radioSelect={radioSelect}
+            mode={mode}
             showPartiallySelected={showPartiallySelected}
             disabled={disabled}
             readOnly={readOnly}

src/a11y/a11y.test.js

@@ -48,11 +48,11 @@ test('regular tree has no a11y exceptions', async t => {
   const { tree } = t.context
   const component = mountToDoc(
     <div>
-      <DropdownTreeSelect data={tree} showDropDown label="test" />
-      <DropdownTreeSelect data={tree} showDropDown disabled label="test" />
-      <DropdownTreeSelect data={tree} showDropDown readOnly label="test" />
-      <DropdownTreeSelect data={tree} showDropDown simpleSelect label="test" />
-      <DropdownTreeSelect data={tree} showDropDown radioSelect label="test" />
+      <DropdownTreeSelect data={tree} showDropDown texts={{ label: 'test' }} />
+      <DropdownTreeSelect data={tree} showDropDown disabled texts={{ label: 'test' }} />
+      <DropdownTreeSelect data={tree} showDropDown readOnly texts={{ label: 'test' }} />
+      <DropdownTreeSelect data={tree} showDropDown mode="simpleSelect" texts={{ label: 'test' }} />
+      <DropdownTreeSelect data={tree} showDropDown mode="radioSelect" texts={{ label: 'test' }} />
     </div>
   )
   const domNode = component.getDOMNode()