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}
- )}
-
-
-
- >
+
+ {(callAction, { data, loading, error }) => (
+ <>
+ {trigger(data, loading, error)}
+
+ {error && displayError && (
+ {formErrorMessage}
+ )}
+ {data && displaySuccess && (
+
+ {formSuccessMessage}
+
+ )}
+
+
+
+ >
+ )}
+
);
})()}
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'],