Form: Re-add onBeforeSubmit

react-backoffice · Dec 3, 2020 · 67b4960 · 67b4960
1 parent 6251214
commit 67b4960
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 27 deletions.
diff --git a/src/Form/__tests__/__snapshots__/Form.test.tsx.snap b/src/Form/__tests__/__snapshots__/Form.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`renders correctly 1`] = `
       "entries": Array [
         Object {
           "hash": "",
-          "key": "stas8q",
+          "key": "ws74gx",
           "pathname": "/",
           "search": "",
           "state": undefined,
@@ -25,7 +25,7 @@ exports[`renders correctly 1`] = `
       "listen": [Function],
       "location": Object {
         "hash": "",
-        "key": "stas8q",
+        "key": "ws74gx",
         "pathname": "/",
         "search": "",
         "state": undefined,
@@ -130,7 +130,6 @@ exports[`renders correctly 1`] = `
             },
             Object {
               "id": "email",
-              "onBeforeSubmit": [Function],
               "title": "Email",
               "type": "email",
               "width": "mid",
@@ -144,6 +143,7 @@ exports[`renders correctly 1`] = `
             Object {
               "helperText": "Should be URL with trailing slash",
               "id": "url",
+              "onBeforeSubmit": [Function],
               "title": "URL",
               "type": "url",
               "validators": Array [
@@ -167,7 +167,7 @@ exports[`renders correctly 1`] = `
         Object {
           "data": Array [
             Object {
-              "format": "DD.MM.YYYY",
+              "format": "dd.MM.yyyy",
               "id": "date",
               "title": "Date",
               "type": "date",
@@ -189,7 +189,7 @@ exports[`renders correctly 1`] = `
               "width": "small",
             },
             Object {
-              "format": "DD.MM.YYYY, hh:mm a",
+              "format": "dd.MM.yyyy, hh:mm a",
               "id": "datetime",
               "title": "Datetime",
               "type": "datetime",
@@ -240,8 +240,8 @@ exports[`renders correctly 1`] = `
               "width": "small",
             },
             Object {
-              "id": "switch",
-              "title": "Switch - Prefilld",
+              "id": "switch-refilled",
+              "title": "Switch - Prefilled",
               "type": "switch",
               "value": true,
               "width": "small",
@@ -276,7 +276,7 @@ exports[`renders correctly with content 1`] = `
       "entries": Array [
         Object {
           "hash": "",
-          "key": "f4lvuf",
+          "key": "ur51sp",
           "pathname": "/",
           "search": "",
           "state": undefined,
@@ -290,7 +290,7 @@ exports[`renders correctly with content 1`] = `
       "listen": [Function],
       "location": Object {
         "hash": "",
-        "key": "f4lvuf",
+        "key": "ur51sp",
         "pathname": "/",
         "search": "",
         "state": undefined,
@@ -395,7 +395,6 @@ exports[`renders correctly with content 1`] = `
             },
             Object {
               "id": "email",
-              "onBeforeSubmit": [Function],
               "title": "Email",
               "type": "email",
               "width": "mid",
@@ -409,6 +408,7 @@ exports[`renders correctly with content 1`] = `
             Object {
               "helperText": "Should be URL with trailing slash",
               "id": "url",
+              "onBeforeSubmit": [Function],
               "title": "URL",
               "type": "url",
               "validators": Array [
@@ -432,7 +432,7 @@ exports[`renders correctly with content 1`] = `
         Object {
           "data": Array [
             Object {
-              "format": "DD.MM.YYYY",
+              "format": "dd.MM.yyyy",
               "id": "date",
               "title": "Date",
               "type": "date",
@@ -454,7 +454,7 @@ exports[`renders correctly with content 1`] = `
               "width": "small",
             },
             Object {
-              "format": "DD.MM.YYYY, hh:mm a",
+              "format": "dd.MM.yyyy, hh:mm a",
               "id": "datetime",
               "title": "Datetime",
               "type": "datetime",
@@ -505,8 +505,8 @@ exports[`renders correctly with content 1`] = `
               "width": "small",
             },
             Object {
-              "id": "switch",
-              "title": "Switch - Prefilld",
+              "id": "switch-refilled",
+              "title": "Switch - Prefilled",
               "type": "switch",
               "value": true,
               "width": "small",

diff --git a/src/Form/index.tsx b/src/Form/index.tsx
@@ -90,10 +90,38 @@ type FormProps = {
   isFixedSubmitButton?: boolean;
 };
 
+const fieldIsField = (
+  field: FormFieldGroup | FormFieldField | undefined,
+): field is FormFieldField => {
+  return !!field && !(field as any).group;
+};
+
+const fieldIsGroup = (
+  field: FormFieldGroup | FormFieldField | undefined,
+): field is FormFieldGroup => {
+  return !!field && (field as any).group;
+};
+
+const findFields = (fields: FormField[], key: string): FormFieldField[] => {
+  const matchingFields = fields.flatMap((field) => {
+    if (fieldIsGroup(field)) {
+      return findFields(field.data, key);
+    }
+
+    if (field.id === key) {
+      return [field];
+    }
+
+    return [];
+  });
+
+  return matchingFields;
+};
+
 const Form: FunctionComponent<FormProps> = ({
   form,
   data,
-  onSubmit: onSubmitProps,
+  onSubmit: onSubmitProp,
   onDataChanged,
   ...props
 }) => {
@@ -113,10 +141,26 @@ const Form: FunctionComponent<FormProps> = ({
       return;
     }
 
-    const response = getMappedData(state);
+    const mappedResponse = getMappedData(state);
+    const response = { ...mappedResponse };
+
+    Object.entries(mappedResponse).map(([key, value]) => {
+      const matchingField = findFields(form, key)?.[0];
+
+      if (fieldIsField(matchingField) && matchingField?.onBeforeSubmit) {
+        console.log({
+          onBeforeSubmit: matchingField.onBeforeSubmit(value),
+          key,
+        });
+        response[key] = matchingField.onBeforeSubmit(value);
 
-    onSubmitProps(response);
-  }, [form, state, onSubmitProps]);
+        return;
+      }
+
+      response[key] = value;
+    });
+    onSubmitProp(response);
+  }, [form, state, onSubmitProp]);
 
   return (
     <FormContext.Provider value={{ state, dispatch }}>

diff --git a/src/__visual__/data/form.tsx b/src/__visual__/data/form.tsx
@@ -85,13 +85,6 @@ const form: FormField[] = [
         title: "Email",
         type: TYPES.EMAIL,
         width: "mid",
-        onBeforeSubmit: (url?: string) => {
-          if (url) {
-            return `${url}#top`;
-          }
-
-          return url;
-        },
       },
       {
         id: "password",
@@ -111,6 +104,13 @@ const form: FormField[] = [
             message: "Please add a trailing slash to your URL",
           },
         ],
+        onBeforeSubmit: (url?: string) => {
+          if (url) {
+            return `${url}#top`;
+          }
+
+          return url;
+        },
       },
       {
         id: "empty",
@@ -188,8 +188,8 @@ const form: FormField[] = [
         width: WIDTH.SMALL,
       },
       {
-        id: "switch",
-        title: "Switch - Prefilld",
+        id: "switch-refilled",
+        title: "Switch - Prefilled",
         type: TYPES.SWITCH,
         value: true,
         width: WIDTH.SMALL,