Accept selectedOptionsDisplayFormatter prop

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
 

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 (
     <div className="dropdown-select">
       <div className="select-input" onClick={ toggleExpanded }>
-        <p>{ getLabel(selectedValues) }</p>
+        <p>{selectedOptionsDisplayFormatter(selectedValues)}</p>
       </div>
       <div 
         className={ classnames(

src/forms/inputs/dropdown-checkbox-group.js

@@ -59,7 +59,7 @@ function DropdownCheckboxGroup (props) {
   return (
     <fieldset>
       <InputLabel { ...{ label, name } } />
-      <DropdownSelect selectedValues={ value } className="checkboxes">
+      <DropdownSelect {...props} selectedValues={ value } className="checkboxes">
         <CheckboxGroup { ...props } label={ false } />
       </DropdownSelect>
     </fieldset>

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(<DropdownCheckboxGroup { ...props } />)
+  wrapper.find('input').simulate('change')
+  const newValues = onChange.mock.calls[0]
+  const displayOptionsHtml = wrapper.find('.select-input').innerHTML
+  expect(displayOptionsHtml).toEqual(`<p>${selectedOptionsDisplayFormatter(newValues)}</p>`)
 })