diff --git a/README.md b/README.md index 1d926a9..89846e0 100644 --- a/README.md +++ b/README.md @@ -103,6 +103,7 @@ Picky.defaultProps = { tabIndex: 0, keepOpen: true, selectAllText: 'Select all', + selectAllMode: 'default', }; Picky.propTypes = { id: PropTypes.string.isRequired, @@ -137,7 +138,12 @@ Picky.propTypes = { defaultFocusFilter: PropTypes.bool, className: PropTypes.string, renderList: PropTypes.func, + filterPlaceholder: PropTypes.string, + disabled: PropTypes.bool, getFilterValue: PropTypes.func, + caseSensitiveFilter: PropTypes.bool, + buttonProps: PropTypes.object, + selectAllMode: PropTypes.oneOf(['default', 'filtered']), }; ``` @@ -173,6 +179,7 @@ Picky.propTypes = { - `getFilterValue` - Will provide the input value of filter to the picky dropdown, so that if we have a larger list of options then we can only supply the matching options based on this value. - `caseSensitiveFilter` - If true options will be returned when they match case - `buttonProps` - Additional props to apply the the button component, useful for supplying class names. +- `selectAllMode` - default: `default`. When the mode is `filtered` the Select All won't be hidden when filtering. ## Custom rendering diff --git a/index.d.ts b/index.d.ts index 05d5139..d1e17ab 100644 --- a/index.d.ts +++ b/index.d.ts @@ -4,6 +4,7 @@ declare module 'react-picky' { export type PickyTabIndex = string | number; + type SelectAllMode = 'default' | 'filtered'; /** * Properties returned from render * @@ -173,7 +174,7 @@ declare module 'react-picky' { * @type {string} * @memberof PickyProps */ - id:string; + id: string; /** * Default placeholder text * @@ -408,6 +409,11 @@ declare module 'react-picky' { * True if you want a disabled Picky */ disabled?: boolean; + + /** + * Allows for additional functionalty with select all and filtering, see the docs. + */ + selectAllMode?: SelectAllMode; } export default class Picky extends React.PureComponent { diff --git a/src/Picky.js b/src/Picky.js index b1891e7..2f042e2 100644 --- a/src/Picky.js +++ b/src/Picky.js @@ -356,7 +356,11 @@ class Picky extends React.PureComponent { get showSelectAll() { const { renderSelectAll, multiple, includeSelectAll } = this.props; return ( - !renderSelectAll && includeSelectAll && multiple && !this.state.filtered + !renderSelectAll && + includeSelectAll && + multiple && + ((this.props.selectAllMode === 'default' && !this.state.filtered) || + this.props.selectAllMode === 'filtered') ); } render() { @@ -466,6 +470,7 @@ Picky.defaultProps = { tabIndex: 0, keepOpen: true, selectAllText: 'Select all', + selectAllMode: 'default', }; Picky.propTypes = { id: PropTypes.string.isRequired, @@ -505,6 +510,7 @@ Picky.propTypes = { getFilterValue: PropTypes.func, caseSensitiveFilter: PropTypes.bool, buttonProps: PropTypes.object, + selectAllMode: PropTypes.oneOf(['default', 'filtered']), }; export default Picky; diff --git a/tests/Picky.test.js b/tests/Picky.test.js index e95ccb9..fef9a15 100644 --- a/tests/Picky.test.js +++ b/tests/Picky.test.js @@ -691,6 +691,28 @@ describe('Picky', () => { expect(wrapper.find(sel('selectall'))).toHaveLength(0); }); + + it('should show select all when a filter has been entered but selectAllMode is filtered', () => { + const wrapper = mount( + + ); + expect(wrapper.find(sel('selectall'))).toHaveLength(1); + + const event = { target: { value: '1' } }; + wrapper.find(sel('picky__filter__input')).simulate('change', event); + + expect(wrapper.find(sel('selectall'))).toHaveLength(1); + }); }); describe('Callbacks', () => {