Accept selectedOptionsDisplayFormatter prop #504
Conversation
|
@chawes13 Also looking to port over some default styles for this component too from MTC. Ben is working to parse out those styles that I'd like to include in this PR. |
| @@ -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 | |||
There was a problem hiding this comment.
Does it return HTML or JSX?
| }) { | ||
| return ( | ||
| <div className="dropdown-select"> | ||
| <div className="select-input" onClick={ toggleExpanded }> | ||
| <p>{ getLabel(selectedValues) }</p> | ||
| <p>{selectedOptionsDisplayFormatter(selectedValues)}</p> |
There was a problem hiding this comment.
Since this has the possibility to return jsx, should we make it a component (a la LabeledField's labelComponent)?
| @@ -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', () => { | |||
There was a problem hiding this comment.
A test for jsx would be nice as well
|
@bhennes2 Has your local implementation held up on your client project? Still interested in including this functionality in the library? |
|
@CodiumAI-Agent /improve --extended |
PR Code Suggestions💡 Suggestion: Correct the validator's logic by passing the selectedOptionsDisplayFormatter prop to the DropdownSelect component. File: src/forms/inputs/dropdown-checkbox-group.js (62-64) Example code:Existing code: <DropdownSelect {...props} selectedValues={ value } className="checkboxes">
<CheckboxGroup { ...props } label={ false } />
</DropdownSelect>Improved code: <DropdownSelect {...props} selectedValues={ value } selectedOptionsDisplayFormatter={props.selectedOptionsDisplayFormatter} className="checkboxes">
<CheckboxGroup { ...props } label={ false } />
</DropdownSelect>💡 Suggestion: Wrap the PropTypes and defaultProps into a function to improve reusability and maintainability. File: src/forms/helpers/dropdown-select.js (7-18) Example code:Existing code: const propTypes = {
children: PropTypes.node,
className: PropTypes.string,
selectedValues: PropTypes.arrayOf(PropTypes.string),
selectedOptionsDisplayFormatter: PropTypes.func,
...togglePropTypes('expanded'),
}
const defaultProps = {
className: '',
selectedValues: [],
selectedOptionsDisplayFormatter: getLabel,
}Improved code: function getDropdownSelectProps() {
return {
propTypes: {
children: PropTypes.node,
className: PropTypes.string,
selectedValues: PropTypes.arrayOf(PropTypes.string),
selectedOptionsDisplayFormatter: PropTypes.func,
...togglePropTypes('expanded'),
},
defaultProps: {
className: '',
selectedValues: [],
selectedOptionsDisplayFormatter: getLabel,
}
}
} |
Author Checklist