envoc-form 4.0.1-6 → 4.0.1-7

package/es/Form/Form.d.ts

@@ -7,15 +7,20 @@ export declare type FormBuilderProp<TForm extends object> = {
     Field: <TProp extends keyof TForm, TRenderComponent extends ElementType>(props: FieldProps<TForm, TProp, TRenderComponent>) => JSX.Element;
     FieldArray: <TProp extends keyof TForm>(props: FieldArrayProps<TForm, TProp>) => JSX.Element;
 };
-export interface FormProps<TForm extends object> {
+export interface FullFormProps<TForm extends object> {
     children: (formBuilder: FormBuilderProp<TForm>) => JSX.Element;
-    onSubmit: (formValues: FormData | TForm, formikBag: FormikHelpers<TForm>) => Promise<ValidatedApiResult>;
+    onSubmit: (formValues: TForm, formikBag: FormikHelpers<TForm>) => Promise<ValidatedApiResult>;
+    onFormDataSubmit: (formValues: FormData, formikBag: FormikHelpers<TForm>) => Promise<ValidatedApiResult>;
     className?: string;
     style?: CSSProperties;
     ignoreLostChanges?: boolean;
     initialValues?: TForm;
 }
-declare function Form<TForm extends object>({ children, className, style, ignoreLostChanges, onSubmit, initialValues, ...props }: FormProps<TForm>): JSX.Element;
+declare type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> & {
+    [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;
+}[Keys];
+export declare type FormProps<TForm extends object> = RequireAtLeastOne<FullFormProps<TForm>, 'onSubmit' | 'onFormDataSubmit'>;
+declare function Form<TForm extends object>({ children, className, style, ignoreLostChanges, onSubmit, onFormDataSubmit, initialValues, ...props }: FormProps<TForm>): JSX.Element;
 declare namespace Form {
     var DisplayFormState: () => JSX.Element;
 }

package/es/Form/Form.js

@@ -29,11 +29,11 @@ import FormBasedPreventNavigation from './FormBasedPreventNavigation';
 import { ServerErrorContext, } from './ServerErrorContext';
 import Field from '../Field/Field';
 import FieldArray from '../FieldArray/FieldArray';
+import { FormDefaults } from '../FormDefaults';
 import objectContainsNonSerializableProperty from '../utils/objectContainsNonSerializableProperty';
 import objectToFormData from '../utils/objectToFormData';
-import { FormDefaults } from '../FormDefaults';
 export default function Form(_a) {
-    var children = _a.children, className = _a.className, style = _a.style, ignoreLostChanges = _a.ignoreLostChanges, onSubmit = _a.onSubmit, initialValues = _a.initialValues, props = __rest(_a, ["children", "className", "style", "ignoreLostChanges", "onSubmit", "initialValues"]);
+    var children = _a.children, className = _a.className, style = _a.style, ignoreLostChanges = _a.ignoreLostChanges, onSubmit = _a.onSubmit, onFormDataSubmit = _a.onFormDataSubmit, initialValues = _a.initialValues, props = __rest(_a, ["children", "className", "style", "ignoreLostChanges", "onSubmit", "onFormDataSubmit", "initialValues"]);
     // formik resets all error on each blur (with our settings)
     // this means that ALL errors from the server disappear when any one field is blurred
     // So, we have to store server errors ourselves
@@ -60,6 +60,7 @@ export default function Form(_a) {
                     })] })) })) })));
     function handleSubmit(values, formikBag) {
         var formData = undefined;
+        var submitFunc;
         if (objectContainsNonSerializableProperty(values)) {
             formData = objectToFormData(values, {
                 indices: true,
@@ -67,8 +68,34 @@ export default function Form(_a) {
                 allowEmptyArrays: true,
                 noFileListBrackets: true,
             });
+            if (onFormDataSubmit === undefined) {
+                throw new Error('No onFormDataSubmit supplied for non-serializable properties.');
+            }
+            submitFunc = function () {
+                return onFormDataSubmit(formData !== null && formData !== void 0 ? formData : new FormData(), formikBag);
+            };
+        }
+        else {
+            if (onSubmit === undefined) {
+                formData = objectToFormData(values, {
+                    indices: true,
+                    dotNotation: true,
+                    allowEmptyArrays: true,
+                    noFileListBrackets: true,
+                });
+                if (onFormDataSubmit === undefined) {
+                    // This error should never occur, as this case is covered by RequireAtLeastOne type safety
+                    throw new Error('No onFormDataSubmit supplied for non-serializable properties.');
+                }
+                submitFunc = function () {
+                    return onFormDataSubmit(formData !== null && formData !== void 0 ? formData : new FormData(), formikBag);
+                };
+            }
+            else {
+                submitFunc = function () { return onSubmit(values, formikBag); };
+            }
         }
-        return onSubmit(formData !== null && formData !== void 0 ? formData : values, formikBag)
+        return submitFunc()
             .then(function (response) {
             return response;
         })

package/lib/Form/Form.d.ts

@@ -7,15 +7,20 @@ export declare type FormBuilderProp<TForm extends object> = {
     Field: <TProp extends keyof TForm, TRenderComponent extends ElementType>(props: FieldProps<TForm, TProp, TRenderComponent>) => JSX.Element;
     FieldArray: <TProp extends keyof TForm>(props: FieldArrayProps<TForm, TProp>) => JSX.Element;
 };
-export interface FormProps<TForm extends object> {
+export interface FullFormProps<TForm extends object> {
     children: (formBuilder: FormBuilderProp<TForm>) => JSX.Element;
-    onSubmit: (formValues: FormData | TForm, formikBag: FormikHelpers<TForm>) => Promise<ValidatedApiResult>;
+    onSubmit: (formValues: TForm, formikBag: FormikHelpers<TForm>) => Promise<ValidatedApiResult>;
+    onFormDataSubmit: (formValues: FormData, formikBag: FormikHelpers<TForm>) => Promise<ValidatedApiResult>;
     className?: string;
     style?: CSSProperties;
     ignoreLostChanges?: boolean;
     initialValues?: TForm;
 }
-declare function Form<TForm extends object>({ children, className, style, ignoreLostChanges, onSubmit, initialValues, ...props }: FormProps<TForm>): JSX.Element;
+declare type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> & {
+    [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;
+}[Keys];
+export declare type FormProps<TForm extends object> = RequireAtLeastOne<FullFormProps<TForm>, 'onSubmit' | 'onFormDataSubmit'>;
+declare function Form<TForm extends object>({ children, className, style, ignoreLostChanges, onSubmit, onFormDataSubmit, initialValues, ...props }: FormProps<TForm>): JSX.Element;
 declare namespace Form {
     var DisplayFormState: () => JSX.Element;
 }

package/lib/Form/Form.js

@@ -34,11 +34,11 @@ var FormBasedPreventNavigation_1 = __importDefault(require("./FormBasedPreventNa
 var ServerErrorContext_1 = require("./ServerErrorContext");
 var Field_1 = __importDefault(require("../Field/Field"));
 var FieldArray_1 = __importDefault(require("../FieldArray/FieldArray"));
+var FormDefaults_1 = require("../FormDefaults");
 var objectContainsNonSerializableProperty_1 = __importDefault(require("../utils/objectContainsNonSerializableProperty"));
 var objectToFormData_1 = __importDefault(require("../utils/objectToFormData"));
-var FormDefaults_1 = require("../FormDefaults");
 function Form(_a) {
-    var children = _a.children, className = _a.className, style = _a.style, ignoreLostChanges = _a.ignoreLostChanges, onSubmit = _a.onSubmit, initialValues = _a.initialValues, props = __rest(_a, ["children", "className", "style", "ignoreLostChanges", "onSubmit", "initialValues"]);
+    var children = _a.children, className = _a.className, style = _a.style, ignoreLostChanges = _a.ignoreLostChanges, onSubmit = _a.onSubmit, onFormDataSubmit = _a.onFormDataSubmit, initialValues = _a.initialValues, props = __rest(_a, ["children", "className", "style", "ignoreLostChanges", "onSubmit", "onFormDataSubmit", "initialValues"]);
     // formik resets all error on each blur (with our settings)
     // this means that ALL errors from the server disappear when any one field is blurred
     // So, we have to store server errors ourselves
@@ -65,6 +65,7 @@ function Form(_a) {
                     })] })) })) })));
     function handleSubmit(values, formikBag) {
         var formData = undefined;
+        var submitFunc;
         if ((0, objectContainsNonSerializableProperty_1.default)(values)) {
             formData = (0, objectToFormData_1.default)(values, {
                 indices: true,
@@ -72,8 +73,34 @@ function Form(_a) {
                 allowEmptyArrays: true,
                 noFileListBrackets: true,
             });
+            if (onFormDataSubmit === undefined) {
+                throw new Error('No onFormDataSubmit supplied for non-serializable properties.');
+            }
+            submitFunc = function () {
+                return onFormDataSubmit(formData !== null && formData !== void 0 ? formData : new FormData(), formikBag);
+            };
+        }
+        else {
+            if (onSubmit === undefined) {
+                formData = (0, objectToFormData_1.default)(values, {
+                    indices: true,
+                    dotNotation: true,
+                    allowEmptyArrays: true,
+                    noFileListBrackets: true,
+                });
+                if (onFormDataSubmit === undefined) {
+                    // This error should never occur, as this case is covered by RequireAtLeastOne type safety
+                    throw new Error('No onFormDataSubmit supplied for non-serializable properties.');
+                }
+                submitFunc = function () {
+                    return onFormDataSubmit(formData !== null && formData !== void 0 ? formData : new FormData(), formikBag);
+                };
+            }
+            else {
+                submitFunc = function () { return onSubmit(values, formikBag); };
+            }
         }
-        return onSubmit(formData !== null && formData !== void 0 ? formData : values, formikBag)
+        return submitFunc()
             .then(function (response) {
             return response;
         })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "envoc-form",
-  "version": "4.0.1-6",
+  "version": "4.0.1-7",
   "description": "Envoc form components",
   "keywords": [
     "react-component",
@@ -37,7 +37,7 @@
     "axios": "^0.21.1",
     "classnames": "^2.3.1",
     "date-fns": "^2.22.1",
-    "envoc-request": "^4.0.1-6",
+    "envoc-request": "^4.0.1-7",
     "lru-cache": "^6.0.0",
     "prop-types": "^15.7.2",
     "react-date-picker": "^8.2.0",

package/src/Form/Form.tsx

@@ -21,11 +21,11 @@ import {
 } from './ServerErrorContext';
 import Field, { FieldProps } from '../Field/Field';
 import FieldArray, { FieldArrayProps } from '../FieldArray/FieldArray';
+import { FormDefaults } from '../FormDefaults';
 import objectContainsNonSerializableProperty from '../utils/objectContainsNonSerializableProperty';
 import objectToFormData from '../utils/objectToFormData';
 import { ValidatedApiResult } from '../Validation/ValidatedApiResult';
 import { ValidationError } from '../Validation/ValidationError';
-import { FormDefaults } from '../FormDefaults';
 
 // This exposes the builder that ensures only "name" values on the given TForm can be used
 // Further, each Field can then infer the proper type given the name
@@ -40,10 +40,14 @@ export type FormBuilderProp<TForm extends object> = {
   ) => JSX.Element;
 };
 
-export interface FormProps<TForm extends object> {
+export interface FullFormProps<TForm extends object> {
   children: (formBuilder: FormBuilderProp<TForm>) => JSX.Element;
   onSubmit: (
-    formValues: FormData | TForm,
+    formValues: TForm,
+    formikBag: FormikHelpers<TForm>
+  ) => Promise<ValidatedApiResult>;
+  onFormDataSubmit: (
+    formValues: FormData,
     formikBag: FormikHelpers<TForm>
   ) => Promise<ValidatedApiResult>;
   className?: string;
@@ -52,12 +56,26 @@ export interface FormProps<TForm extends object> {
   initialValues?: TForm;
 }
 
+type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<
+  T,
+  Exclude<keyof T, Keys>
+> &
+  {
+    [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;
+  }[Keys];
+
+export type FormProps<TForm extends object> = RequireAtLeastOne<
+  FullFormProps<TForm>,
+  'onSubmit' | 'onFormDataSubmit'
+>;
+
 export default function Form<TForm extends object>({
   children,
   className,
   style,
   ignoreLostChanges,
   onSubmit,
+  onFormDataSubmit,
   initialValues,
   ...props
 }: FormProps<TForm>) {
@@ -114,6 +132,7 @@ export default function Form<TForm extends object>({
 
   function handleSubmit(values: TForm, formikBag: FormikHelpers<TForm>) {
     let formData: FormData | undefined = undefined;
+    let submitFunc: () => Promise<ValidatedApiResult>;
     if (objectContainsNonSerializableProperty(values)) {
       formData = objectToFormData(values, {
         indices: true,
@@ -121,9 +140,35 @@ export default function Form<TForm extends object>({
         allowEmptyArrays: true,
         noFileListBrackets: true,
       });
+      if (onFormDataSubmit === undefined) {
+        throw new Error(
+          'No onFormDataSubmit supplied for non-serializable properties.'
+        );
+      }
+      submitFunc = () =>
+        onFormDataSubmit(formData ?? new FormData(), formikBag);
+    } else {
+      if (onSubmit === undefined) {
+        formData = objectToFormData(values, {
+          indices: true,
+          dotNotation: true,
+          allowEmptyArrays: true,
+          noFileListBrackets: true,
+        });
+        if (onFormDataSubmit === undefined) {
+          // This error should never occur, as this case is covered by RequireAtLeastOne type safety
+          throw new Error(
+            'No onFormDataSubmit supplied for non-serializable properties.'
+          );
+        }
+        submitFunc = () =>
+          onFormDataSubmit(formData ?? new FormData(), formikBag);
+      } else {
+        submitFunc = () => onSubmit(values, formikBag);
+      }
     }
 
-    return onSubmit(formData ?? values, formikBag)
+    return submitFunc()
       .then((response) => {
         return response;
       })