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)}
${selectedOptionsDisplayFormatter(newValues)}
`) }) \ No newline at end of file