envoc-form 2.0.1-1 → 2.0.1-13

package/src/Form/Form.js

@@ -1,161 +1,139 @@
-import React, { useState, useMemo, useContext } from 'react';
-import PropTypes from 'prop-types';
-import FocusError from './FocusError';
-import { Formik, Form as FormikFormWrapper, useFormikContext } from 'formik';
-import FormBasedPreventNavigation from './FormBasedPreventNavigation';
-import ServerErrorContext from './ServerErrorContext';
-
-export default function Form({
-  children,
-  className,
-  style,
-  ignoreLostChanges,
-  onSubmit,
-  initialValues,
-  ...props
-}) {
-  // 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(null);
-  const serverErrorContextValue = useMemo(
-    () => ({
-      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 || {}}
-      onSubmit={handleSubmit}
-      {...props}>
-      <ServerErrorContext.Provider value={serverErrorContextValue}>
-        <FormikFormWrapper className={className} style={style}>
-          <FocusError serverErrors={serverErrorContextValue} />
-          <FormBasedPreventNavigation ignoreLostChanges={ignoreLostChanges} />
-          {typeof children === 'function' ? children(props) : children}
-        </FormikFormWrapper>
-      </ServerErrorContext.Provider>
-    </Formik>
-  );
-
-  function handleSubmit(values, formikBag) {
-    let formData = null;
-    if (
-      Object.entries(values).some((value) => value && value[1] instanceof File)
-    ) {
-      formData = objectToFormData(values);
-    }
-    return Promise.resolve(onSubmit(formData || values))
-      .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
-              .map((error) => ({
-                // case insensitive path
-                path: error.propertyName.toLowerCase(),
-                errorMessage: error.errorMessage,
-              }))
-              .reduce((acc, value) => {
-                // for simplicity, just keep it to one server error at a time per path
-                acc[value.path] = value.errorMessage;
-                return acc;
-              }, {});
-            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>
-  );
-}
-
-// https://github.com/silkyland/object-to-formdata
-export const objectToFormData = (obj, form, namespace) => {
-  let fd = form || new FormData();
-  let formKey;
-
-  for (let property in obj) {
-    if (obj.hasOwnProperty(property)) {
-      if (namespace) {
-        formKey = namespace + '.' + property;
-      } else {
-        formKey = property;
-      }
-      if (obj[property] instanceof Date) {
-        fd.append(formKey, obj[property].toISOString());
-      } else if (
-        typeof obj[property] === 'object' &&
-        !(obj[property] instanceof File) &&
-        !(obj[property] instanceof Blob)
-      ) {
-        objectToFormData(obj[property], fd, formKey);
-      } else {
-        // if it's a string or a File object
-        fd.append(formKey, obj[property]);
-      }
-    }
-  }
-
-  return fd;
-};
-
-Form.propTypes = {
-  ignoreLostChanges: PropTypes.bool,
-  onSubmit: PropTypes.func.isRequired,
-  initialValues: PropTypes.object,
-};
+import React, { useState, useMemo, useContext } from 'react';
+import PropTypes from 'prop-types';
+import FocusError from './FocusError';
+import { Formik, Form as FormikFormWrapper, useFormikContext } from 'formik';
+import FormBasedPreventNavigation from './FormBasedPreventNavigation';
+import ServerErrorContext from './ServerErrorContext';
+import {
+  objectToFormData,
+  objectContainsNonSerializableProperty,
+} from '../utils';
+
+export default function Form({
+  children,
+  className,
+  style,
+  ignoreLostChanges,
+  onSubmit,
+  initialValues,
+  ...props
+}) {
+  // 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(null);
+  const serverErrorContextValue = useMemo(
+    () => ({
+      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 || {}}
+      onSubmit={handleSubmit}
+      {...props}>
+      <ServerErrorContext.Provider value={serverErrorContextValue}>
+        <FormikFormWrapper className={className} style={style}>
+          <FocusError serverErrors={serverErrorContextValue} />
+          <FormBasedPreventNavigation ignoreLostChanges={ignoreLostChanges} />
+          {typeof children === 'function' ? children(props) : children}
+        </FormikFormWrapper>
+      </ServerErrorContext.Provider>
+    </Formik>
+  );
+
+  function handleSubmit(values, formikBag) {
+    let formData = null;
+    if (objectContainsNonSerializableProperty(values)) {
+      formData = objectToFormData(values, {
+        indices: true,
+        dotNotation: true,
+        allowEmptyArrays: true,
+        noFileListBrackets: true,
+      });
+    }
+
+    return Promise.resolve(onSubmit(formData || values))
+      .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
+              .map((error) => ({
+                // case insensitive path
+                path: error.propertyName.toLowerCase(),
+                errorMessage: error.errorMessage,
+              }))
+              .reduce((acc, value) => {
+                // for simplicity, just keep it to one server error at a time per path
+                acc[value.path] = value.errorMessage;
+                return acc;
+              }, {});
+            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>
+  );
+}
+
+Form.propTypes = {
+  ignoreLostChanges: PropTypes.bool,
+  onSubmit: PropTypes.func.isRequired,
+  initialValues: PropTypes.object,
+};

package/src/Form/Form.test.js

@@ -1,23 +1,23 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { HashRouter } from 'react-router-dom';
-import Form from './Form';
-
-describe('MoneyInput', () => {
-  it('renders without crashing', () => {
-    render(
-      <HashRouter>
-        <Form onSubmit={() => {}} />
-      </HashRouter>
-    );
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <HashRouter>
-        <Form onSubmit={() => {}} />
-      </HashRouter>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});
+import React from 'react';
+import { render } from '@testing-library/react';
+import { HashRouter } from 'react-router-dom';
+import Form from './Form';
+
+describe('MoneyInput', () => {
+  it('renders without crashing', () => {
+    render(
+      <HashRouter>
+        <Form onSubmit={() => {}} />
+      </HashRouter>
+    );
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <HashRouter>
+        <Form onSubmit={() => {}} />
+      </HashRouter>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});

package/src/Form/FormBasedPreventNavigation.js

@@ -1,25 +1,25 @@
-import React, { useEffect } from 'react';
-import { Prompt } from 'react-router';
-import { useFormikContext } from 'formik';
-
-export default function FormBasedPreventNavigation({
-  ignoreLostChanges,
-  promptMessage = 'Changes you made may not be saved.',
-}) {
-  const { dirty, isSubmitting } = useFormikContext();
-  const preventNavigate = !ignoreLostChanges && dirty && !isSubmitting;
-  useEffect(() => {
-    if (!preventNavigate) {
-      return;
-    }
-    window.addEventListener('beforeunload', beforeUnload);
-    return () => {
-      window.removeEventListener('beforeunload', beforeUnload);
-    };
-    function beforeUnload(e) {
-      e.preventDefault();
-      e.returnValue = promptMessage;
-    }
-  }, [preventNavigate, promptMessage]);
-  return <Prompt when={preventNavigate} message={promptMessage} />;
-}
+import React, { useEffect } from 'react';
+import { Prompt } from 'react-router-dom';
+import { useFormikContext } from 'formik';
+
+export default function FormBasedPreventNavigation({
+  ignoreLostChanges,
+  promptMessage = 'Changes you made may not be saved.',
+}) {
+  const { dirty, isSubmitting } = useFormikContext();
+  const preventNavigate = !ignoreLostChanges && dirty && !isSubmitting;
+  useEffect(() => {
+    if (!preventNavigate) {
+      return;
+    }
+    window.addEventListener('beforeunload', beforeUnload);
+    return () => {
+      window.removeEventListener('beforeunload', beforeUnload);
+    };
+    function beforeUnload(e) {
+      e.preventDefault();
+      e.returnValue = promptMessage;
+    }
+  }, [preventNavigate, promptMessage]);
+  return <Prompt when={preventNavigate} message={promptMessage} />;
+}

package/src/Form/ServerErrorContext.js

@@ -1,7 +1,7 @@
-import React from 'react';
-
-const ServerErrorContext = React.createContext({
-  getError: (path) => {},
-  setError: (path, errorMessage) => {},
-});
-export default ServerErrorContext;
+import React from 'react';
+
+const ServerErrorContext = React.createContext({
+  getError: (path) => {},
+  setError: (path, errorMessage) => {},
+});
+export default ServerErrorContext;

package/src/Form/__snapshots__/Form.test.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MoneyInput has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-  />
-</DocumentFragment>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MoneyInput has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+  />
+</DocumentFragment>
+`;

package/src/Form/index.js

@@ -1,3 +1,3 @@
-import Form from './Form';
-import ServerErrorContext from './ServerErrorContext';
-export { Form as default, ServerErrorContext };
+import Form from './Form';
+import ServerErrorContext from './ServerErrorContext';
+export { Form as default, ServerErrorContext };

package/src/FormGroup.js

@@ -1,30 +1,30 @@
-import React from 'react';
-import {
-  FormGroup as BootstrapFormGroup,
-  Label,
-  FormFeedback,
-  FormText,
-  Alert,
-} from 'reactstrap';
-
-const FormGroup = ({
-  label,
-  id,
-  helpText,
-  className,
-  style,
-  children,
-  meta,
-}) => {
-  return (
-    <BootstrapFormGroup className={className} style={style}>
-      {!!meta.warning && <Alert color="warning">{meta.warning}</Alert>}
-      {label && <Label htmlFor={id}>{label}</Label>}
-      {children}
-      {meta.error && <FormFeedback>{meta.error}</FormFeedback>}
-      {helpText && <FormText>{helpText}</FormText>}
-    </BootstrapFormGroup>
-  );
-};
-
-export default FormGroup;
+import React from 'react';
+import {
+  FormGroup as BootstrapFormGroup,
+  Label,
+  FormFeedback,
+  FormText,
+  Alert,
+} from 'reactstrap';
+
+const FormGroup = ({
+  label,
+  id,
+  helpText,
+  className,
+  style,
+  children,
+  meta,
+}) => {
+  return (
+    <BootstrapFormGroup className={className} style={style}>
+      {!!meta.warning && <Alert color="warning">{meta.warning}</Alert>}
+      {label && <Label htmlFor={id}>{label}</Label>}
+      {children}
+      {meta.error && <FormFeedback>{meta.error}</FormFeedback>}
+      {helpText && <FormText>{helpText}</FormText>}
+    </BootstrapFormGroup>
+  );
+};
+
+export default FormGroup;

package/src/FormGroupWrapper.js

@@ -1,28 +1,28 @@
-import React from 'react';
-import { InputGroup } from 'reactstrap';
-import FormGroup from './FormGroup';
-import ErrorScrollTarget from './ErrorScrollTarget';
-
-export default function FormGroupWrapper({
-  prepend,
-  append,
-  Component,
-  helpText,
-  ...props
-}) {
-  const { meta } = props;
-  return (
-    <FormGroup meta={meta} helpText={helpText} {...props}>
-      <ErrorScrollTarget name={props.name} />
-      {prepend || append ? (
-        <InputGroup>
-          {prepend}
-          <Component {...props} />
-          {append}
-        </InputGroup>
-      ) : (
-        <Component {...props} />
-      )}
-    </FormGroup>
-  );
-}
+import React from 'react';
+import { InputGroup } from 'reactstrap';
+import FormGroup from './FormGroup';
+import ErrorScrollTarget from './ErrorScrollTarget';
+
+export default function FormGroupWrapper({
+  prepend,
+  append,
+  Component,
+  helpText,
+  ...props
+}) {
+  const { meta } = props;
+  return (
+    <FormGroup meta={meta} helpText={helpText} {...props}>
+      <ErrorScrollTarget name={props.name} />
+      {prepend || append ? (
+        <InputGroup>
+          {prepend}
+          <Component {...props} />
+          {append}
+        </InputGroup>
+      ) : (
+        <Component {...props} />
+      )}
+    </FormGroup>
+  );
+}