diff --git a/src/Form/__tests__/__snapshots__/Form.test.tsx.snap b/src/Form/__tests__/__snapshots__/Form.test.tsx.snap index b109998..289f46c 100644 --- 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 index 76edaef..5225876 100644 --- 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 = ({ form, data, - onSubmit: onSubmitProps, + onSubmit: onSubmitProp, onDataChanged, ...props }) => { @@ -113,10 +141,26 @@ const Form: FunctionComponent = ({ 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 ( diff --git a/src/__visual__/data/form.tsx b/src/__visual__/data/form.tsx index 485a8c7..9cd9ddb 100644 --- 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,