diff --git a/docs.md b/docs.md index 8c3d8aea..84dc26bc 100644 --- a/docs.md +++ b/docs.md @@ -539,6 +539,7 @@ Clicking an unselected checkbox adds its value to this array, and clicking a sel - `input` **[Object][156]** A `redux-forms` [input][157] object - `meta` **[Object][156]** A `redux-forms` [meta][158] object - `options` **[Array][154]** An array of checkbox values (strings or key-value pairs) +- `selectedOptionsDisplayFormatter` **[Function][]** A function that receives an array of selected values and returns a string or HTML to render those values ### Examples diff --git a/src/forms/helpers/dropdown-select.js b/src/forms/helpers/dropdown-select.js index 8ea65015..54469cfe 100644 --- a/src/forms/helpers/dropdown-select.js +++ b/src/forms/helpers/dropdown-select.js @@ -7,12 +7,14 @@ const propTypes = { children: PropTypes.node, className: PropTypes.string, selectedValues: PropTypes.arrayOf(PropTypes.string), + selectedOptionsDisplayFormatter: PropTypes.func, ...togglePropTypes('expanded'), } const defaultProps = { className: '', selectedValues: [], + selectedOptionsDisplayFormatter: getLabel, } // Wraps the `DropdownCheckboxGroup` component @@ -22,12 +24,13 @@ function DropdownSelect ({ className, expanded, selectedValues, - toggleExpanded, + toggleExpanded, + selectedOptionsDisplayFormatter, }) { return (
-

{ getLabel(selectedValues) }

+

{selectedOptionsDisplayFormatter(selectedValues)}

- + diff --git a/test/forms/inputs/dropdown-checkbox-group.test.js b/test/forms/inputs/dropdown-checkbox-group.test.js index 173f3a4a..df960da0 100644 --- a/test/forms/inputs/dropdown-checkbox-group.test.js +++ b/test/forms/inputs/dropdown-checkbox-group.test.js @@ -36,4 +36,27 @@ test('DropdownCheckboxGroup removes value to array when selected option clicked' wrapper.find('input').simulate('change') const newValue = onChange.mock.calls[0][0] expect(newValue).toEqual([]) +}) + +test('DropdownCheckboxGroup allows custom selected option formatting', () => { + const selectedOptionsDisplayFormatter = (values) => { + return values.length ? values.join('; ') : 'Empty' + } + const onChange = jest.fn() + const TOGGLED_OPTION = 'TOGGLED_OPTION' + const props = { + input: { + name: 'test', + value: [], + onChange, + }, + meta: {}, + options: [TOGGLED_OPTION], + selectedOptionsDisplayFormatter, + } + const wrapper = mount() + wrapper.find('input').simulate('change') + const newValues = onChange.mock.calls[0] + const displayOptionsHtml = wrapper.find('.select-input').innerHTML + expect(displayOptionsHtml).toEqual(`

${selectedOptionsDisplayFormatter(newValues)}

`) }) \ No newline at end of file