feat: Support placeholder for inline search input (#404)

ldeveber · mrchief · web-flow · commit dd2dbbc9a60f · 2020-09-27T20:27:46.000-04:00
Co-authored-by: Hrusikesh Panda &lt;mrchief@users.noreply.github.com&gt;
diff --git a/README.md b/README.md
@@ -299,10 +299,11 @@ The `texts` object requires the following structure:
 
 ```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`
+  placeholder,              // optional: The text to display as placeholder on the search box. Defaults to `Choose...`
+  inlineSearchPlaceholder,  // optional: The text to display as placeholder on the inline search box. Only applicable with the `inlineSearchInput` setting. Defaults to `Search...`
+  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`
 }
 ```
 
@@ -592,6 +593,7 @@ Released 2017 by [Hrusikesh Panda](https://github.com/mrchief) @ [Dow Jones](htt
 Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+
 <!-- prettier-ignore -->
 | [<img src="https://avatars0.githubusercontent.com/u/966550?v=4" width="100px;" alt="toofff"/><br /><sub><b>toofff</b></sub>](http://www.yanoucrea.fr)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3Atoofff "Bug reports") [💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=toofff "Code") [📖](https://github.com/dowjones/react-dropdown-tree-select/commits?author=toofff "Documentation") [🤔](#ideas-toofff "Ideas, Planning, & Feedback") | [<img src="https://avatars3.githubusercontent.com/u/1257968?v=4" width="100px;" alt="Grégory Copin"/><br /><sub><b>Grégory Copin</b></sub>](http://www.les-tilleuls.coop)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3AGregcop1 "Bug reports") [💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=Gregcop1 "Code") | [<img src="https://avatars1.githubusercontent.com/u/7589718?v=4" width="100px;" alt="PRIYANSHU AGRAWAL"/><br /><sub><b>PRIYANSHU AGRAWAL</b></sub>](https://github.com/priyanshu92)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3Apriyanshu92 "Bug reports") [💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=priyanshu92 "Code") [🤔](#ideas-priyanshu92 "Ideas, Planning, & Feedback") | [<img src="https://avatars3.githubusercontent.com/u/425261?v=4" width="100px;" alt="James Greenaway"/><br /><sub><b>James Greenaway</b></sub>](http://james.greenaway.io)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3Ajvgreenaway "Bug reports") [💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=jvgreenaway "Code") [🤔](#ideas-jvgreenaway "Ideas, Planning, & Feedback") | [<img src="https://avatars1.githubusercontent.com/u/36223986?v=4" width="100px;" alt="itrombitas"/><br /><sub><b>itrombitas</b></sub>](https://github.com/itrombitas)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=itrombitas "Code") | [<img src="https://avatars2.githubusercontent.com/u/18341459?v=4" width="100px;" alt="Dave Henton"/><br /><sub><b>Dave Henton</b></sub>](https://github.com/davehenton)<br />[🚇](#infra-davehenton "Infrastructure (Hosting, Build-Tools, etc)") | [<img src="https://avatars3.githubusercontent.com/u/4869717?v=4" width="100px;" alt="Swetha Kolli"/><br /><sub><b>Swetha Kolli</b></sub>](https://github.com/nagaskolli)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=nagaskolli "Code") |
 | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
diff --git a/__snapshots__/src/index.test.js.md b/__snapshots__/src/index.test.js.md
@@ -30,6 +30,7 @@ Generated by [AVA](https://ava.li).
           >
             <Input
               clientId="rdts"
+              inlineSearchInput={false}
               inputRef={Function inputRef {}}
               onBlur={Function {}}
               onFocus={Function {}}
@@ -203,6 +204,7 @@ Generated by [AVA](https://ava.li).
         >
           <Input
             clientId="rdts"
+            inlineSearchInput={true}
             inputRef={Function inputRef {}}
             onBlur={Function {}}
             onFocus={Function {}}
@@ -370,6 +372,7 @@ Generated by [AVA](https://ava.li).
             <Input
               clientId="rdts"
               disabled={true}
+              inlineSearchInput={false}
               inputRef={Function inputRef {}}
               onBlur={Function {}}
               onFocus={Function {}}
@@ -506,6 +509,7 @@ Generated by [AVA](https://ava.li).
                   >
                     <Input
                       clientId="rdts"
+                      inlineSearchInput={false}
                       inputRef={Function inputRef {}}
                       mode="radioSelect"
                       onBlur={Function {}}
@@ -655,6 +659,7 @@ Generated by [AVA](https://ava.li).
                   >
                     <Input
                       clientId="rdts"
+                      inlineSearchInput={false}
                       inputRef={Function inputRef {}}
                       onBlur={Function {}}
                       onFocus={Function {}}
@@ -708,6 +713,7 @@ Generated by [AVA](https://ava.li).
           >
             <Input
               clientId="rdts"
+              inlineSearchInput={false}
               inputRef={Function inputRef {}}
               onBlur={Function {}}
               onFocus={Function {}}
diff --git a/__snapshots__/src/index.test.js.snap b/__snapshots__/src/index.test.js.snap
diff --git a/__snapshots__/src/input/index.test.js.md b/__snapshots__/src/input/index.test.js.md
@@ -4,6 +4,17 @@ The actual snapshot is saved in `index.test.js.snap`.
 
 Generated by [AVA](https://ava.li).
 
+## renders inline search placeholder
+
+> Snapshot 1
+
+    <input
+      className="search"
+      onChange={Function {}}
+      placeholder="Search something"
+      type="text"
+    />
+
 ## renders input
 
 > Snapshot 1
diff --git a/__snapshots__/src/input/index.test.js.snap b/__snapshots__/src/input/index.test.js.snap
diff --git a/docs/src/stories/Options/index.js b/docs/src/stories/Options/index.js
@@ -20,6 +20,8 @@ class WithOptions extends PureComponent {
       disabled: false,
       readOnly: false,
       hierarchical: false,
+      placeholder: 'Choose...',
+      inlineSearchPlaceholder: 'Search...',
     }
   }
 
@@ -48,6 +50,8 @@ class WithOptions extends PureComponent {
       readOnly,
       showDropdown,
       inlineSearchInput,
+      placeholder,
+      inlineSearchPlaceholder,
     } = this.state
 
     return (
@@ -83,6 +87,24 @@ class WithOptions extends PureComponent {
               <option value="always">Always</option>
             </select>
           </div>
+          <div style={{ marginBottom: '10px' }}>
+            <label htmlFor="placeholder">Placeholder text: </label>
+            <input
+              id="placeholder"
+              type="text"
+              value={placeholder}
+              onChange={e => this.setState({ placeholder: e.target.value })}
+            />
+          </div>
+          <div style={{ marginBottom: '10px' }}>
+            <label htmlFor="inlinePlaceholderText">Inline placeholder text: </label>
+            <input
+              id="inlineSearchPlaceholder"
+              type="text"
+              value={inlineSearchPlaceholder}
+              onChange={e => this.setState({ inlineSearchPlaceholder: e.target.value })}
+            />
+          </div>
           <Checkbox
             label="Inline Search Input"
             value="inlineSearchInput"
@@ -132,7 +154,7 @@ class WithOptions extends PureComponent {
             readOnly={readOnly}
             inlineSearchInput={inlineSearchInput}
             showDropdown={showDropdown}
-            texts={{ label: 'Demo Dropdown' }}
+            texts={{ label: 'Demo Dropdown', placeholder, inlineSearchPlaceholder }}
           />
         </div>
       </div>
diff --git a/src/index.js b/src/index.js
@@ -29,6 +29,7 @@ class DropdownTreeSelect extends Component {
     keepOpenOnSelect: PropTypes.bool,
     texts: PropTypes.shape({
       placeholder: PropTypes.string,
+      inlineSearchPlaceholder: PropTypes.string,
       noMatches: PropTypes.string,
       label: PropTypes.string,
       labelRemove: PropTypes.string,
@@ -306,6 +307,7 @@ class DropdownTreeSelect extends Component {
         onBlur={this.onInputBlur}
         onKeyDown={this.onKeyboardKeyDown}
         {...commonProps}
+        inlineSearchInput={inlineSearchInput}
       />
     )
     return (
diff --git a/src/input/index.js b/src/input/index.js
@@ -30,15 +30,27 @@ class Input extends PureComponent {
   }
 
   render() {
-    const { inputRef, texts = {}, onFocus, onBlur, disabled, readOnly, onKeyDown, activeDescendant } = this.props
+    const {
+      inputRef,
+      texts = {},
+      onFocus,
+      onBlur,
+      disabled,
+      readOnly,
+      onKeyDown,
+      activeDescendant,
+      inlineSearchInput,
+    } = this.props
 
     return (
       <input
         type="text"
         disabled={disabled}
         ref={inputRef}
         className="search"
-        placeholder={texts.placeholder || 'Choose...'}
+        placeholder={
+          inlineSearchInput ? texts.inlineSearchPlaceholder || 'Search...' : texts.placeholder || 'Choose...'
+        }
         onKeyDown={onKeyDown}
         onChange={this.handleInputChange}
         onFocus={onFocus}
diff --git a/src/input/index.test.js b/src/input/index.test.js
@@ -17,6 +17,14 @@ test('renders placeholder', t => {
   t.snapshot(wrapper)
 })
 
+test('renders inline search placeholder', t => {
+  const placeholderText = 'Search something'
+  const wrapper = toJson(
+    shallow(<Input inlineSearchInput={true} texts={{ inlineSearchPlaceholder: placeholderText }} />)
+  )
+  t.snapshot(wrapper)
+})
+
 test('raises onchange', t => {
   const onChange = spy()
   const wrapper = shallow(<Input onInputChange={onChange} />)
