envoc-form 3.3.0 → 4.0.1-2

package/src/Field/useStandardField.ts

@@ -0,0 +1,121 @@
+import { useContext, useEffect } from 'react';
+import { useField, useFormikContext } from 'formik';
+import { CustomFieldInputProps } from './CustomFieldInputProps';
+import { CustomFieldMetaProps } from './CustomFieldMetaProps';
+import { FieldNameContext } from './FieldNameContext';
+import { ServerErrorContext } from '../Form/ServerErrorContext';
+import { NormalizationFunction } from '../Normalization/NormalizationFunction';
+import { ValidationFunction } from '../Validation/ValidationFunction';
+
+export interface useStandardFieldProps<TValue> {
+  id?: string;
+  name: string;
+  disabled?: boolean;
+  validate?: ValidationFunction<TValue> | ValidationFunction<TValue>[];
+  normalize?: NormalizationFunction<TValue>;
+}
+
+// provides a consistent way to deal with all form fields (non array)
+export default function useStandardField<TValue>({
+  id: providedId,
+  name: providedName,
+  disabled,
+  validate,
+  normalize,
+}: useStandardFieldProps<TValue>): [
+  CustomFieldInputProps<TValue>,
+  CustomFieldMetaProps<TValue>
+] {
+  // because the formik errors are evaluated all at the same time we need to keep server errors separate
+  const { getError: getServerError, setError: setServerError } =
+    useContext(ServerErrorContext);
+
+  // ensure that form section values are obeyed, e.g. homeAddress.zipCode
+  const fieldNameContextValue = useContext(FieldNameContext);
+  const name = fieldNameContextValue
+    ? `${fieldNameContextValue}.${providedName}`
+    : providedName;
+
+  // ensure that nested contexts don't have duplicate id issues when an id is specified
+  const id = providedId
+    ? fieldNameContextValue
+      ? `${fieldNameContextValue}.${providedId}`
+      : providedId
+    : name;
+
+  // ensure that our custom validation rules are handled
+  // e.g. we allow arrays of validators
+  const [formikInput, formikMeta] = useField<TValue>({
+    name,
+    id: id ? id : name,
+    disabled: disabled,
+    validate: callAllValidators,
+  });
+  const { setFieldValue, isSubmitting } = useFormikContext();
+
+  const touched =
+    formikMeta.touched !== false && formikMeta.touched !== undefined;
+  useEffect(() => {
+    if (!touched && isSubmitting) {
+      // because we do not always register all fields up front.
+      // e.g. formik expects even a 'create' form to have all fields given, at least, blank values
+      // that seems to be how it touches on submit:
+      // see: https://codesandbox.io/s/formik-example-4n7n8 vs https://codesandbox.io/s/formik-example-kttk5
+      // note in particular the change in line 24
+      // thus, we manually touch all fields here by calling onBlur
+      // there is a "setFieldTouched" from useFormikContext but it doesn't appear to work on field arrays
+      handleBlur();
+    }
+  });
+
+  // these are the props we expect consumers of this hook to pass directly to the input (or other control)
+  const resultInput: CustomFieldInputProps<TValue> = {
+    name: formikInput.name,
+    // pass any direct from server props through normalize without making the form dirty (e.g. phone number)
+    value: normalize ? normalize(formikInput.value) : formikInput.value,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    // extensions to formik
+    id: id,
+  };
+
+  const resultMeta: CustomFieldMetaProps<TValue> = {
+    ...formikMeta,
+    error: getServerError(name) || (touched ? formikMeta.error : undefined),
+    // extensions to formik
+    warning: undefined, // TODO - did this never work?
+    touched: touched,
+  };
+
+  return [resultInput, resultMeta];
+
+  function handleBlur() {
+    formikInput.onBlur({ target: { name: name } });
+  }
+
+  function handleChange(value: TValue) {
+    if (disabled) {
+      return;
+    }
+    const normalized = normalize ? normalize(value) : value;
+    setFieldValue(name, normalized);
+    setServerError(name, undefined);
+  }
+
+  function callAllValidators(value: TValue) {
+    if (disabled || !validate) {
+      return;
+    }
+
+    if (!Array.isArray(validate)) {
+      return validate(value);
+    }
+
+    for (let i = 0; i < validate.length; i++) {
+      const result = validate[i](value);
+      if (result) {
+        return result;
+      }
+    }
+  }
+}

