envoc-form 5.0.3 → 5.0.6

package/src/Field/StandAloneInput.tsx

@@ -1,55 +1,55 @@
-import { ElementType, useRef } from 'react';
-import * as uuid from 'uuid';
-import { CustomFieldInputProps } from './CustomFieldInputProps';
-import { CustomFieldMetaProps } from './CustomFieldMetaProps';
-import { RenderComponent, RenderComponentProps } from './Field';
-import { InjectedFieldProps } from './InjectedFieldProps';
-
-export type StandAloneInputProps<
-  TValue,
-  TRenderComponent extends ElementType
-> = {
-  /** Component to render inside of the field. */
-  Component: RenderComponent<TValue, TRenderComponent>;
-  /** Value of the field. */
-  value: TValue;
-  /** Function to change the value of the field. */
-  onChange: (arg: TValue) => void;
-} & Omit<
-  RenderComponentProps<TValue, TRenderComponent>,
-  | keyof InjectedFieldProps<TValue>
-  | 'value'
-  | 'onChange'
-  | 'normalize'
-  | 'validate'
->;
-
-/** The stand alone version of `<Field/>`. Can use a type of input component outside of a `<Form/>`. */
-export default function StandAloneInput<TValue, TComponent extends ElementType>(
-  props: StandAloneInputProps<TValue, TComponent>
-) {
-  const { Component, value, onChange, disabled, ...rest } = props;
-  const handleChange = (arg: TValue) => {
-    if (!disabled) {
-      onChange(arg);
-    }
-  };
-  const Wrapped = Component as React.ComponentType<InjectedFieldProps<TValue>>;
-  const idRef = useRef(uuid.v4());
-  const input: CustomFieldInputProps<TValue> = {
-    id: idRef.current,
-    name: idRef.current,
-    value: value,
-    onChange: handleChange,
-    onBlur: () => {},
-  };
-
-  const meta: CustomFieldMetaProps<TValue> = {
-    warning: undefined,
-    value: value,
-    touched: false,
-    initialTouched: false,
-  };
-
-  return <Wrapped {...rest} disabled={disabled} input={input} meta={meta} />;
-}
+import { ElementType, useRef } from 'react';
+import * as uuid from 'uuid';
+import { CustomFieldInputProps } from './CustomFieldInputProps';
+import { CustomFieldMetaProps } from './CustomFieldMetaProps';
+import { RenderComponent, RenderComponentProps } from './Field';
+import { InjectedFieldProps } from './InjectedFieldProps';
+
+export type StandAloneInputProps<
+  TValue,
+  TRenderComponent extends ElementType
+> = {
+  /** Component to render inside of the field. */
+  Component: RenderComponent<TValue, TRenderComponent>;
+  /** Value of the field. */
+  value: TValue;
+  /** Function to change the value of the field. */
+  onChange: (arg: TValue) => void;
+} & Omit<
+  RenderComponentProps<TValue, TRenderComponent>,
+  | keyof InjectedFieldProps<TValue>
+  | 'value'
+  | 'onChange'
+  | 'normalize'
+  | 'validate'
+>;
+
+/** The stand alone version of `<Field/>`. Can use a type of input component outside of a `<Form/>`. */
+export default function StandAloneInput<TValue, TComponent extends ElementType>(
+  props: StandAloneInputProps<TValue, TComponent>
+) {
+  const { Component, value, onChange, disabled, ...rest } = props;
+  const handleChange = (arg: TValue) => {
+    if (!disabled) {
+      onChange(arg);
+    }
+  };
+  const Wrapped = Component as React.ComponentType<InjectedFieldProps<TValue>>;
+  const idRef = useRef(uuid.v4());
+  const input: CustomFieldInputProps<TValue> = {
+    id: idRef.current,
+    name: idRef.current,
+    value: value,
+    onChange: handleChange,
+    onBlur: () => {},
+  };
+
+  const meta: CustomFieldMetaProps<TValue> = {
+    warning: undefined,
+    value: value,
+    touched: false,
+    initialTouched: false,
+  };
+
+  return <Wrapped {...rest} disabled={disabled} input={input} meta={meta} />;
+}

