diff --git a/src/components/forms/RFFComponents.jsx b/src/components/forms/RFFComponents.jsx index b72a840d4989..516098532900 100644 --- a/src/components/forms/RFFComponents.jsx +++ b/src/components/forms/RFFComponents.jsx @@ -253,6 +253,54 @@ RFFCFormInputArray.propTypes = { ...sharedPropTypes, } +export const RFFCFormInputList = ({ name, label, className = 'mb-3' }) => { + return ( + <> + + {({ fields }) => ( +
+
+ {label && ( + + {label} + + )} + fields.push({ Key: '', Value: '' })} + className="circular-button" + title={'+'} + > + + +
+ {fields.map((name, index) => ( +
+
+ + {({ input, meta }) => { + return + }} + +
+ fields.remove(index)} + className={`circular-button`} + title={'-'} + > + + +
+ ))} +
+ )} +
+ + ) +} +RFFCFormInputList.propTypes = { + ...sharedPropTypes, +} + export const RFFCFormRadio = ({ name, label, @@ -463,10 +511,10 @@ export const RFFSelectSearch = ({ isLoading = false, allowCreate = false, refreshFunction, - props, + ...props }) => { const [inputText, setInputText] = useState('') - const selectSearchvalues = values.map((val) => ({ + const selectSearchValues = values.map((val) => ({ value: val.value, label: val.name, ...val.props, @@ -490,12 +538,33 @@ export const RFFSelectSearch = ({ return ( {({ meta, input }) => { - const handleChange = onChange - ? (e) => { - input.onChange(e) - onChange(e) - } - : input.onChange + const handleChange = (e) => { + if (onChange) { + onChange(e) + } + input.onChange(e) + } + + const selectProps = { + classNamePrefix: 'react-select', + ...input, + name, + id: name, + disabled, + options: selectSearchValues, + placeholder, + isMulti: multi, + inputValue: inputText, + isLoading, + onChange: handleChange, + onInputChange: setOnInputChange, + ...props, + //merge className from props into the default className + className: props.className + ? `${props.className} react-select-container` + : 'react-select-container', + } + return (
@@ -513,79 +582,10 @@ export const RFFSelectSearch = ({ )} - {!allowCreate && onChange && ( - - )} - {allowCreate && onChange && ( - - )} - {allowCreate && !onChange && ( - + {allowCreate ? ( + + ) : ( +