From 6ff9c0ed1507e5b02c5ceb7d525588ff14011823 Mon Sep 17 00:00:00 2001 From: Viktor van Wijk Date: Tue, 14 Jan 2025 12:38:22 +0100 Subject: [PATCH 1/2] :sparkles: [#4908] Add possibility to enable multi in SelectWithoutFormik component. Part of #4908, where multi-selection of the variables is needed. --- .../js/components/admin/forms/ReactSelect.js | 17 ++++++++++------- .../admin/forms/VariableSelection.js | 2 +- .../admin/forms/VariableSelection.stories.js | 19 ++++++++++++++++++- 3 files changed, 29 insertions(+), 9 deletions(-) diff --git a/src/openforms/js/components/admin/forms/ReactSelect.js b/src/openforms/js/components/admin/forms/ReactSelect.js index 582fe2722e..a81de7ca46 100644 --- a/src/openforms/js/components/admin/forms/ReactSelect.js +++ b/src/openforms/js/components/admin/forms/ReactSelect.js @@ -11,11 +11,9 @@ const styles = { control: (...args) => ({ ...initialStyles.control(...args), minHeight: '1.875rem', - height: '1.875rem', }), valueContainer: (...args) => ({ ...initialStyles.valueContainer(...args), - height: 'calc(1.875rem - 2px)', padding: '0 6px', }), input: (...args) => ({ @@ -24,12 +22,11 @@ const styles = { }), indicatorsContainer: baseStyles => ({ ...baseStyles, - height: 'calc(1.875rem - 2px)', - padding: '0 2px', + padding: '0px 2px', }), dropdownIndicator: (...args) => ({ ...initialStyles.dropdownIndicator(...args), - padding: '5px 2px', + padding: '4px 2px', }), }; @@ -90,9 +87,15 @@ const SelectWithoutFormik = ({name, options, value, className, onChange, ...prop menuPlacement="auto" menuPortalTarget={parentSelector()} options={options} - value={getValue(options, value)} + value={props.isMulti ? value.map(v => getValue(options, v)) : getValue(options, value)} onChange={selectedOption => { - onChange(selectedOption === null ? undefined : selectedOption.value); + let transformedValue; + if (props.isMulti) { + transformedValue = selectedOption.map(option => option.value); + } else { + transformedValue = selectedOption === null ? undefined : selectedOption.value; + } + onChange(transformedValue); }} {...props} /> diff --git a/src/openforms/js/components/admin/forms/VariableSelection.js b/src/openforms/js/components/admin/forms/VariableSelection.js index da9b0eba77..b4e2bf3959 100644 --- a/src/openforms/js/components/admin/forms/VariableSelection.js +++ b/src/openforms/js/components/admin/forms/VariableSelection.js @@ -85,7 +85,7 @@ const VariableSelection = ({ VariableSelection.propTypes = { id: PropTypes.string, name: PropTypes.string, - value: PropTypes.string, + value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]), onChange: PropTypes.func.isRequired, includeStaticVariables: PropTypes.bool, filter: PropTypes.func, diff --git a/src/openforms/js/components/admin/forms/VariableSelection.stories.js b/src/openforms/js/components/admin/forms/VariableSelection.stories.js index 8da4d86efc..e427b7eaae 100644 --- a/src/openforms/js/components/admin/forms/VariableSelection.stories.js +++ b/src/openforms/js/components/admin/forms/VariableSelection.stories.js @@ -6,7 +6,7 @@ import {VARIABLE_SOURCES} from '../form_design/variables/constants'; import {ReactSelectContext} from './ReactSelect'; import VariableSelection from './VariableSelection'; -const render = ({name, includeStaticVariables, filter, menuIsOpen = false}) => { +const render = ({name, includeStaticVariables, filter, menuIsOpen = false, isMulti = false}) => { const [{value}, updateArgs] = useArgs(); return ( { onChange={event => updateArgs({value: event.target.value})} filter={filter} menuIsOpen={menuIsOpen} + isMulti={isMulti} /> ); }; @@ -130,3 +131,19 @@ export const menuOpen = { menuIsOpen: true, }, }; + +export const multiSelection = { + decorators: [ + // workaround for https://github.com/JedWatson/react-select/issues/3708 + Story => ( + undefined}}> + + + ), + ], + args: { + value: ['key2', 'key5'], + menuIsOpen: true, + isMulti: true, + }, +}; From 350799f25220ffa668ce46889904f94fe8e17f5d Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Wed, 15 Jan 2025 15:39:27 +0100 Subject: [PATCH 2/2] :lipstick: Fix styling of clearable react-select The padding top/bottom of the clear indicator was too large, making the select take up too much vertical space. --- .../js/components/admin/forms/ReactSelect.js | 4 ++ .../admin/forms/VariableSelection.stories.js | 41 +++++++++++-------- 2 files changed, 28 insertions(+), 17 deletions(-) diff --git a/src/openforms/js/components/admin/forms/ReactSelect.js b/src/openforms/js/components/admin/forms/ReactSelect.js index a81de7ca46..0e330a2647 100644 --- a/src/openforms/js/components/admin/forms/ReactSelect.js +++ b/src/openforms/js/components/admin/forms/ReactSelect.js @@ -28,6 +28,10 @@ const styles = { ...initialStyles.dropdownIndicator(...args), padding: '4px 2px', }), + clearIndicator: (...args) => ({ + ...initialStyles.clearIndicator(...args), + padding: '4px 2px', + }), }; /** diff --git a/src/openforms/js/components/admin/forms/VariableSelection.stories.js b/src/openforms/js/components/admin/forms/VariableSelection.stories.js index e427b7eaae..4eed4b7b51 100644 --- a/src/openforms/js/components/admin/forms/VariableSelection.stories.js +++ b/src/openforms/js/components/admin/forms/VariableSelection.stories.js @@ -6,7 +6,21 @@ import {VARIABLE_SOURCES} from '../form_design/variables/constants'; import {ReactSelectContext} from './ReactSelect'; import VariableSelection from './VariableSelection'; -const render = ({name, includeStaticVariables, filter, menuIsOpen = false, isMulti = false}) => { +// workaround for https://github.com/JedWatson/react-select/issues/3708 +const resetParentSelector = Story => ( + undefined}}> + + +); + +const render = ({ + name, + includeStaticVariables, + filter, + menuIsOpen = false, + isMulti = false, + isClearable = false, +}) => { const [{value}, updateArgs] = useArgs(); return ( ); }; @@ -119,31 +134,23 @@ export default { export const Default = {}; export const menuOpen = { - decorators: [ - // workaround for https://github.com/JedWatson/react-select/issues/3708 - Story => ( - undefined}}> - - - ), - ], + decorators: [resetParentSelector], args: { menuIsOpen: true, }, }; export const multiSelection = { - decorators: [ - // workaround for https://github.com/JedWatson/react-select/issues/3708 - Story => ( - undefined}}> - - - ), - ], + decorators: [resetParentSelector], args: { value: ['key2', 'key5'], menuIsOpen: true, isMulti: true, }, }; + +export const Clearable = { + args: { + isClearable: true, + }, +};