Skip to content

Commit 3ae4ebb

Browse files
ldevebermrchief
authored andcommitted
feat: Support placeholder for inline search input (dowjones#404)
Co-authored-by: Hrusikesh Panda <mrchief@users.noreply.github.com>
1 parent bec2b10 commit 3ae4ebb

File tree

9 files changed

+58
-6
lines changed

9 files changed

+58
-6
lines changed

README.md

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -299,10 +299,11 @@ The `texts` object requires the following structure:
299299

300300
```js
301301
{
302-
placeholder, // optional: The text to display as placeholder on the search box. Defaults to `Choose...`
303-
noMatches, // optional: The text to display when the search does not find results in the content list. Defaults to `No matches found`
304-
label, // optional: Adds `aria-labelledby` to search input when input starts with `#`, adds `aria-label` to search input when label has value (not containing '#')
305-
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`
302+
placeholder, // optional: The text to display as placeholder on the search box. Defaults to `Choose...`
303+
inlineSearchPlaceholder, // optional: The text to display as placeholder on the inline search box. Only applicable with the `inlineSearchInput` setting. Defaults to `Search...`
304+
noMatches, // optional: The text to display when the search does not find results in the content list. Defaults to `No matches found`
305+
label, // optional: Adds `aria-labelledby` to search input when input starts with `#`, adds `aria-label` to search input when label has value (not containing '#')
306+
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`
306307
}
307308
```
308309

@@ -592,6 +593,7 @@ Released 2017 by [Hrusikesh Panda](https://github.com/mrchief) @ [Dow Jones](htt
592593
Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
593594

594595
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
596+
595597
<!-- prettier-ignore -->
596598
| [<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") |
597599
| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
@@ -600,6 +602,7 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
600602
| [<img src="https://avatars3.githubusercontent.com/u/491877?v=4" width="100px;" alt="Lutz Lengemann"/><br /><sub><b>Lutz Lengemann</b></sub>](http://www.dealzeit.de)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=mobilutz "Code") | [<img src="https://avatars0.githubusercontent.com/u/26381655?v=4" width="100px;" alt="Akshay Dipta"/><br /><sub><b>Akshay Dipta</b></sub>](https://github.com/Eainde)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3AEainde "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/137158?v=4" width="100px;" alt="Ian Langworth ☠"/><br /><sub><b>Ian Langworth ☠</b></sub>](https://langworth.com/)<br />[🤔](#ideas-statico "Ideas, Planning, & Feedback") | [<img src="https://avatars1.githubusercontent.com/u/5932031?v=4" width="100px;" alt="Stoyan Berov"/><br /><sub><b>Stoyan Berov</b></sub>](https://github.com/stoberov)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3Astoberov "Bug reports") | [<img src="https://avatars0.githubusercontent.com/u/17863113?v=4" width="100px;" alt="ellinge"/><br /><sub><b>ellinge</b></sub>](https://github.com/ellinge)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=ellinge "Code") [🤔](#ideas-ellinge "Ideas, Planning, & Feedback") [🚧](#maintenance-ellinge "Maintenance") | [<img src="https://avatars3.githubusercontent.com/u/5017449?v=4" width="100px;" alt="Sandy M"/><br /><sub><b>Sandy M</b></sub>](https://github.com/moonjy1993)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=moonjy1993 "Code") [🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3Amoonjy1993 "Bug reports") | [<img src="https://avatars1.githubusercontent.com/u/529614?v=4" width="100px;" alt="Gustav Tonér"/><br /><sub><b>Gustav Tonér</b></sub>](https://www.gazab.se)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=gazab "Code") |
601603
| [<img src="https://avatars1.githubusercontent.com/u/3390897?v=4" width="100px;" alt="Kestutis Kasiulynas"/><br /><sub><b>Kestutis Kasiulynas</b></sub>](http://kYem.net)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3AkYem "Bug reports") [💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=kYem "Code") | [<img src="https://avatars3.githubusercontent.com/u/20484267?v=4" width="100px;" alt="Jesus Cabrera Gonzalez"/><br /><sub><b>Jesus Cabrera Gonzalez</b></sub>](https://github.com/isuscbrmid)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=isuscbrmid "Code") | [<img src="https://avatars2.githubusercontent.com/u/27359753?v=4" width="100px;" alt="MJRuskin"/><br /><sub><b>MJRuskin</b></sub>](https://github.com/MJRuskin)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=MJRuskin "Code") | [<img src="https://avatars1.githubusercontent.com/u/64946671?v=4" width="100px;" alt="akarshjairaj"/><br /><sub><b>akarshjairaj</b></sub>](https://github.com/akarshjairaj)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=akarshjairaj "Code") | [<img src="https://avatars1.githubusercontent.com/u/539090?v=4" width="100px;" alt="Artem Berdyshev"/><br /><sub><b>Artem Berdyshev</b></sub>](https://github.com/berdyshev)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=berdyshev "Code") [🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3Aberdyshev "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/42154031?v=4" width="100px;" alt="Matheus Wichman"/><br /><sub><b>Matheus Wichman</b></sub>](https://matheushw.com/)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=m4theushw "Code") | [<img src="https://avatars1.githubusercontent.com/u/60662654?v=4" width="100px;" alt="aarce-uncharted"/><br /><sub><b>aarce-uncharted</b></sub>](https://github.com/aarce-uncharted)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=aarce-uncharted "Code") |
602604
| [<img src="https://avatars0.githubusercontent.com/u/1795294?v=4" width="100px;" alt="Mohamad Othman"/><br /><sub><b>Mohamad Othman</b></sub>](http://osmancode.me)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=osmancode "Code") [🤔](#ideas-osmancode "Ideas, Planning, & Feedback") | [<img src="https://avatars3.githubusercontent.com/u/8286468?v=4" width="100px;" alt="kathleenlu"/><br /><sub><b>kathleenlu</b></sub>](https://github.com/smurfs2549)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=smurfs2549 "Code") [🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3Asmurfs2549 "Bug reports") |
605+
603606
<!-- ALL-CONTRIBUTORS-LIST:END -->
604607

605608
This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!

__snapshots__/src/index.test.js.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ Generated by [AVA](https://ava.li).
3030
>
3131
<Input
3232
clientId="rdts"
33+
inlineSearchInput={false}
3334
inputRef={Function inputRef {}}
3435
onBlur={Function {}}
3536
onFocus={Function {}}
@@ -203,6 +204,7 @@ Generated by [AVA](https://ava.li).
203204
>
204205
<Input
205206
clientId="rdts"
207+
inlineSearchInput={true}
206208
inputRef={Function inputRef {}}
207209
onBlur={Function {}}
208210
onFocus={Function {}}
@@ -370,6 +372,7 @@ Generated by [AVA](https://ava.li).
370372
<Input
371373
clientId="rdts"
372374
disabled={true}
375+
inlineSearchInput={false}
373376
inputRef={Function inputRef {}}
374377
onBlur={Function {}}
375378
onFocus={Function {}}
@@ -506,6 +509,7 @@ Generated by [AVA](https://ava.li).
506509
>
507510
<Input
508511
clientId="rdts"
512+
inlineSearchInput={false}
509513
inputRef={Function inputRef {}}
510514
mode="radioSelect"
511515
onBlur={Function {}}
@@ -655,6 +659,7 @@ Generated by [AVA](https://ava.li).
655659
>
656660
<Input
657661
clientId="rdts"
662+
inlineSearchInput={false}
658663
inputRef={Function inputRef {}}
659664
onBlur={Function {}}
660665
onFocus={Function {}}
@@ -708,6 +713,7 @@ Generated by [AVA](https://ava.li).
708713
>
709714
<Input
710715
clientId="rdts"
716+
inlineSearchInput={false}
711717
inputRef={Function inputRef {}}
712718
onBlur={Function {}}
713719
onFocus={Function {}}

__snapshots__/src/index.test.js.snap

30 Bytes
Binary file not shown.

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,17 @@ The actual snapshot is saved in `index.test.js.snap`.
44

55
Generated by [AVA](https://ava.li).
66

7+
## renders inline search placeholder
8+
9+
> Snapshot 1
10+
11+
<input
12+
className="search"
13+
onChange={Function {}}
14+
placeholder="Search something"
15+
type="text"
16+
/>
17+
718
## renders input
819

920
> Snapshot 1
34 Bytes
Binary file not shown.

docs/src/stories/Options/index.js

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ class WithOptions extends PureComponent {
2020
disabled: false,
2121
readOnly: false,
2222
hierarchical: false,
23+
placeholder: 'Choose...',
24+
inlineSearchPlaceholder: 'Search...',
2325
}
2426
}
2527

@@ -50,6 +52,8 @@ class WithOptions extends PureComponent {
5052
readOnly,
5153
showDropdown,
5254
inlineSearchInput,
55+
placeholder,
56+
inlineSearchPlaceholder,
5357
} = this.state
5458

5559
return (
@@ -85,6 +89,24 @@ class WithOptions extends PureComponent {
8589
<option value="always">Always</option>
8690
</select>
8791
</div>
92+
<div style={{ marginBottom: '10px' }}>
93+
<label htmlFor="placeholder">Placeholder text: </label>
94+
<input
95+
id="placeholder"
96+
type="text"
97+
value={placeholder}
98+
onChange={e => this.setState({ placeholder: e.target.value })}
99+
/>
100+
</div>
101+
<div style={{ marginBottom: '10px' }}>
102+
<label htmlFor="inlinePlaceholderText">Inline placeholder text: </label>
103+
<input
104+
id="inlineSearchPlaceholder"
105+
type="text"
106+
value={inlineSearchPlaceholder}
107+
onChange={e => this.setState({ inlineSearchPlaceholder: e.target.value })}
108+
/>
109+
</div>
88110
<Checkbox
89111
label="Inline Search Input"
90112
value="inlineSearchInput"
@@ -134,7 +156,7 @@ class WithOptions extends PureComponent {
134156
readOnly={readOnly}
135157
inlineSearchInput={inlineSearchInput}
136158
showDropdown={showDropdown}
137-
texts={{ label: 'Demo Dropdown' }}
159+
texts={{ label: 'Demo Dropdown', placeholder, inlineSearchPlaceholder }}
138160
/>
139161
</div>
140162
</div>

src/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ class DropdownTreeSelect extends Component {
2929
keepOpenOnSelect: PropTypes.bool,
3030
texts: PropTypes.shape({
3131
placeholder: PropTypes.string,
32+
inlineSearchPlaceholder: PropTypes.string,
3233
noMatches: PropTypes.string,
3334
label: PropTypes.string,
3435
labelRemove: PropTypes.string,
@@ -306,6 +307,7 @@ class DropdownTreeSelect extends Component {
306307
onBlur={this.onInputBlur}
307308
onKeyDown={this.onKeyboardKeyDown}
308309
{...commonProps}
310+
inlineSearchInput={inlineSearchInput}
309311
/>
310312
)
311313
return (

src/input/index.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,15 @@ const Input = props => {
2525
onKeyDown,
2626
activeDescendant,
2727
onInputChange,
28+
inlineSearchInput,
2829
} = props
2930
return (
3031
<input
3132
type="text"
3233
disabled={disabled}
3334
ref={inputRef}
3435
className="search"
35-
placeholder={texts.placeholder || 'Choose...'}
36+
placeholder={inlineSearchInput ? texts.inlineSearchPlaceholder || 'Search...' : texts.placeholder || 'Choose...'}
3637
onKeyDown={onKeyDown}
3738
onChange={handleChange(onInputChange)}
3839
onFocus={onFocus}
@@ -60,6 +61,7 @@ Input.propTypes = {
6061
disabled: PropTypes.bool,
6162
readOnly: PropTypes.bool,
6263
activeDescendant: PropTypes.string,
64+
inlineSearchInput: PropTypes.bool,
6365
}
6466

6567
export default memo(Input)

src/input/index.test.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,12 @@ test('renders placeholder', t => {
1717
t.snapshot(wrapper)
1818
})
1919

20+
test('renders inline search placeholder', t => {
21+
const placeholderText = 'Search something'
22+
const wrapper = toJson(shallow(<Input inlineSearchInput texts={{ inlineSearchPlaceholder: placeholderText }} />))
23+
t.snapshot(wrapper)
24+
})
25+
2026
test('raises onchange', t => {
2127
const onChange = spy()
2228
const wrapper = shallow(<Input onInputChange={onChange} />)

0 commit comments

Comments
 (0)