envoc-form 3.3.0 → 4.0.1-0

package/lib/useStandardFormInput.js

@@ -1,135 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = useStandardFormInput;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _formik = require("formik");
-
-var _react = require("react");
-
-var _NestedFormFieldContext = _interopRequireDefault(require("./NestedFormFieldContext"));
-
-var _Form = require("./Form");
-
-var _excluded = ["id", "name", "disabled", "validate", "normalize"],
-    _excluded2 = ["onChange", "value"];
-
-// provides a consistent way to deal with all form fields (non array)
-function useStandardFormInput(_ref) {
-  var providedId = _ref.id,
-      providedName = _ref.name,
-      disabled = _ref.disabled,
-      validate = _ref.validate,
-      normalize = _ref.normalize,
-      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-
-  // because the formik errors are evaluated all at the same time we need to keep server errors separate
-  var _useContext = (0, _react.useContext)(_Form.ServerErrorContext),
-      getServerError = _useContext.getError,
-      setServerError = _useContext.setError; // ensure that form section values are obeyed, e.g. homeAddress.zipCode
-
-
-  var parentFormFieldContext = (0, _react.useContext)(_NestedFormFieldContext["default"]);
-  var name = parentFormFieldContext ? "".concat(parentFormFieldContext, ".").concat(providedName) : providedName; // ensure that nested contexts don't have duplicate id issues when an id is specified
-
-  var id = providedId && parentFormFieldContext ? "".concat(parentFormFieldContext, ".").concat(providedId) : providedId; // ensure that our custom validation rules are handled
-  // e.g. we allow arrays of validators
-
-  var _useField = (0, _formik.useField)(Object.assign({
-    name: name,
-    id: id
-  }, props, {
-    validate: callAllValidators
-  })),
-      _useField2 = (0, _slicedToArray2["default"])(_useField, 2),
-      _useField2$ = _useField2[0],
-      formikOnChange = _useField2$.onChange,
-      value = _useField2$.value,
-      formikProps = (0, _objectWithoutProperties2["default"])(_useField2$, _excluded2),
-      meta = _useField2[1];
-
-  var _useFormikContext = (0, _formik.useFormikContext)(),
-      setFieldValue = _useFormikContext.setFieldValue,
-      isSubmitting = _useFormikContext.isSubmitting; // these are the props we expect consumers of this hook to pass directly to the input (or other control)
-
-
-  var 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
-  });
-  (0, _react.useEffect)(function () {
-    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();
-    }
-  });
-  var 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
-
-
-    var value = e && e.target ? e.target.type === 'checkbox' ? e.target.checked : e.target.value : e;
-    var 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 (var i = 0; i < validate.length; i++) {
-      var result = validate[i](value);
-
-      if (result) {
-        return result;
-      }
-    }
-  }
-}

package/lib/utils/index.js

@@ -1,23 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "objectToFormData", {
-  enumerable: true,
-  get: function get() {
-    return _objectToFormData["default"];
-  }
-});
-Object.defineProperty(exports, "objectContainsNonSerializableProperty", {
-  enumerable: true,
-  get: function get() {
-    return _objectContainsNonSerializableProperty["default"];
-  }
-});
-
-var _objectToFormData = _interopRequireDefault(require("./objectToFormData"));
-
-var _objectContainsNonSerializableProperty = _interopRequireDefault(require("./objectContainsNonSerializableProperty"));

package/lib/validators/index.js

