envoc-form 5.0.3 → 5.0.6

package/src/Form/Form.tsx

@@ -1,237 +1,234 @@
-import {
-  CSSProperties,
-  ElementType,
-  useContext,
-  useMemo,
-  useState,
-} from 'react';
-import classNames from 'classnames';
-import {
-  Form as FormikFormWrapper,
-  Formik,
-  FormikHelpers,
-  useFormikContext,
-} from 'formik';
-import FocusError from './FocusError';
-import FormBasedPreventNavigation from './FormBasedPreventNavigation';
-import {
-  ServerErrorContext,
-  ServerErrorContextProps,
-  ServerErrors,
-} 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';
-
-// 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
-export type FormBuilderProp<TForm extends object> = {
-  // the first set of <> is a generic method signature - we don't split this off because we need the TForm closure
-  Field: <TProp extends keyof TForm, TRenderComponent extends ElementType>(
-    props: FieldProps<TForm, TProp, TRenderComponent>
-  ) => JSX.Element; // assumes this is never null - thought he final component may not render
-
-  FieldArray: <TProp extends keyof TForm>(
-    props: FieldArrayProps<TForm, TProp>
-  ) => JSX.Element;
-};
-
-export interface FullFormProps<TForm extends object> {
-  /** The `<Field/>` and `<FieldArray/>` components. */
-  children: (formBuilder: FormBuilderProp<TForm>) => JSX.Element;
-  /** Submission handler  */
-  onSubmit: (
-    formValues: TForm,
-    formikBag: FormikHelpers<TForm>
-  ) => Promise<ValidatedApiResult>;
-  /** Submission handler for forms that use [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData).*/
-  onFormDataSubmit: (
-    formValues: FormData,
-    formikBag: FormikHelpers<TForm>
-  ) => Promise<ValidatedApiResult>;
-  className?: string;
-  style?: CSSProperties;
-  /** Prevent the user from leaving the form if they have edited any field. This is presented as a JS `alert()`. */
-  ignoreLostChanges?: boolean;
-  /** The intitial values of the form. */
-  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'
->;
-
-/** Define a form. Uses [formik](https://formik.org/docs/overview). Usually contains many `<Field/>` components. */
-export default function Form<TForm extends object>({
-  children,
-  className,
-  style,
-  ignoreLostChanges,
-  onSubmit,
-  onFormDataSubmit,
-  initialValues,
-  ...props
-}: FormProps<TForm>) {
-  // 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
-  // Since we only use useStandardFormInput, that means there is only one consumer
-  const [serverErrors, setServerErrors] = useState<ServerErrors>({});
-  const serverErrorContextValue = useMemo<ServerErrorContextProps>(
-    () => ({
-      errors: serverErrors,
-      getError: (path) => {
-        const lowered = path.toLowerCase();
-        return serverErrors && serverErrors[lowered];
-      },
-      setError: (path, errorMessage) => {
-        const lowered = path.toLowerCase();
-        setServerErrors(
-          Object.assign({}, serverErrors, {
-            [lowered]: !errorMessage ? undefined : errorMessage,
-          })
-        );
-      },
-    }),
-    [serverErrors]
-  );
-
-  return (
-    <Formik
-      validateOnChange={false}
-      validateOnBlur={true}
-      validateOnMount={false}
-      initialValues={initialValues || ({} as TForm)}
-      onSubmit={handleSubmit}
-      {...props}>
-      <ServerErrorContext.Provider value={serverErrorContextValue}>
-        <FormikFormWrapper
-          className={classNames(
-            className,
-            FormDefaults.cssClassPrefix + 'form'
-          )}
-          style={style}>
-          <FocusError serverErrors={serverErrorContextValue} />
-          <FormBasedPreventNavigation ignoreLostChanges={ignoreLostChanges} />
-          {children({
-            // hack for ref forwarding
-            Field: Field as any,
-            FieldArray: FieldArray as any,
-          })}
-        </FormikFormWrapper>
-      </ServerErrorContext.Provider>
-    </Formik>
-  );
-
-  function handleSubmit(values: TForm, formikBag: FormikHelpers<TForm>) {
-    let formData: FormData | undefined = undefined;
-    let submitFunc: () => Promise<ValidatedApiResult>;
-    if (objectContainsNonSerializableProperty(values)) {
-      formData = objectToFormData(values, {
-        indices: true,
-        dotNotation: true,
-        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 submitFunc()
-      .then((response) => {
-        return response;
-      })
-      .catch((err) => {
-        //this is an http error
-        if (
-          err &&
-          err.response &&
-          err.response.data &&
-          err.response.data.validationFailures
-        ) {
-          try {
-            const serverErrors = err.response.data.validationFailures.reduce(
-              (acc: ServerErrors, value: ValidationError) => {
-                // for simplicity, just keep it to one server error at a time per path
-                // don't care of the property name case changes
-                const path = value.propertyName?.toLowerCase();
-                if (!!path && !!value.errorMessage) {
-                  acc[path] = value.errorMessage;
-                }
-                return acc;
-              },
-              {} as ServerErrors
-            );
-            setServerErrors(serverErrors);
-          } catch (err) {
-            console.error('Failure to getErrorObject');
-            console.error(err);
-            throw err;
-          }
-        }
-        throw err;
-      });
-  }
-}
-
-Form.DisplayFormState = DisplayFormState;
-function DisplayFormState() {
-  const formState = useFormikContext();
-  const serverErrorContext = useContext(ServerErrorContext);
-  return (
-    <div style={{ margin: '1rem 0' }}>
-      <pre
-        style={{
-          background: '#f6f8fa',
-          fontSize: '.65rem',
-          padding: '.5rem',
-        }}>
-        {serverErrorContext && serverErrorContext.errors && (
-          <div>
-            <strong>serverErrors = </strong>
-            {JSON.stringify(serverErrorContext.errors, null, 2)}
-          </div>
-        )}
-        <strong>formState = </strong>
-        {JSON.stringify(formState, null, 2)}
-      </pre>
-    </div>
-  );
-}
+import {
+  CSSProperties,
+  ElementType,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+import { clsx } from 'clsx';
+import {
+  Form as FormikFormWrapper,
+  Formik,
+  FormikHelpers,
+  useFormikContext,
+} from 'formik';
+import FocusError from './FocusError';
+import FormBasedPreventNavigation from './FormBasedPreventNavigation';
+import {
+  ServerErrorContext,
+  ServerErrorContextProps,
+  ServerErrors,
+} 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';
+
+// 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
+export type FormBuilderProp<TForm extends object> = {
+  // the first set of <> is a generic method signature - we don't split this off because we need the TForm closure
+  Field: <TProp extends keyof TForm, TRenderComponent extends ElementType>(
+    props: FieldProps<TForm, TProp, TRenderComponent>
+  ) => JSX.Element; // assumes this is never null - thought he final component may not render
+
+  FieldArray: <TProp extends keyof TForm>(
+    props: FieldArrayProps<TForm, TProp>
+  ) => JSX.Element;
+};
+
+export interface FullFormProps<TForm extends object> {
+  /** The `<Field/>` and `<FieldArray/>` components. */
+  children: (formBuilder: FormBuilderProp<TForm>) => JSX.Element;
+  /** Submission handler  */
+  onSubmit: (
+    formValues: TForm,
+    formikBag: FormikHelpers<TForm>
+  ) => Promise<ValidatedApiResult>;
+  /** Submission handler for forms that use [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData).*/
+  onFormDataSubmit: (
+    formValues: FormData,
+    formikBag: FormikHelpers<TForm>
+  ) => Promise<ValidatedApiResult>;
+  className?: string;
+  style?: CSSProperties;
+  /** Prevent the user from leaving the form if they have edited any field. This is presented as a JS `alert()`. */
+  ignoreLostChanges?: boolean;
+  /** The intitial values of the form. */
+  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'
+>;
+
+/** Define a form. Uses [formik](https://formik.org/docs/overview). Usually contains many `<Field/>` components. */
+export default function Form<TForm extends object>({
+  children,
+  className,
+  style,
+  ignoreLostChanges,
+  onSubmit,
+  onFormDataSubmit,
+  initialValues,
+  ...props
+}: FormProps<TForm>) {
+  // 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
+  // Since we only use useStandardFormInput, that means there is only one consumer
+  const [serverErrors, setServerErrors] = useState<ServerErrors>({});
+  const serverErrorContextValue = useMemo<ServerErrorContextProps>(
+    () => ({
+      errors: serverErrors,
+      getError: (path) => {
+        const lowered = path.toLowerCase();
+        return serverErrors && serverErrors[lowered];
+      },
+      setError: (path, errorMessage) => {
+        const lowered = path.toLowerCase();
+        setServerErrors(
+          Object.assign({}, serverErrors, {
+            [lowered]: !errorMessage ? undefined : errorMessage,
+          })
+        );
+      },
+    }),
+    [serverErrors]
+  );
+
+  return (
+    <Formik
+      validateOnChange={false}
+      validateOnBlur={true}
+      validateOnMount={false}
+      initialValues={initialValues || ({} as TForm)}
+      onSubmit={handleSubmit}
+      {...props}>
+      <ServerErrorContext.Provider value={serverErrorContextValue}>
+        <FormikFormWrapper
+          className={clsx(className, FormDefaults.cssClassPrefix + 'form')}
+          style={style}>
+          <FocusError serverErrors={serverErrorContextValue} />
+          <FormBasedPreventNavigation ignoreLostChanges={ignoreLostChanges} />
+          {children({
+            // hack for ref forwarding
+            Field: Field as any,
+            FieldArray: FieldArray as any,
+          })}
+        </FormikFormWrapper>
+      </ServerErrorContext.Provider>
+    </Formik>
+  );
+
+  function handleSubmit(values: TForm, formikBag: FormikHelpers<TForm>) {
+    let formData: FormData | undefined = undefined;
+    let submitFunc: () => Promise<ValidatedApiResult>;
+    if (objectContainsNonSerializableProperty(values)) {
+      formData = objectToFormData(values, {
+        indices: true,
+        dotNotation: true,
+        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 submitFunc()
+      .then((response) => {
+        return response;
+      })
+      .catch((err) => {
+        //this is an http error
+        if (
+          err &&
+          err.response &&
+          err.response.data &&
+          err.response.data.validationFailures
+        ) {
+          try {
+            const serverErrors = err.response.data.validationFailures.reduce(
+              (acc: ServerErrors, value: ValidationError) => {
+                // for simplicity, just keep it to one server error at a time per path
+                // don't care of the property name case changes
+                const path = value.propertyName?.toLowerCase();
+                if (!!path && !!value.errorMessage) {
+                  acc[path] = value.errorMessage;
+                }
+                return acc;
+              },
+              {} as ServerErrors
+            );
+            setServerErrors(serverErrors);
+          } catch (err) {
+            console.error('Failure to getErrorObject');
+            console.error(err);
+            throw err;
+          }
+        }
+        throw err;
+      });
+  }
+}
+
+Form.DisplayFormState = DisplayFormState;
+function DisplayFormState() {
+  const formState = useFormikContext();
+  const serverErrorContext = useContext(ServerErrorContext);
+  return (
+    <div style={{ margin: '1rem 0' }}>
+      <pre
+        style={{
+          background: '#f6f8fa',
+          fontSize: '.65rem',
+          padding: '.5rem',
+        }}>
+        {serverErrorContext && serverErrorContext.errors && (
+          <div>
+            <strong>serverErrors = </strong>
+            {JSON.stringify(serverErrorContext.errors, null, 2)}
+          </div>
+        )}
+        <strong>formState = </strong>
+        {JSON.stringify(formState, null, 2)}
+      </pre>
+    </div>
+  );
+}

package/src/Form/FormBasedPreventNavigation.tsx

@@ -1,56 +1,56 @@
-import type { History } from 'history';
-import { ContextType, useContext } from 'react';
-import {
-  Navigator as BaseNavigator,
-  UNSAFE_NavigationContext as NavigationContext,
-} from 'react-router-dom';
-import { useFormikContext } from 'formik';
-import LegacyFormBasedPreventNavigation from './LegacyFormBasedPreventNavigation';
-import NewFormBasedPreventNavigation from './NewFormBasedPreventNavigation';
-
-interface Navigator extends BaseNavigator {
-  block?: History['block'];
-  location: Location;
-}
-
-type NavigationContextWithBlock = ContextType<typeof NavigationContext> & {
-  navigator: Navigator;
-};
-
-export interface FormBasedPreventNavigationProps {
-  ignoreLostChanges?: boolean;
-  promptMessage?: string;
-}
-
-/** Prevent the user from navigating away from a form if there are any changes. */
-export default function FormBasedPreventNavigation({
-  ignoreLostChanges,
-  promptMessage = 'Changes you made may not be saved.',
-}: FormBasedPreventNavigationProps) {
-  const { dirty, isSubmitting } = useFormikContext();
-  const preventNavigate = !ignoreLostChanges && dirty && !isSubmitting;
-
-  const { navigator } = useContext(
-    NavigationContext
-  ) as NavigationContextWithBlock;
-
-  const isUsingDataRouter = navigator.location === undefined;
-
-  if (isUsingDataRouter) {
-    return (
-      <NewFormBasedPreventNavigation
-        promptMessage={promptMessage}
-        preventNavigate={preventNavigate}
-        navigator={navigator}
-      />
-    );
-  } else {
-    return (
-      <LegacyFormBasedPreventNavigation
-        promptMessage={promptMessage}
-        preventNavigate={preventNavigate}
-        navigator={navigator}
-      />
-    );
-  }
-}
+import type { History } from 'history';
+import { ContextType, useContext } from 'react';
+import {
+  Navigator as BaseNavigator,
+  UNSAFE_NavigationContext as NavigationContext,
+} from 'react-router-dom';
+import { useFormikContext } from 'formik';
+import LegacyFormBasedPreventNavigation from './LegacyFormBasedPreventNavigation';
+import NewFormBasedPreventNavigation from './NewFormBasedPreventNavigation';
+
+interface Navigator extends BaseNavigator {
+  block?: History['block'];
+  location: Location;
+}
+
+type NavigationContextWithBlock = ContextType<typeof NavigationContext> & {
+  navigator: Navigator;
+};
+
+export interface FormBasedPreventNavigationProps {
+  ignoreLostChanges?: boolean;
+  promptMessage?: string;
+}
+
+/** Prevent the user from navigating away from a form if there are any changes. */
+export default function FormBasedPreventNavigation({
+  ignoreLostChanges,
+  promptMessage = 'Changes you made may not be saved.',
+}: FormBasedPreventNavigationProps) {
+  const { dirty, isSubmitting } = useFormikContext();
+  const preventNavigate = !ignoreLostChanges && dirty && !isSubmitting;
+
+  const { navigator } = useContext(
+    NavigationContext
+  ) as NavigationContextWithBlock;
+
+  const isUsingDataRouter = navigator.location === undefined;
+
+  if (isUsingDataRouter) {
+    return (
+      <NewFormBasedPreventNavigation
+        promptMessage={promptMessage}
+        preventNavigate={preventNavigate}
+        navigator={navigator}
+      />
+    );
+  } else {
+    return (
+      <LegacyFormBasedPreventNavigation
+        promptMessage={promptMessage}
+        preventNavigate={preventNavigate}
+        navigator={navigator}
+      />
+    );
+  }
+}