diff --git a/src/components/form.js b/src/components/form.js index 9a5ecb53b..885f9f2c3 100644 --- a/src/components/form.js +++ b/src/components/form.js @@ -6,7 +6,7 @@ jsx: (
{(() => { - const { env, Children, useAction, useGetAll } = B; + const { env, Children, Action, useGetAll } = B; const { actionId, @@ -16,11 +16,12 @@ formSuccessMessage, redirect, showError, + showSuccess, } = options; - const formRef = React.createRef(); const displayError = showError === 'built-in'; + const displaySuccess = showSuccess === 'built-in'; const empty = children.length === 0; const isDev = B.env === 'dev'; const isPristine = empty && isDev; @@ -31,28 +32,6 @@ const [isInvalid, setIsInvalid] = useState(false); const location = isDev ? {} : useLocation(); - const [callAction, { data, loading, error }] = useAction(actionId, { - onCompleted({ actionb5 }) { - if (actionb5) { - B.triggerEvent('onSuccess', actionb5); - } else { - B.triggerEvent('onNoResults'); - } - if (hasRedirect) { - if (redirectTo === location.pathname) { - history.go(0); - } else { - history.push(redirectTo); - } - } - }, - onError(err) { - if (err && !displayError) { - B.triggerEvent('onError', formErrorMessage || err.message); - } - }, - }); - const { loading: isFetching, data: models, error: err } = model && useGetAll(model, { @@ -61,29 +40,25 @@ take: 1, }); - if (loading) { - B.triggerEvent('onLoad', loading); - } - const mounted = useRef(true); useEffect(() => { if (!mounted.current && isFetching) { - B.triggerEvent('onLoad', isFetching); + B.triggerEvent('onDataLoad', isFetching); } mounted.current = false; }, [isFetching]); if (err && !displayError) { - B.triggerEvent('onError', formErrorMessage || err.message); + B.triggerEvent('onDataError', formErrorMessage || err.message); } const item = models && models.results[0]; if (item) { if (item.id) { - B.triggerEvent('onSuccess', item); + B.triggerEvent('onDataSuccess', item); } else { - B.triggerEvent('onNoResults'); + B.triggerEvent('onDataNoResults'); } } @@ -94,7 +69,7 @@ } }; - const handleSubmit = evt => { + const handleSubmit = (evt, callAction) => { evt.preventDefault(); setIsInvalid(false); B.triggerEvent('onSubmit'); @@ -107,7 +82,7 @@ callAction({ variables: { input: values } }); }; - const renderContent = () => { + const renderContent = loading => { if (!model || isDev) { return {children}; } @@ -121,30 +96,59 @@ ); }; + const trigger = (data, loading, error) => { + if (data) { + B.triggerEvent('onActionSuccess', data); + + if (hasRedirect) { + if (redirectTo === location.pathname) { + history.go(0); + } else { + history.push(redirectTo); + } + } + } + + if (loading) { + B.triggerEvent('onActionLoad', loading); + } + + if (error) { + B.triggerEvent('onActionError', formErrorMessage || error.message); + } + }; + return ( - <> -
- {error && displayError && ( - {formErrorMessage} - )} - {data && ( - {formSuccessMessage} - )} -
- -
- {isPristine && form} - {renderContent()} -
- + + {(callAction, { data, loading, error }) => ( + <> + {trigger(data, loading, error)} +
+ {error && displayError && ( + {formErrorMessage} + )} + {data && displaySuccess && ( + + {formSuccessMessage} + + )} +
+ +
handleSubmit(evt, callAction)} + ref={formRef} + className={[ + empty && classes.empty, + isPristine && classes.pristine, + ].join(' ')} + > + {isPristine && form} + {renderContent(loading)} +
+ + )} +
); })()}
diff --git a/src/prefabs/form.js b/src/prefabs/form.js index e425d250e..bf2da7620 100644 --- a/src/prefabs/form.js +++ b/src/prefabs/form.js @@ -30,11 +30,33 @@ dependsOn: 'model', }, }, + { + value: 'built-in', + label: 'Success message', + key: 'showSuccess', + type: 'CUSTOM', + configuration: { + as: 'BUTTONGROUP', + dataType: 'string', + allowedInput: [ + { name: 'Built in', value: 'built-in' }, + { name: 'Interaction', value: 'interaction' }, + ], + }, + }, { value: 'Thanks for submitting the form!', label: 'Success message', key: 'formSuccessMessage', type: 'TEXT', + configuration: { + condition: { + type: 'SHOW', + option: 'showSuccess', + comparator: 'EQ', + value: 'built-in', + }, + }, }, { value: 'built-in', @@ -55,6 +77,14 @@ label: 'Error message', key: 'formErrorMessage', type: 'TEXT', + configuration: { + condition: { + type: 'SHOW', + option: 'showError', + comparator: 'EQ', + value: 'built-in', + }, + }, }, { value: ['0rem', '0rem', 'M', '0rem'],