@@ -1,17 +0,0 @@
-"use strict";
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var validators = _interopRequireWildcard(require("./validators"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var _default = validators;
-exports["default"] = _default;

package/lib/validators/validators.js

@@ -1,130 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.maxCount = maxCount;
-exports.minCount = minCount;
-exports.any = exports.zipCode = exports.minValue = exports.maxValue = exports.maxLength = exports.integer = exports.length = exports.required = void 0;
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-var required = function required(value) {
-  return value || value === false || value === 0 ? undefined : 'Required';
-}; //asserts that the value is a certain number of characters. numbers are coerced to a string
-
-
-exports.required = required;
-
-var length = function length(len) {
-  return function (value) {
-    var val = value;
-    var type = (0, _typeof2["default"])(val);
-
-    switch (type) {
-      case 'undefined':
-        return undefined;
-
-      case 'string':
-        break;
-
-      case 'number':
-        val = val.toString();
-        break;
-
-      default:
-        console.error("Invalid value type: ".concat(type, " passed to length validator"));
-    }
-
-    return val.length === len ? undefined : "Length must be ".concat(len);
-  };
-};
-
-exports.length = length;
-
-var integer = function integer(val) {
-  if (!Number.isInteger(parseFloat(val))) {
-    return 'Must be a whole number';
-  }
-};
-
-exports.integer = integer;
-
-var maxLength = function maxLength(length) {
-  return function (value) {
-    if (value) {
-      return value.length <= length ? undefined : "Maximum length ".concat(length, " exceeded");
-    } else {
-      return undefined;
-    }
-  };
-};
-
-exports.maxLength = maxLength;
-
-function maxCount(count) {
-  return function (value) {
-    return !value || value.filter(function (x) {
-      return !x.isDeleted;
-    }).length <= count ? undefined : "Should not have more than ".concat(count);
-  };
-}
-
-function minCount(count) {
-  return function (value) {
-    return value && value.filter(function (x) {
-      return !x.isDeleted;
-    }).length >= count ? undefined : "Should have at least ".concat(count);
-  };
-}
-
-var maxValue = function maxValue(value) {
-  return function (inputValue) {
-    if (inputValue != null && value != null) {
-      return inputValue <= value ? undefined : "Maximum value ".concat(value, " exceeded");
-    } else {
-      return undefined;
-    }
-  };
-};
-
-exports.maxValue = maxValue;
-
-var minValue = function minValue(value) {
-  return function (inputValue) {
-    if (inputValue != null && value != null) {
-      return inputValue >= value ? undefined : "Minimum value ".concat(value, " not met");
-    } else {
-      return undefined;
-    }
-  };
-};
-
-exports.minValue = minValue;
-
-var zipCode = function zipCode(value) {
-  return value && !/^[0-9]{5}(?:-[0-9]{4})?$/.test(value) ? 'Invalid ZIP Code' : undefined;
-}; //one of the validators provided must be true
-
-
-exports.zipCode = zipCode;
-
-var any = function any() {
-  for (var _len = arguments.length, validatorList = new Array(_len), _key = 0; _key < _len; _key++) {
-    validatorList[_key] = arguments[_key];
-  }
-
-  return function (value) {
-    if (validatorList.length === 0 || !value) {
-      return;
-    }
-
-    return validatorList.reduce(function (isAnyTrue, any) {
-      return isAnyTrue ? isAnyTrue : any(value);
-    }, false);
-  };
-};
-
-exports.any = any;

package/src/AddressInput/AddressInput.js

@@ -1,73 +0,0 @@
-import React from 'react';
-import { Col, Row } from 'reactstrap';
-import PropTypes from 'prop-types';
-import FormInput from '../FormInput';
-import FormSection from '../FormSection';
-import validators from '../validators';
-import * as normalizers from '../normalizers';
-import UsStates from './UsStates';
-
-export default class AddressInput extends React.Component {
-  render() {
-    const { name, ...props } = this.props;
-    return (
-      <FormSection name={name} {...props}>
-        <FormInput
-          name="address1"
-          placeholder="Address, Line 1"
-          label="Address 1"
-          autoComplete="address-line1"
-          validate={validators.required}
-        />
-        <FormInput
-          name="address2"
-          placeholder="Address, Line 2"
-          label="Address 2"
-          autoComplete="address-line2"
-        />
-        <FormInput
-          name="city"
-          placeholder="City"
-          label="City"
-          autoComplete="address-level2"
-          validate={validators.required}
-        />
-        <Row>
-          <Col xs={8}>
-            <FormInput
-              name="state"
-              placeholder="State"
-              label="State"
-              type="select"
-              options={UsStates}
-              autoComplete="address-level1"
-              validate={validators.required}
-            />
-          </Col>
-          <Col xs={4}>
-            <FormInput
-              name="zipCode"
-              placeholder="Zip"
-              label="Zip"
-              autoComplete="postal-code"
-              normalize={normalizers.zipCode}
-              validate={[validators.required, validators.zipCode]}
-            />
-          </Col>
-        </Row>
-      </FormSection>
-    );
-  }
-}
-AddressInput.propTypes = {
-  /**
-   * The key that the resulting values should be nested under within the form values.
-   * If name prop were chicken the submitted form values would look like: {chicken: {address1:...}}
-   * this allows us to have two address inputs inside the same form (shipping and billing address)
-   */
-  name: PropTypes.string,
-};
-
-AddressInput.defaultProps = {
-  name: 'address',
-};

package/src/AddressInput/__snapshots__/AddesssInput.test.js.snap

@@ -1,207 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AddressInput has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-  >
-    <div
-      class="form-group"
-    >
-      <label
-        class=""
-        for="address.address1"
-      >
-        Address 1
-      </label>
-      <div
-        id="address.address1-error-scroll-target"
-        style="display: none;"
-      />
-      <input
-        aria-invalid="false"
-        autocomplete="address-line1"
-        class="form-control"
-        id="address.address1"
-        label="Address 1"
-        name="address.address1"
-        placeholder="Address, Line 1"
-        type="text"
-        value=""
-      />
-    </div>
-    <div
-      class="form-group"
-    >
-      <label
-        class=""
-        for="address.address2"
-      >
-        Address 2
-      </label>
-      <div
-        id="address.address2-error-scroll-target"
-        style="display: none;"
-      />
-      <input
-        aria-invalid="false"
-        autocomplete="address-line2"
-        class="form-control"
-        id="address.address2"
-        label="Address 2"
-        name="address.address2"
-        placeholder="Address, Line 2"
-        type="text"
-        value=""
-      />
-    </div>
-    <div
-      class="form-group"
-    >
-      <label
-        class=""
-        for="address.city"
-      >
-        City
-      </label>
-      <div
-        id="address.city-error-scroll-target"
-        style="display: none;"
-      />
-      <input
-        aria-invalid="false"
-        autocomplete="address-level2"
-        class="form-control"
-        id="address.city"
-        label="City"
-        name="address.city"
-        placeholder="City"
-        type="text"
-        value=""
-      />
-    </div>
-    <div
-      class="row"
-    >
-      <div
-        class="col-8"
-      >
-        <div
-          class="form-group"
-        >
-          <label
-            class=""
-            for="address.state"
-          >
-            State
-          </label>
-          <div
-            id="address.state-error-scroll-target"
-            style="display: none;"
-          />
-          <div
-            class="react-select-input css-2b097c-container"
-            id="address.state"
-          >
-            <div
-              class=" css-150ye8w-control"
-            >
-              <div
-                class=" css-lbak6p-Component"
-              >
-                <div
-                  class=" css-1vk4ta-placeholder"
-                >
-                  State
-                </div>
-                <div
-                  class="css-lp83hw-Component"
-                >
-                  <div
-                    class=""
-                    style="display: inline-block;"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      autocapitalize="none"
-                      autocomplete="off"
-                      autocorrect="off"
-                      id="react-select-3-input"
-                      spellcheck="false"
-                      style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                      tabindex="0"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                    />
-                  </div>
-                </div>
-              </div>
-              <div
-                class=" css-ny0e4k-Component"
-              >
-                <span
-                  class=" css-1sl80az-indicatorSeparator"
-                />
-                <div
-                  aria-hidden="true"
-                  class=" css-augegj-indicatorContainer"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="css-7ezgaa-Component"
-                    focusable="false"
-                    height="20"
-                    viewBox="0 0 20 20"
-                    width="20"
-                  >
-                    <path
-                      d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                    />
-                  </svg>
-                </div>
-              </div>
-            </div>
-            <input
-              name="address.state"
-              type="hidden"
-              value=""
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        class="col-4"
-      >
-        <div
-          class="form-group"
-        >
-          <label
-            class=""
-            for="address.zipCode"
-          >
-            Zip
-          </label>
-          <div
-            id="address.zipcode-error-scroll-target"
-            style="display: none;"
-          />
-          <input
-            aria-invalid="false"
-            autocomplete="postal-code"
-            class="form-control"
-            id="address.zipCode"
-            label="Zip"
-            name="address.zipCode"
-            placeholder="Zip"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </form>
-</DocumentFragment>
-`;

package/src/AddressInput/index.js

@@ -1,3 +0,0 @@
-import AddressInput from './AddressInput';
-import UsStates from './UsStates';
-export { AddressInput as default, UsStates };

package/src/BoolInput/BoolInput.js

@@ -1,7 +0,0 @@
-import React from 'react';
-import boolOptions from './boolOptions';
-import FormInput from '../FormInput';
-
-export default function BoolInput(props) {
-  return <FormInput options={boolOptions} type="select" {...props} />;
-}

package/src/BoolInput/BoolInput.test.js

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

package/src/BoolInput/InlineBoolInput.js

@@ -1,7 +0,0 @@
-import React from 'react';
-import boolOptions from './boolOptions';
-import InlineFormInput from '../InlineFormInput';
-
-export default function InlineBoolInput(props) {
-  return <InlineFormInput options={boolOptions} type="select" {...props} />;
-}