package/src/Field/useStandardField.ts

@@ -1,125 +1,125 @@
-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 of the field. */
-  id?: string;
-  /** Name of the field. */
-  name: string;
-  /** Whether the field should be disabled. */
-  disabled?: boolean;
-  /** Function to validate the field. */
-  validate?: ValidationFunction<TValue> | ValidationFunction<TValue>[];
-  /** Function to modify the field value without making the form dirty. (e.g. phone number) */
-  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 { setFieldTouched, 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
-      // It looks like this was going to be a thing: https://github.com/jaredpalmer/formik/issues/691
-      // Formik appears to not have an active maintainer: https://github.com/jaredpalmer/formik/discussions/3526
-      // We previously had a different fix in place using handleBlur, but it was causing an infinite update cycle.
-      // This was noted as existing, but there was a note about it not working for FieldArray (this does appear to work in my testing with FieldArray)
-      setFieldTouched(name);
-    }
-  }, [isSubmitting, name, setFieldTouched, touched]);
-
-  // 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;
-      }
-    }
-  }
-}
+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 of the field. */
+  id?: string;
+  /** Name of the field. */
+  name: string;
+  /** Whether the field should be disabled. */
+  disabled?: boolean;
+  /** Function to validate the field. */
+  validate?: ValidationFunction<TValue> | ValidationFunction<TValue>[];
+  /** Function to modify the field value without making the form dirty. (e.g. phone number) */
+  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 { setFieldTouched, 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
+      // It looks like this was going to be a thing: https://github.com/jaredpalmer/formik/issues/691
+      // Formik appears to not have an active maintainer: https://github.com/jaredpalmer/formik/discussions/3526
+      // We previously had a different fix in place using handleBlur, but it was causing an infinite update cycle.
+      // This was noted as existing, but there was a note about it not working for FieldArray (this does appear to work in my testing with FieldArray)
+      setFieldTouched(name);
+    }
+  }, [isSubmitting, name, setFieldTouched, touched]);
+
+  // 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

