feat(Filter): Add filterPlaceholder prop

Override the default filter placeholder

re #86

README.md

@@ -157,6 +157,7 @@ Picky.propTypes = {
 - `renderSelectAll` - Used for rendering a custom select all
 - `defaultFocusFilter` - If set to true, will focus the filter by default when opened.
 - `renderList` - Render prop for whole list, you can use this to add virtualization/windowing if necessary
+- `filterPlaceholder` - Override the filter placeholder. Defaults to 'Filter...'
 
 ## Custom rendering
 

docs/README.md

@@ -157,6 +157,7 @@ Picky.propTypes = {
 - `renderSelectAll` - Used for rendering a custom select all
 - `defaultFocusFilter` - If set to true, will focus the filter by default when opened.
 - `renderList` - Render prop for whole list, you can use this to add virtualization/windowing if necessary
+- `filterPlaceholder` - Override the filter placeholder. Defaults to 'Filter...'
 
 ## Custom rendering
 

index.d.ts

@@ -368,6 +368,15 @@ declare module 'react-picky' {
      * @memberof PickyProps
      */
     renderList?: (props: RenderListProps) => any;
+
+
+    /**
+     * Override the placeholder of the filter
+     *
+     * @type {string}
+     * @memberof PickyProps
+     */
+    filterPlaceholder?:string;
   }
 
   export default class Picky extends React.PureComponent<PickyProps, any> {

src/Filter.js

@@ -9,7 +9,7 @@ class Filter extends PureComponent {
           ref={input => (this.filterInput = input)}
           className="picky__filter__input"
           data-testid="picky__filter__input"
-          placeholder="Filter..."
+          placeholder={this.props.placeholder}
           tabIndex={this.props.tabIndex}
           aria-label="filter options"
           onChange={e => this.props.onFilterChange(e.target.value)}
@@ -18,10 +18,13 @@ class Filter extends PureComponent {
     );
   }
 }
-
+Filter.defaultProps = {
+  placeholder: 'Filter...',
+};
 Filter.propTypes = {
   onFilterChange: PropTypes.func.isRequired,
   tabIndex: PropTypes.number,
+  placeholder: PropTypes.string,
 };
 
 export default Filter;

src/Picky.js

@@ -46,11 +46,11 @@ class Picky extends React.PureComponent {
   componentDidMount() {
     this.focusFilterInput(this.state.open);
   }
-  
+
   componentWillUnmount() {
     document.removeEventListener('click', this.handleOutsideClick, false);
   }
-  
+
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (
       this.props.options !== nextProps.options ||
@@ -337,6 +337,7 @@ class Picky extends React.PureComponent {
       tabIndex,
       dropdownHeight,
       renderSelectAll,
+      filterPlaceholder,
     } = this.props;
     const { open } = this.state;
     let ariaOwns = '';
@@ -388,6 +389,7 @@ class Picky extends React.PureComponent {
           {includeFilter && (
             <Filter
               ref={filter => (this.filter = filter)}
+              placeholder={filterPlaceholder}
               onFilterChange={
                 filterDebounce > 0
                   ? debounce(this.onFilterChange, filterDebounce)
@@ -482,6 +484,7 @@ Picky.propTypes = {
   defaultFocusFilter: PropTypes.bool,
   className: PropTypes.string,
   renderList: PropTypes.func,
+  filterPlaceholder: PropTypes.string,
 };
 
 export default Picky;

tests/Picky.test.js

@@ -863,5 +863,27 @@ describe('Picky', () => {
         expect(onChange).toHaveBeenCalledTimes(1);
       });
     });
+
+    test('should override filter placeholder if supplied', () => {
+      const { getByTestId } = rtlRender(
+        <Picky
+          options={[1, 2, 3]}
+          open={true}
+          includeFilter
+          filterPlaceholder="Hello..."
+        />
+      );
+      const filter = getByTestId('picky__filter__input');
+
+      expect(filter.placeholder).toEqual('Hello...');
+    });
+    test('filter placeholder default to Filter... if not supplied', () => {
+      const { getByTestId } = rtlRender(
+        <Picky options={[1, 2, 3]} open={true} includeFilter />
+      );
+      const filter = getByTestId('picky__filter__input');
+
+      expect(filter.placeholder).toEqual('Filter...');
+    });
   });
 });