fix: Bundle text props

Author: ellinge

README.md

@@ -45,17 +45,14 @@ 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)
   - [simpleSelect](#simpleselect)
   - [showPartiallySelected](#showpartiallyselected)
   - [showDropdown](#showDropdown)
   - [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)
@@ -280,17 +277,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...`
+Texts to override output for
 
-### noMatchesText
-
-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
 
@@ -339,18 +339,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
@@ -443,10 +431,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?

__snapshots__/src/index.test.js.md

@@ -27,6 +27,7 @@ Generated by [AVA](https://ava.li).
             onKeyDown={Function {}}
             onTagRemove={Function {}}
             tags={[]}
+            texts={{}}
           />
         </a>
       </div>
@@ -103,6 +104,7 @@ Generated by [AVA](https://ava.li).
       onBlur={Function onBlur {}}
       onChange={Function onChange {}}
       onFocus={Function onFocus {}}
+      texts={{}}
     >
       <div
         className="react-dropdown-tree-select"
@@ -123,6 +125,7 @@ Generated by [AVA](https://ava.li).
               onKeyDown={Function {}}
               onTagRemove={Function {}}
               tags={[]}
+              texts={{}}
             >
               <ul
                 className="tag-list"
@@ -171,6 +174,7 @@ Generated by [AVA](https://ava.li).
             onKeyDown={Function {}}
             onTagRemove={Function {}}
             tags={[]}
+            texts={{}}
           />
         </a>
         <div

__snapshots__/src/index.test.js.snap

@@ -4,6 +4,7 @@ We've made some changes in the component between the versions which is covered i
 
 ### Property changes
 
-| Description                                                              | Usage before                           | Usage after           |
-| ------------------------------------------------------------------------ | -------------------------------------- | --------------------- |
-| Added a new radio select mode<br>Selection is done in a shared mode-prop | `simpleSelect={true}` / `simpleSelect` | `mode='simpleSelect'` |
+| Description                                                              | Usage before                                                | Usage after                                                   |
+| ------------------------------------------------------------------------ | ----------------------------------------------------------- | ------------------------------------------------------------- |
+| Added a new radio select mode<br>Selection is done in a shared mode-prop | `simpleSelect={true}` / `simpleSelect`                      | `mode='simpleSelect'`                                         |
+| Bundled text props into a single object                                  | `placeholderText='My text'`<br>`noMatchesText='No matches'` | `texts={{ placeholder: 'My text', noMatches: 'No matches' }}` |

docs/guides/migrating-from-1-to-2.md

@@ -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 simpleSelect 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 simpleSelect texts={{ label: 'test' }} />
+      <DropdownTreeSelect data={tree} showDropDown simpleSelect texts={{ label: 'test' }} />
     </div>
   )
   const domNode = component.getDOMNode()

src/a11y/a11y.test.js

@@ -27,7 +27,12 @@ class DropdownTreeSelect extends Component {
     clearSearchOnChange: PropTypes.bool,
     keepTreeOnSearch: PropTypes.bool,
     keepChildrenOnSearch: PropTypes.bool,
-    placeholderText: PropTypes.string,
+    texts: PropTypes.shape({
+      placeholder: PropTypes.string,
+      noMatches: PropTypes.string,
+      label: PropTypes.string,
+      labelRemove: PropTypes.string,
+    }),
     showDropdown: PropTypes.bool,
     className: PropTypes.string,
     onChange: PropTypes.func,
@@ -36,20 +41,18 @@ class DropdownTreeSelect extends Component {
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
     simpleSelect: PropTypes.bool,
-    noMatchesText: PropTypes.string,
     showPartiallySelected: PropTypes.bool,
     disabled: PropTypes.bool,
     readOnly: PropTypes.bool,
     hierarchical: PropTypes.bool,
     id: PropTypes.string,
-    label: PropTypes.string,
-    labelRemove: PropTypes.string,
   }
 
   static defaultProps = {
     onFocus: () => {},
     onBlur: () => {},
     onChange: () => {},
+    texts: {},
   }
 
   constructor(props) {
@@ -288,7 +291,7 @@ class DropdownTreeSelect extends Component {
                 this.searchInput = el
               }}
               tags={this.state.tags}
-              placeholderText={this.props.placeholderText}
+              texts={this.props.texts}
               onInputChange={this.onInputChange}
               onFocus={this.onInputFocus}
               onBlur={this.onInputBlur}
@@ -297,14 +300,12 @@ class DropdownTreeSelect extends Component {
               disabled={this.props.disabled}
               readOnly={this.props.readOnly}
               activeDescendant={activeDescendant}
-              label={this.props.label}
-              labelRemove={this.props.labelRemove}
             />
           </a>
           {this.state.showDropdown && (
             <div className={cx('dropdown-content')}>
               {this.state.allNodesHidden ? (
-                <span className="no-matches">{this.props.noMatchesText || 'No matches found'}</span>
+                <span className="no-matches">{this.props.texts.noMatches || 'No matches found'}</span>
               ) : (
                 <Tree
                   data={this.state.tree}

src/index.js

@@ -221,14 +221,14 @@ test('detects click outside when other dropdown instance', t => {
 
 test('adds aria-labelledby when label contains # to search input', t => {
   const { tree } = t.context
-  const wrapper = mount(<DropdownTreeSelect data={tree} label="#hello #world" />)
+  const wrapper = mount(<DropdownTreeSelect data={tree} texts={{ label: '#hello #world' }} />)
   t.deepEqual(wrapper.find('.search').prop('aria-labelledby'), 'hello world')
   t.deepEqual(wrapper.find('.search').prop('aria-label'), undefined)
 })
 
 test('adds aria-label when having label on search input', t => {
   const { tree } = t.context
-  const wrapper = mount(<DropdownTreeSelect data={tree} label="hello world" />)
+  const wrapper = mount(<DropdownTreeSelect data={tree} texts={{ label: 'hello world' }} />)
   t.deepEqual(wrapper.find('.search').prop('aria-labelledby'), undefined)
   t.deepEqual(wrapper.find('.search').prop('aria-label'), 'hello world')
 })

src/index.test.js

@@ -28,7 +28,7 @@ const getTags = (tags = [], onDelete, readOnly, disabled, labelRemove) =>
 class Input extends PureComponent {
   static propTypes = {
     tags: PropTypes.array,
-    placeholderText: PropTypes.string,
+    texts: PropTypes.object,
     onInputChange: PropTypes.func,
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
@@ -38,8 +38,6 @@ class Input extends PureComponent {
     disabled: PropTypes.bool,
     readOnly: PropTypes.bool,
     activeDescendant: PropTypes.string,
-    label: PropTypes.string,
-    labelRemove: PropTypes.string,
   }
 
   constructor(props) {
@@ -57,35 +55,33 @@ class Input extends PureComponent {
       tags,
       onTagRemove,
       inputRef,
-      placeholderText = 'Choose...',
+      texts = {},
       onFocus,
       onBlur,
       disabled,
       readOnly,
       onKeyDown,
       activeDescendant,
-      label,
-      labelRemove,
     } = this.props
 
     return (
       <ul className={cx('tag-list')}>
-        {getTags(tags, onTagRemove, readOnly, disabled, labelRemove)}
+        {getTags(tags, onTagRemove, readOnly, disabled, texts.labelRemove)}
         <li className={cx('tag-item')}>
           <input
             type="text"
             disabled={disabled}
             ref={inputRef}
             className={cx('search')}
-            placeholder={placeholderText}
+            placeholder={texts.placeholder || 'Choose...'}
             onKeyDown={onKeyDown}
             onChange={this.handleInputChange}
             onFocus={onFocus}
             onBlur={onBlur}
             readOnly={readOnly}
             aria-activedescendant={activeDescendant}
             aria-autocomplete={onKeyDown ? 'list' : undefined}
-            {...getAriaLabel(label)}
+            {...getAriaLabel(texts.label)}
           />
         </li>
       </ul>

src/input/index.js

@@ -19,7 +19,7 @@ test('renders input when no tags are passed', t => {
 
 test('renders placeholder', t => {
   const placeholderText = 'select something'
-  const wrapper = toJson(shallow(<Input placeholderText={placeholderText} />))
+  const wrapper = toJson(shallow(<Input texts={{ placeholder: placeholderText }} />))
   t.snapshot(wrapper)
 })
 

src/input/index.test.js

@@ -15,8 +15,8 @@ declare module "react-dropdown-tree-select" {
          * NOTE this works only in combination with keepTreeOnSearch
          */
         keepChildrenOnSearch?: boolean;
-        /** The text to display as placeholder on the search box. Defaults to Choose... */
-        placeholderText?: string;
+        /** Texts to override output for */
+        texts?: TextProps;
         /** If set to true, shows the dropdown when rendered.
          * This can be used to render the component with the dropdown open as its initial state
          */
@@ -51,8 +51,6 @@ declare module "react-dropdown-tree-select" {
          * Defaults to false
          */
         simpleSelect?: boolean;
-        /** The text to display when the search does not find results in the content list. Defaults to No matches found */
-        noMatchesText?: string;
         /** 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 pseudo class.
          * Simply add desired styles to .node.partial .checkbox-item:indeterminate { ... } in your CSS
@@ -70,10 +68,6 @@ declare module "react-dropdown-tree-select" {
          * Use to ensure a own unique id when a simple counter is not sufficient, e.g in a partial server render (SSR)
          */
         id?: string;
-        /** Adds `aria-labelledby` to search input when input starts with `#`, adds `aria-label` to search input when label has value (not containing '#') */
-        label?: 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 */
-        labelRemove?: string;
     }
 
     export interface DropdownTreeSelectState {
@@ -126,6 +120,17 @@ declare module "react-dropdown-tree-select" {
         children?: TreeNode[];
     }
 
+    export interface TextProps {
+        /** The text to display as placeholder on the search box. Defaults to Choose... */
+        placeholderT: string;
+        /** The text to display when the search does not find results in the content list. Defaults to No matches found */
+        noMatches: string;
+        /** Adds `aria-labelledby` to search input when input starts with `#`, adds `aria-label` to search input when label has value (not containing '#') */
+        label?: 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 */
+        labelRemove?: string;
+    }
+
     export interface NodeAction {
         /** CSS class for the node. e.g. `fa fa-info` */
         className: string;