package/src/FieldArray/FieldArray.tsx

@@ -0,0 +1,133 @@
+import { ElementType } from 'react';
+import classNames from 'classnames';
+import Field, { FieldProps } from '../Field/Field';
+import { FieldNameContext } from '../Field/FieldNameContext';
+import useStandardFormInput from '../Field/useStandardField';
+import { ValidationFunction } from '../Validation/ValidationFunction';
+
+export type FieldArrayProps<
+  TForm extends object,
+  TProp extends keyof TForm
+> = TForm[TProp] extends Array<any> | undefined
+  ? {
+      name: TProp;
+      label?: string;
+      disabled?: boolean;
+      validate?:
+        | ValidationFunction<TForm[TProp]>
+        | ValidationFunction<TForm[TProp]>[];
+      children: (
+        formBuilder: ArrayFormBuilderProp<TForm[TProp]>
+      ) => JSX.Element;
+    }
+  : never;
+
+export type ArrayFormBuilderProp<TValue extends Array<any> | undefined> =
+  TValue extends Array<infer TForm> | undefined
+    ? TForm extends object
+      ? {
+          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;
+        }
+      : never
+    : never;
+
+export default function FieldArray<
+  TForm extends object,
+  TProp extends keyof TForm
+>({
+  name,
+  label,
+  validate,
+  disabled,
+  children,
+  ...rest
+}: FieldArrayProps<TForm, TProp>) {
+  const [input, meta] = useStandardFormInput<TForm[TProp]>({
+    name: String(name),
+    validate: validate,
+    disabled: disabled,
+  });
+
+  const values: any[] = !input.value
+    ? []
+    : Array.isArray(input.value)
+    ? input.value
+    : [];
+
+  return (
+    <div className="field-array">
+      <div className="field-array-header">
+        <div className="field-array-title">{label}</div>
+        <button
+          className={classNames('add-array-item-button', { disabled })}
+          title="Add Item"
+          type="button"
+          onClick={addItem}>
+          +
+        </button>
+      </div>
+      <div className="field-array-body">
+        {values.map((value, index) => {
+          const itemName = `${input.name}[${index}]`;
+          return (
+            <div
+              key={
+                (value && value['form-input-array-key']) ||
+                (value && value['id']) ||
+                itemName
+              }
+              className={classNames('field-array-item', {
+                removed: value.isDeleted,
+              })}
+              role="listitem">
+              <FieldNameContext.Provider value={itemName}>
+                {children({
+                  Field: Field,
+                  FieldArray: FieldArray,
+                } as any)}
+              </FieldNameContext.Provider>
+              <button
+                className={classNames('remove-array-item-button', { disabled })}
+                type="button"
+                title="Remove Item"
+                onClick={() => removeItem(value)}>
+                -
+              </button>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+
+  function addItem() {
+    if (disabled) {
+      return;
+    }
+    input.onChange([...values, {}] as any);
+  }
+
+  function removeItem(item: any) {
+    if (disabled) {
+      return;
+    }
+    // assumes anything from the server has an 'id' value sent
+    if (!item.id) {
+      input.onChange(values.filter((x) => x !== item) as any);
+      return;
+    }
+    const mapped = values.map((x) =>
+      x !== item ? x : Object.assign({}, x, { isDeleted: true })
+    );
+    input.onChange(mapped as any);
+  }
+}

package/src/File/FileGroup.test.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { FileGroup } from '../';
+import FormTestBase from '../__Tests__/FormTestBase';
+
+describe('FileGroup', () => {
+  it('renders without crashing', () => {
+    render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="profileImage"
+            Component={FileGroup}
+            label="Profile Image"
+          />
+        )}
+      </FormTestBase>
+    );
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="profileImage"
+            Component={FileGroup}
+            label="Profile Image"
+          />
+        )}
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});

package/src/File/FileGroup.tsx

@@ -0,0 +1,71 @@
+import React, { ComponentType, LegacyRef } from 'react';
+import classNames from 'classnames';
+import FileList from './FileList';
+import { InjectedFieldProps } from '../Field/InjectedFieldProps';
+import Group, { GroupProps } from '../Group';
+
+export interface FileGroupProps
+  // note: file props are of type "any" with the current type generation
+  extends InjectedFieldProps<any | undefined>,
+    Omit<GroupProps, keyof InjectedFieldProps<any> | 'children'>,
+    Omit<
+      React.HTMLProps<HTMLInputElement>,
+      keyof InjectedFieldProps<any> | 'children' | 'className' | 'label'
+    > {
+  multiple?: boolean | undefined;
+}
+
+function FileGroup(
+  {
+    input,
+    meta,
+    label,
+    helpText,
+    className,
+    multiple,
+    ...rest
+  }: FileGroupProps,
+  ref: LegacyRef<HTMLInputElement>
+) {
+  return (
+    <Group
+      input={input}
+      meta={meta}
+      label={label}
+      helpText={helpText}
+      className={classNames(className, { multiple }, 'file-group')}>
+      <input
+        {...input}
+        {...rest}
+        multiple={multiple}
+        onChange={(e) => {
+          if (!e?.target?.files?.length) {
+            input.onChange(undefined);
+          } else {
+            const files: File[] = [];
+            for (let i = 0; i < e.target.files.length; i++) {
+              files.push(e.target.files[i]);
+            }
+            if (!multiple) {
+              input.onChange(files[0]);
+            } else {
+              input.onChange(files);
+            }
+          }
+        }}
+        value={undefined}
+        ref={ref}
+        type="file"
+        className={classNames(className, 'file-group')}
+      />
+      {/* Note: because input.value is any - due to how files are currently handled - type safeness isn't great here */}
+      <FileList files={input.value} />
+    </Group>
+  );
+}
+
+const FileGroupWithRef = React.forwardRef(
+  FileGroup
+) as ComponentType<FileGroupProps>;
+
+export default FileGroupWithRef;

package/src/File/FileList.tsx

@@ -0,0 +1,19 @@
+export interface FileListProps {
+  files?: File | File[] | undefined;
+  rejectedFiles?: File | File[] | undefined;
+}
+export default function FileList({ files, rejectedFiles }: FileListProps) {
+  return (
+    <div className="file-list">
+      {!files ? null : Array.isArray(files) ? (
+        files.map((x, i) => <File file={x} key={i} />)
+      ) : (
+        <File file={files} />
+      )}
+    </div>
+  );
+}
+
+function File({ file }: { file: File }) {
+  return null;
+}

package/src/File/__snapshots__/FileGroup.test.tsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FileGroup has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+  >
+    <div
+      class="file-group group"
+    >
+      <div
+        id="profileimage-error-scroll-target"
+        style="display: none;"
+      />
+      <label
+        for="profileImage"
+      >
+        Profile Image
+      </label>
+      <input
+        class="file-group"
+        id="profileImage"
+        name="profileImage"
+        type="file"
+        value=""
+      />
+      <div
+        class="file-list"
+      />
+    </div>
+  </form>
+</DocumentFragment>
+`;

package/src/File/humanFileSize.ts

@@ -0,0 +1,8 @@
+export function humanFileSize(size: number) {
+  const i = Math.floor(Math.log(size) / Math.log(1024));
+  return (
+    (size / Math.pow(1024, i)).toFixed(2) +
+    ' ' +
+    ['B', 'KB', 'MB', 'GB', 'TB'][i]
+  );
+}

package/src/Form/{FocusError.js → FocusError.tsx}

@@ -1,8 +1,12 @@
 import { useEffect } from 'react';
 import { useFormikContext } from 'formik';
 import smoothscroll from 'smoothscroll-polyfill';
+import { ServerErrorContextProps } from './ServerErrorContext';
 
-export default function FocusError(props) {
+export interface FocusErrorProps {
+  serverErrors: ServerErrorContextProps;
+}
+export default function FocusError(props: FocusErrorProps) {
   const { errors, isSubmitting, isValidating } = useFormikContext();
   smoothscroll.polyfill();
   useEffect(() => {
@@ -28,14 +32,14 @@ export default function FocusError(props) {
   return null;
 }
 
-const scrollToErrorElement = (keys) => {
-  let firstErrorElement = document.getElementById(
+const scrollToErrorElement = (keys: string[]) => {
+  let firstErrorElement: HTMLElement | null = document.getElementById(
     `${keys[0].toLowerCase()}-error-scroll-target`
   );
-  if (firstErrorElement == null || firstErrorElement.parentNode == null) {
+  if (!firstErrorElement || !firstErrorElement.parentNode) {
     return;
   }
-  firstErrorElement = firstErrorElement.parentNode;
+  firstErrorElement = firstErrorElement.parentNode as HTMLElement;
   const headerOffset = -110;
   const y =
     firstErrorElement.getBoundingClientRect().top +
@@ -43,6 +47,6 @@ const scrollToErrorElement = (keys) => {
     headerOffset;
   window.scrollTo({ top: y, behavior: 'smooth' });
   setTimeout(() => {
-    firstErrorElement.focus();
+    firstErrorElement?.focus();
   }, 500);
 };

package/src/Form/Form.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import FormTestBase from '../__Tests__/FormTestBase';
+
+describe('FormTestBase', () => {
+  it('renders without crashing', () => {
+    render(<FormTestBase>{() => <></>}</FormTestBase>);
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(<FormTestBase>{() => <></>}</FormTestBase>);
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});

package/src/Form/{Form.js → Form.tsx}

@@ -1,15 +1,56 @@
-import React, { useState, useMemo, useContext } from 'react';
-import PropTypes from 'prop-types';
+import {
+  CSSProperties,
+  ElementType,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+import {
+  Form as FormikFormWrapper,
+  Formik,
+  FormikHelpers,
+  useFormikContext,
+} from 'formik';
 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';
+  ServerErrorContext,
+  ServerErrorContextProps,
+  ServerErrors,
+} from './ServerErrorContext';
+import Field, { FieldProps } from '../Field/Field';
+import FieldArray, { FieldArrayProps } from '../FieldArray/FieldArray';
+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 default function Form({
+export interface FormProps<TForm extends object> {
+  children: (formBuilder: FormBuilderProp<TForm>) => JSX.Element;
+  onSubmit: (
+    formValues: FormData | TForm,
+    formikBag: FormikHelpers<TForm>
+  ) => Promise<ValidatedApiResult>;
+  className?: string;
+  style?: CSSProperties;
+  ignoreLostChanges?: boolean;
+  initialValues?: TForm;
+}
+
+export default function Form<TForm extends object>({
   children,
   className,
   style,
@@ -17,13 +58,13 @@ export default function Form({
   onSubmit,
   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(null);
-  const serverErrorContextValue = useMemo(
+  const [serverErrors, setServerErrors] = useState<ServerErrors>({});
+  const serverErrorContextValue = useMemo<ServerErrorContextProps>(
     () => ({
       errors: serverErrors,
       getError: (path) => {
@@ -47,21 +88,25 @@ export default function Form({
       validateOnChange={false}
       validateOnBlur={true}
       validateOnMount={false}
-      initialValues={initialValues || {}}
+      initialValues={initialValues || ({} as TForm)}
       onSubmit={handleSubmit}
       {...props}>
       <ServerErrorContext.Provider value={serverErrorContextValue}>
         <FormikFormWrapper className={className} style={style}>
           <FocusError serverErrors={serverErrorContextValue} />
           <FormBasedPreventNavigation ignoreLostChanges={ignoreLostChanges} />
-          {typeof children === 'function' ? children(props) : children}
+          {children({
+            // hack for ref forwarding
+            Field: Field as any,
+            FieldArray: FieldArray as any,
+          })}
         </FormikFormWrapper>
       </ServerErrorContext.Provider>
     </Formik>
   );
 
-  function handleSubmit(values, formikBag) {
-    let formData = null;
+  function handleSubmit(values: TForm, formikBag: FormikHelpers<TForm>) {
+    let formData: FormData | undefined = undefined;
     if (objectContainsNonSerializableProperty(values)) {
       formData = objectToFormData(values, {
         indices: true,
@@ -71,7 +116,7 @@ export default function Form({
       });
     }
 
-    return Promise.resolve(onSubmit(formData || values))
+    return onSubmit(formData ?? values, formikBag)
       .then((response) => {
         return response;
       })
@@ -84,17 +129,18 @@ export default function Form({
           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) => {
+            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
-                acc[value.path] = value.errorMessage;
+                // 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');
@@ -131,9 +177,3 @@ function DisplayFormState() {
     </div>
   );
 }
-
-Form.propTypes = {
-  ignoreLostChanges: PropTypes.bool,
-  onSubmit: PropTypes.func.isRequired,
-  initialValues: PropTypes.object,
-};