diff --git a/src/openforms/js/components/admin/form_design/variables/prefill/PrefillConfigurationForm.js b/src/openforms/js/components/admin/form_design/variables/prefill/PrefillConfigurationForm.js index 1fe974a474..2f33e284be 100644 --- a/src/openforms/js/components/admin/form_design/variables/prefill/PrefillConfigurationForm.js +++ b/src/openforms/js/components/admin/form_design/variables/prefill/PrefillConfigurationForm.js @@ -1,6 +1,5 @@ import {Formik} from 'formik'; import PropTypes from 'prop-types'; -import {useState} from 'react'; import {FormattedMessage} from 'react-intl'; import {SubmitAction} from 'components/admin/forms/ActionButton'; @@ -51,19 +50,10 @@ const PrefillConfigurationForm = ({ }} > {({handleSubmit, values}) => { - const PluginFormComponent = - PLUGIN_COMPONENT_MAPPING[values.plugin]?.component ?? - PLUGIN_COMPONENT_MAPPING.default.component; - const ToggleCopyComponent = - PLUGIN_COMPONENT_MAPPING[values.plugin]?.toggleCopyComponent ?? - PLUGIN_COMPONENT_MAPPING.default.toggleCopyComponent; - - const [showCopyButton, setShowCopyButton] = useState(false); - - const handleToggle = event => { - event.preventDefault(); - setShowCopyButton(!showCopyButton); - }; + const pluginConfiguration = + PLUGIN_COMPONENT_MAPPING[values.plugin] ?? PLUGIN_COMPONENT_MAPPING.default; + const {component: PluginFormComponent, pluginFieldExtra: PluginFieldExtra = null} = + pluginConfiguration; return ( <> @@ -80,22 +70,17 @@ const PrefillConfigurationForm = ({ > <> - {ToggleCopyComponent ? ( + {PluginFieldExtra && (
- +
- ) : null} + )} - + { +const CopyConfigurationFromRegistrationBackend = ({backends, onCopyDone}) => { const name = 'copyConfigurationFromBackend'; const {setFieldValue, setValues} = useFormikContext(); const options = backends.map(elem => ({value: elem.key, label: elem.name})); @@ -67,9 +67,7 @@ const CopyConfigurationFromRegistrationBackend = ({backends, setShowCopyButton}) variablesMapping: selectedBackend.options.variablesMapping, }, })); - - // Collapse the registration backend selection row - setShowCopyButton(false); + onCopyDone(); } }} disabled={!selectedBackend} diff --git a/src/openforms/js/components/admin/form_design/variables/prefill/objects_api/ObjectsAPIFields.js b/src/openforms/js/components/admin/form_design/variables/prefill/objects_api/ObjectsAPIFields.js index f634d1e27a..6be8dbbd0f 100644 --- a/src/openforms/js/components/admin/form_design/variables/prefill/objects_api/ObjectsAPIFields.js +++ b/src/openforms/js/components/admin/form_design/variables/prefill/objects_api/ObjectsAPIFields.js @@ -4,7 +4,6 @@ * Most other plugins can be configured with the generic form in `./DefaultFields`. */ import {useFormikContext} from 'formik'; -import PropTypes from 'prop-types'; import {useContext, useEffect} from 'react'; import {FormattedMessage, useIntl} from 'react-intl'; import useAsync from 'react-use/esm/useAsync'; @@ -15,6 +14,7 @@ import Fieldset from 'components/admin/forms/Fieldset'; import FormRow from 'components/admin/forms/FormRow'; import {LOADING_OPTION} from 'components/admin/forms/Select'; import {ValidationErrorContext} from 'components/admin/forms/ValidationErrors'; +import ValidationErrorsProvider from 'components/admin/forms/ValidationErrors'; import VariableMapping from 'components/admin/forms/VariableMapping'; import { AuthAttributePath, @@ -26,8 +26,8 @@ import {FAIcon} from 'components/admin/icons'; import ErrorBoundary from 'components/errors/ErrorBoundary'; import {get} from 'utils/fetch'; -import ValidationErrorsProvider from '../../../../forms/ValidationErrors'; import CopyConfigurationFromRegistrationBackend from './CopyConfigurationFromRegistrationBackend'; +import useStatus from './useStatus'; const PLUGIN_ID = 'objects_api'; @@ -69,7 +69,7 @@ const getProperties = async (objectsApiGroup, objecttypeUuid, objecttypeVersion) return response.data.map(property => [property.targetPath, property.targetPath.join(' > ')]); }; -const ObjectsAPIFields = ({showCopyButton, setShowCopyButton}) => { +const ObjectsAPIFields = () => { const intl = useIntl(); // Object with keys the plugin/attribute/options, we process these further to set up // the required context for the fields. @@ -84,6 +84,7 @@ const ObjectsAPIFields = ({showCopyButton, setShowCopyButton}) => { plugin, options: {objecttypeUuid, objecttypeVersion, objectsApiGroup}, } = values; + const {showCopyButton, toggleShowCopyButton} = useStatus(); const defaults = { objectsApiGroup: null, @@ -138,12 +139,12 @@ const ObjectsAPIFields = ({showCopyButton, setShowCopyButton}) => { return ( - {showCopyButton ? ( + {showCopyButton && ( - ) : null} + )}
{ ); }; -ObjectsAPIFields.propTypes = { - showCopyButton: PropTypes.bool.isRequired, - setShowCopyButton: PropTypes.func.isRequired, -}; +ObjectsAPIFields.propTypes = {}; export default ObjectsAPIFields; diff --git a/src/openforms/js/components/admin/form_design/variables/prefill/objects_api/ToggleCopyButton.js b/src/openforms/js/components/admin/form_design/variables/prefill/objects_api/ToggleCopyButton.js index 998fa8e67d..d3123b0047 100644 --- a/src/openforms/js/components/admin/form_design/variables/prefill/objects_api/ToggleCopyButton.js +++ b/src/openforms/js/components/admin/form_design/variables/prefill/objects_api/ToggleCopyButton.js @@ -1,8 +1,25 @@ +import {useContext} from 'react'; import {FormattedMessage} from 'react-intl'; -const ToggleCopyButton = ({handleToggle}) => { +import {FormContext} from 'components/admin/form_design/Context'; + +import useStatus from './useStatus'; + +const ToggleCopyButton = () => { + const {registrationBackends = []} = useContext(FormContext); + const {toggleShowCopyButton} = useStatus(); + const backends = registrationBackends.filter(elem => elem.backend === 'objects_api'); + // don't render a toggle if there's nothing to copy from + if (!backends.length) return null; + return ( - + { + event.preventDefault(); + toggleShowCopyButton(); + }} + > { ); }; +ToggleCopyButton.propTypes = {}; + export default ToggleCopyButton; diff --git a/src/openforms/js/components/admin/form_design/variables/prefill/objects_api/useStatus.js b/src/openforms/js/components/admin/form_design/variables/prefill/objects_api/useStatus.js new file mode 100644 index 0000000000..cdbb1a6ff7 --- /dev/null +++ b/src/openforms/js/components/admin/form_design/variables/prefill/objects_api/useStatus.js @@ -0,0 +1,22 @@ +import {useFormikContext} from 'formik'; + +/** + * Convenience hook that wraps around Formik's status. + * + * This centralizes the shape of the status tracked in the Formik state. We use status + * to track some configuration/state that affects the configuration modal without it + * directly being a form field or requiring to be managed at a higher level. + */ +const useStatus = () => { + const {status = {}, setStatus} = useFormikContext(); + const {showCopyButton = false} = status; + const toggleShowCopyButton = () => { + setStatus({...status, showCopyButton: !showCopyButton}); + }; + return { + showCopyButton, + toggleShowCopyButton, + }; +}; + +export default useStatus;