@@ -1,154 +1,154 @@
-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 { FormDefaults } from '../FormDefaults';
-import { ValidationFunction } from '../Validation/ValidationFunction';
-
-export type FieldArrayProps<
-  TForm extends object,
-  TProp extends keyof TForm
-> = TForm[TProp] extends Array<any> | undefined | null
-  ? {
-      /** Name of the field, used on submission. If using codegen this must be the provided dto. */
-      name: TProp;
-      /** Label of the field. */
-      label?: string;
-      /** Whether the field should be disabled. */
-      disabled?: boolean;
-      /** Function to validate the value. */
-      validate?:
-        | ValidationFunction<TForm[TProp]>
-        | ValidationFunction<TForm[TProp]>[];
-      children: (
-        formBuilder: ArrayFormBuilderProp<TForm[TProp]>
-      ) => JSX.Element;
-    }
-  : never;
-
-export type ArrayFormBuilderProp<TValue extends Array<any> | undefined | null> =
-  TValue extends Array<infer TForm> | undefined | null
-    ? 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;
-
-/**
- * An array of fields that allows the user to add multiple instances of the same field.
- *
- * Includes "Add Item" and "Remove Item" buttons to allow the user to speicify the number of fields.
- */
-export default function FieldArray<
-  TForm extends object,
-  TProp extends keyof TForm
->({
-  name,
-  label,
-  validate,
-  disabled,
-  children,
-  ...rest
-}: FieldArrayProps<TForm, TProp>) {
-  const [input] = useStandardFormInput<TForm[TProp]>({
-    name: String(name),
-    validate: validate,
-    disabled: disabled,
-  });
-
-  const values: any[] = !input.value
-    ? []
-    : Array.isArray(input.value)
-    ? input.value
-    : [];
-
-  return (
-    <div className={FormDefaults.cssClassPrefix + 'field-array'}>
-      <div className={FormDefaults.cssClassPrefix + 'field-array-header'}>
-        <div className={FormDefaults.cssClassPrefix + 'field-array-title'}>
-          {label}
-        </div>
-        <button
-          className={classNames(
-            FormDefaults.cssClassPrefix + 'add-array-item-button',
-            { [FormDefaults.cssClassPrefix + 'disabled']: disabled }
-          )}
-          title="Add Item"
-          type="button"
-          onClick={addItem}>
-          +
-        </button>
-      </div>
-      <div className={FormDefaults.cssClassPrefix + '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(
-                FormDefaults.cssClassPrefix + 'field-array-item',
-                {
-                  [FormDefaults.cssClassPrefix + 'removed']: value.isDeleted,
-                }
-              )}
-              role="listitem">
-              <FieldNameContext.Provider value={itemName}>
-                {children({
-                  Field: Field,
-                  FieldArray: FieldArray,
-                } as any)}
-              </FieldNameContext.Provider>
-              <button
-                className={classNames(
-                  FormDefaults.cssClassPrefix + 'remove-array-item-button',
-                  { [FormDefaults.cssClassPrefix + 'disabled']: 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);
-  }
-}
+import { ElementType } from 'react';
+import { clsx } from 'clsx';
+import Field, { FieldProps } from '../Field/Field';
+import { FieldNameContext } from '../Field/FieldNameContext';
+import useStandardFormInput from '../Field/useStandardField';
+import { FormDefaults } from '../FormDefaults';
+import { ValidationFunction } from '../Validation/ValidationFunction';
+
+export type FieldArrayProps<
+  TForm extends object,
+  TProp extends keyof TForm
+> = TForm[TProp] extends Array<any> | undefined | null
+  ? {
+      /** Name of the field, used on submission. If using codegen this must be the provided dto. */
+      name: TProp;
+      /** Label of the field. */
+      label?: string;
+      /** Whether the field should be disabled. */
+      disabled?: boolean;
+      /** Function to validate the value. */
+      validate?:
+        | ValidationFunction<TForm[TProp]>
+        | ValidationFunction<TForm[TProp]>[];
+      children: (
+        formBuilder: ArrayFormBuilderProp<TForm[TProp]>
+      ) => JSX.Element;
+    }
+  : never;
+
+export type ArrayFormBuilderProp<TValue extends Array<any> | undefined | null> =
+  TValue extends Array<infer TForm> | undefined | null
+    ? 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;
+
+/**
+ * An array of fields that allows the user to add multiple instances of the same field.
+ *
+ * Includes "Add Item" and "Remove Item" buttons to allow the user to speicify the number of fields.
+ */
+export default function FieldArray<
+  TForm extends object,
+  TProp extends keyof TForm
+>({
+  name,
+  label,
+  validate,
+  disabled,
+  children,
+  ...rest
+}: FieldArrayProps<TForm, TProp>) {
+  const [input] = useStandardFormInput<TForm[TProp]>({
+    name: String(name),
+    validate: validate,
+    disabled: disabled,
+  });
+
+  const values: any[] = !input.value
+    ? []
+    : Array.isArray(input.value)
+    ? input.value
+    : [];
+
+  return (
+    <div className={FormDefaults.cssClassPrefix + 'field-array'}>
+      <div className={FormDefaults.cssClassPrefix + 'field-array-header'}>
+        <div className={FormDefaults.cssClassPrefix + 'field-array-title'}>
+          {label}
+        </div>
+        <button
+          className={clsx(
+            FormDefaults.cssClassPrefix + 'add-array-item-button',
+            { [FormDefaults.cssClassPrefix + 'disabled']: disabled }
+          )}
+          title="Add Item"
+          type="button"
+          onClick={addItem}>
+          +
+        </button>
+      </div>
+      <div className={FormDefaults.cssClassPrefix + '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={clsx(
+                FormDefaults.cssClassPrefix + 'field-array-item',
+                {
+                  [FormDefaults.cssClassPrefix + 'removed']: value.isDeleted,
+                }
+              )}
+              role="listitem">
+              <FieldNameContext.Provider value={itemName}>
+                {children({
+                  Field: Field,
+                  FieldArray: FieldArray,
+                } as any)}
+              </FieldNameContext.Provider>
+              <button
+                className={clsx(
+                  FormDefaults.cssClassPrefix + 'remove-array-item-button',
+                  { [FormDefaults.cssClassPrefix + 'disabled']: 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);
+  }
+}