envoc-form 3.3.0 → 4.0.1-0

package/src/__Tests__/FormTestBase.js

@@ -1,14 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';
-import React from 'react';
-import { HashRouter } from 'react-router-dom';
-import Form from '../Form';
-
-export default function FormTestBase({ children, initialValues }) {
-  return (
-    <HashRouter>
-      <Form onSubmit={() => {}} initialValues={initialValues}>
-        {children}
-      </Form>
-    </HashRouter>
-  );
-}

package/src/__Tests__/IconInput.test.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import FormTestBase from './FormTestBase';
-import IconInput from '../IconInput';
-
-describe('IconInput', () => {
-  it('renders without crashing', () => {
-    render(
-      <FormTestBase>
-        <IconInput name="test" icon="fa fa-user" helpText="help text" />
-      </FormTestBase>
-    );
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        <IconInput name="test" icon="fa fa-user" helpText="help text" />
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});

package/src/__Tests__/__snapshots__/IconInput.test.js.snap

@@ -1,38 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`IconInput has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-  >
-    <div
-      class="input-group"
-    >
-      <div
-        class="input-group-prepend"
-      >
-        <span
-          class="input-group-text"
-        >
-          <i
-            class="fa fa-user"
-          />
-        </span>
-      </div>
-      <input
-        aria-invalid="false"
-        class="form-control"
-        id="test"
-        name="test"
-        type="text"
-        value=""
-      />
-      <div
-        class="invalid-feedback"
-      >
-        help text
-      </div>
-    </div>
-  </form>
-</DocumentFragment>
-`;

package/src/index.js

@@ -1,70 +0,0 @@
-import * as normalizers from './normalizers';
-
-import { BoolInput, InlineBoolInput } from './BoolInput';
-import { InlineMoneyInput, MoneyInput } from './MoneyInput';
-import { MoneyFormattedInput } from './MoneyFormattedInput';
-
-import AddressInput, { UsStates } from './AddressInput';
-import ConfirmBaseForm from './ConfirmBaseForm';
-import ConfirmDeleteForm from './ConfirmDeleteForm';
-import DatePickerInput from './DatePickerInput';
-import ErrorScrollTarget from './ErrorScrollTarget';
-import { FileInput, DropzoneFileInput, DefaultFileList } from './FileInput';
-import Form, {
-  ServerErrorContext,
-  FocusError,
-  FormBasedPreventNavigation,
-} from './Form';
-import FormGroup from './FormGroup';
-import FormGroupWrapper from './FormGroupWrapper';
-import FormInput from './FormInput';
-import FormInputArray from './FormInputArray';
-import FormSection from './FormSection';
-import IconInput from './IconInput';
-import InlineFormInput from './InlineFormInput';
-import StandardFormActions from './StandardFormActions';
-import SubmitFormButton from './SubmitFormButton';
-import useStandardFormInput from './useStandardFormInput';
-import validators from './validators';
-import ReactSelectField, {
-  customStyles as customReactSelectFieldStyles,
-  overrideTheme as overrideReactSelectFieldStyles,
-} from './ReactSelectField';
-import NestedFormFieldContext from './NestedFormFieldContext';
-
-export {
-  AddressInput,
-  UsStates,
-  BoolInput,
-  ConfirmBaseForm,
-  ConfirmDeleteForm,
-  DatePickerInput,
-  ErrorScrollTarget,
-  FileInput,
-  DropzoneFileInput,
-  DefaultFileList,
-  Form,
-  FormGroup,
-  FormGroupWrapper,
-  FormInput,
-  FormInputArray,
-  FormSection,
-  IconInput,
-  InlineBoolInput,
-  InlineFormInput,
-  InlineMoneyInput,
-  MoneyInput,
-  MoneyFormattedInput,
-  normalizers,
-  StandardFormActions,
-  SubmitFormButton,
-  useStandardFormInput,
-  validators,
-  ServerErrorContext,
-  FocusError,
-  FormBasedPreventNavigation,
-  ReactSelectField,
-  customReactSelectFieldStyles,
-  overrideReactSelectFieldStyles,
-  NestedFormFieldContext,
-};

package/src/selectors.js

@@ -1,3 +0,0 @@
-export const getForm = (state, ownProps) => state.form[ownProps.form];
-export const getRegisteredFields = (state, ownProps) =>
-  getForm(state, ownProps) ? getForm(state, ownProps).registeredFields : {};

package/src/useStandardFormInput.js

@@ -1,118 +0,0 @@
-import { useField, useFormikContext } from 'formik';
-import { useContext, useEffect } from 'react';
-import NestedFormFieldContext from './NestedFormFieldContext';
-import { ServerErrorContext } from './Form';
-
-// provides a consistent way to deal with all form fields (non array)
-export default function useStandardFormInput({
-  id: providedId,
-  name: providedName,
-  disabled,
-  validate,
-  normalize,
-  ...props
-}) {
-  // 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 parentFormFieldContext = useContext(NestedFormFieldContext);
-  const name = parentFormFieldContext
-    ? `${parentFormFieldContext}.${providedName}`
-    : providedName;
-
-  // ensure that nested contexts don't have duplicate id issues when an id is specified
-  const id =
-    providedId && parentFormFieldContext
-      ? `${parentFormFieldContext}.${providedId}`
-      : providedId;
-
-  // ensure that our custom validation rules are handled
-  // e.g. we allow arrays of validators
-  const [{ onChange: formikOnChange, value, ...formikProps }, meta] = useField(
-    Object.assign({ name, id }, props, {
-      validate: callAllValidators,
-    })
-  );
-  const { setFieldValue, isSubmitting } = useFormikContext();
-
-  // these are the props we expect consumers of this hook to pass directly to the input (or other control)
-  const inputProps = Object.assign({}, props, formikProps, {
-    // ensure that we don't send a undefined / null - which signals to react that we are uncontrolled
-    // also, pass any direct from server props through normalize without making the form dirty (e.g. phone number)
-    value:
-      value === undefined || value === null
-        ? ''
-        : (normalize && normalize(value)) || value,
-    // ensure the id is set if not provided
-    id: id ? id : name,
-    // ensure we can handle both events from direct inputs and controlled ones like react select AND normalize
-    onChange: handleChange,
-    onBlur: handleBlur,
-    disabled: disabled,
-  });
-
-  useEffect(() => {
-    if (!meta.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();
-    }
-  });
-
-  const resultMeta = Object.assign({}, meta, {
-    error: getServerError(name) || (meta.touched ? meta.error : null),
-  });
-
-  return [inputProps, resultMeta];
-
-  function handleBlur(e) {
-    // some components are fully controlled and do not return synthetic events on blur
-    if (!e || !e.target) {
-      formikProps.onBlur({ target: { name: name } });
-    } else {
-      formikProps.onBlur(e);
-    }
-  }
-
-  function handleChange(e) {
-    if (disabled) {
-      return;
-    }
-    // some components are fully controlled and do not return synthetic events (e.g. ReactSelect) on change
-    // we should handle all our normal cases here to normalize / get the value / etc
-    const value =
-      e && e.target
-        ? e.target.type === 'checkbox'
-          ? e.target.checked
-          : e.target.value
-        : e;
-    const normalized = normalize ? normalize(value) : value;
-    setFieldValue(name, normalized);
-    setServerError(name, null);
-  }
-
-  function callAllValidators(value) {
-    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/utils/index.js

@@ -1,3 +0,0 @@
-import objectToFormData from './objectToFormData';
-import objectContainsNonSerializableProperty from './objectContainsNonSerializableProperty';
-export { objectToFormData, objectContainsNonSerializableProperty };

package/src/utils/typeChecks.js

@@ -1,18 +0,0 @@
-export const isUndefined = (value) => value === undefined;
-export const isNull = (value) => value === null;
-export const isBoolean = (value) => typeof value === 'boolean';
-export const isObject = (value) => value === Object(value);
-export const isArray = (value) => Array.isArray(value);
-export const isDate = (value) => value instanceof Date;
-
-export const isBlob = (value) =>
-  value &&
-  typeof value.size === 'number' &&
-  typeof value.type === 'string' &&
-  typeof value.slice === 'function';
-
-export const isFile = (value) =>
-  isBlob(value) &&
-  typeof value.name === 'string' &&
-  (typeof value.lastModifiedDate === 'object' ||
-    typeof value.lastModified === 'number');

package/src/validators/index.js

@@ -1,2 +0,0 @@
-import * as validators from './validators';
-export default validators;

package/src/validators/validators.js

@@ -1,93 +0,0 @@
-export const required = (value) =>
-  value || value === false || value === 0 ? undefined : 'Required';
-
-//asserts that the value is a certain number of characters. numbers are coerced to a string
-export const length = (len) => (value) => {
-  let val = value;
-  const type = typeof val;
-  switch (type) {
-    case 'undefined':
-      return undefined;
-    case 'string':
-      break;
-    case 'number':
-      val = val.toString();
-      break;
-    default:
-      console.error(`Invalid value type: ${type} passed to length validator`);
-  }
-  return val.length === len ? undefined : `Length must be ${len}`;
-};
-
-export const integer = (val) => {
-  if (!Number.isInteger(parseFloat(val))) {
-    return 'Must be a whole number';
-  }
-};
-
-export const maxLength = function maxLength(length) {
-  return (value) => {
-    if (value) {
-      return value.length <= length
-        ? undefined
-        : `Maximum length ${length} exceeded`;
-    } else {
-      return undefined;
-    }
-  };
-};
-
-export function maxCount(count) {
-  return (value) => {
-    return !value || value.filter((x) => !x.isDeleted).length <= count
-      ? undefined
-      : `Should not have more than ${count}`;
-  };
-}
-
-export function minCount(count) {
-  return (value) => {
-    return value && value.filter((x) => !x.isDeleted).length >= count
-      ? undefined
-      : `Should have at least ${count}`;
-  };
-}
-
-export const maxValue = function maxValue(value) {
-  return (inputValue) => {
-    if (inputValue != null && value != null) {
-      return inputValue <= value
-        ? undefined
-        : `Maximum value ${value} exceeded`;
-    } else {
-      return undefined;
-    }
-  };
-};
-
-export const minValue = function minValue(value) {
-  return (inputValue) => {
-    if (inputValue != null && value != null) {
-      return inputValue >= value ? undefined : `Minimum value ${value} not met`;
-    } else {
-      return undefined;
-    }
-  };
-};
-
-export const zipCode = (value) => {
-  return value && !/^[0-9]{5}(?:-[0-9]{4})?$/.test(value)
-    ? 'Invalid ZIP Code'
-    : undefined;
-};
-
-//one of the validators provided must be true
-export const any = (...validatorList) => (value) => {
-  if (validatorList.length === 0 || !value) {
-    return;
-  }
-  return validatorList.reduce(
-    (isAnyTrue, any) => (isAnyTrue ? isAnyTrue : any(value)),
-    false
-  );
-};