envoc-form 3.3.0 → 4.0.1-0

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

@@ -1,323 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FormInput has matching checkbox snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-  >
-    <div
-      class="custom-checkbox custom-control"
-    >
-      <input
-        class="custom-control-input"
-        id="test"
-        name="test"
-        type="checkbox"
-        value=""
-      />
-      <label
-        class="custom-control-label"
-        for="test"
-      />
-    </div>
-  </form>
-</DocumentFragment>
-`;
-
-exports[`FormInput has matching datepicker snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-  >
-    <div
-      class="form-group"
-    >
-      <div
-        id="test-error-scroll-target"
-        style="display: none;"
-      />
-      <div
-        class="react-date-picker react-date-picker--closed react-date-picker--enabled form-control"
-      >
-        <div
-          class="react-date-picker__wrapper"
-        >
-          <div
-            class="react-date-picker__inputGroup"
-          >
-            <input
-              max="2021-09-23"
-              min="2020-09-23"
-              name="test"
-              style="visibility: hidden; position: absolute; z-index: -999;"
-              type="date"
-              value=""
-            />
-            <input
-              autocomplete="off"
-              class="react-date-picker__inputGroup__input react-date-picker__inputGroup__month"
-              data-input="true"
-              inputmode="numeric"
-              max="12"
-              min="1"
-              name="month"
-              placeholder="--"
-              type="number"
-              value=""
-            />
-            <span
-              class="react-date-picker__inputGroup__divider"
-            >
-              /
-            </span>
-            <input
-              autocomplete="off"
-              class="react-date-picker__inputGroup__input react-date-picker__inputGroup__day"
-              data-input="true"
-              inputmode="numeric"
-              max="31"
-              min="1"
-              name="day"
-              placeholder="--"
-              type="number"
-              value=""
-            />
-            <span
-              class="react-date-picker__inputGroup__divider"
-            >
-              /
-            </span>
-            <input
-              autocomplete="off"
-              class="react-date-picker__inputGroup__input react-date-picker__inputGroup__year"
-              data-input="true"
-              inputmode="numeric"
-              max="2021"
-              min="2020"
-              name="year"
-              placeholder="----"
-              step="1"
-              type="number"
-              value=""
-            />
-          </div>
-          <button
-            class="react-date-picker__clear-button react-date-picker__button"
-            type="button"
-          >
-            <svg
-              class="react-date-picker__clear-button__icon react-date-picker__button__icon"
-              height="19"
-              stroke="black"
-              stroke-width="2"
-              viewBox="0 0 19 19"
-              width="19"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <line
-                x1="4"
-                x2="15"
-                y1="4"
-                y2="15"
-              />
-              <line
-                x1="15"
-                x2="4"
-                y1="4"
-                y2="15"
-              />
-            </svg>
-          </button>
-          <button
-            class="react-date-picker__calendar-button react-date-picker__button"
-            type="button"
-          >
-            <svg
-              class="react-date-picker__calendar-button__icon react-date-picker__button__icon"
-              height="19"
-              stroke="black"
-              stroke-width="2"
-              viewBox="0 0 19 19"
-              width="19"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <rect
-                fill="none"
-                height="15"
-                width="15"
-                x="2"
-                y="2"
-              />
-              <line
-                x1="6"
-                x2="6"
-                y1="0"
-                y2="4"
-              />
-              <line
-                x1="13"
-                x2="13"
-                y1="0"
-                y2="4"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-    </div>
-  </form>
-</DocumentFragment>
-`;
-
-exports[`FormInput has matching file input snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-  >
-    <div
-      class="form-group"
-    >
-      <div
-        id="test-error-scroll-target"
-        style="display: none;"
-      />
-      <div
-        class="custom-file file-input  "
-      >
-        <div>
-          <input
-            class="custom-file-input"
-            id="test"
-            meta="[object Object]"
-            name="test"
-            type="file"
-          />
-        </div>
-        <label
-          class="custom-file-label"
-        >
-          <div>
-            <span>
-              Choose A File...
-            </span>
-          </div>
-        </label>
-      </div>
-      <ul
-        class="list-group"
-      />
-    </div>
-  </form>
-</DocumentFragment>
-`;
-
-exports[`FormInput has matching select snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-  >
-    <div
-      class="form-group"
-    >
-      <div
-        id="test-error-scroll-target"
-        style="display: none;"
-      />
-      <div
-        class="react-select-input css-2b097c-container"
-        id="test"
-      >
-        <div
-          class=" css-150ye8w-control"
-        >
-          <div
-            class=" css-lbak6p-Component"
-          >
-            <div
-              class=" css-1vk4ta-placeholder"
-            >
-              Select...
-            </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-2-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="test"
-          type="hidden"
-          value=""
-        />
-      </div>
-    </div>
-  </form>
-</DocumentFragment>
-`;
-
-exports[`FormInput has matching textarea snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-  >
-    <div
-      class="form-group"
-    >
-      <div
-        id="test-error-scroll-target"
-        style="display: none;"
-      />
-      <textarea
-        class="form-control"
-        id="test"
-        name="test"
-        type="textarea"
-      />
-    </div>
-  </form>
-</DocumentFragment>
-`;

package/src/FormInput/form-input.scss

@@ -1,9 +0,0 @@
-.invalid-feedback {
-  display: block;
-}
-
-.form-group {
-  input[disabled] {
-    cursor: not-allowed;
-  }
-}

package/src/FormInput/index.js

@@ -1,2 +0,0 @@
-import FormInput from './FormInput';
-export default FormInput;

package/src/FormInputArray/FormInputArray.js

@@ -1,224 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { v4 as uuid } from 'uuid';
-import classnames from 'classnames';
-import { Col, Card, Button, CardBody, Row, Alert } from 'reactstrap';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
-import {faPlus, faTrash} from '@fortawesome/free-solid-svg-icons'
-import PropTypes from 'prop-types';
-import useStandardFormInput from '../useStandardFormInput';
-import NestedFormFieldContext from '../NestedFormFieldContext';
-import classNames from 'classnames';
-
-export default function FormInputArray({
-  id,
-  name,
-  label,
-  newItem,
-  component: Component,
-  prepend: Prepend,
-  disabled,
-  validate,
-  ...props
-}) {
-  const [inputProps, meta] = useStandardFormInput({
-    id,
-    name,
-    validate,
-    disabled,
-    ...props,
-  });
-  const inputPropsRef = useRef();
-  const [hasChangedLength, setHasChangedLength] = useState(false);
-  inputPropsRef.current = inputProps;
-  const values = inputProps.value || [];
-  const length = values.length;
-
-  useEffect(() => {
-    return () => {
-      setHasChangedLength(true);
-    };
-  }, [length, setHasChangedLength]);
-
-  useEffect(() => {
-    if (!hasChangedLength) {
-      return;
-    }
-    inputPropsRef.current.onBlur();
-  }, [length, hasChangedLength]);
-
-  return (
-    <Card className="field-array-card">
-      <CardActionHeader>
-        <CardActionHeader.Title>{label}</CardActionHeader.Title>
-        <CardActionHeader.Actions>
-          {!disabled && (
-            <Button
-              color="link"
-              onClick={addItem}
-              title="Add an additional item"
-              className="add-array-item">
-              <FontAwesomeIcon icon={faPlus} /> Add New
-            </Button>
-          )}
-        </CardActionHeader.Actions>
-      </CardActionHeader>
-      <CardBody>
-        {/* See: https://jaredpalmer.com/formik/docs/api/fieldarray#fieldarray-validation-gotchas */}
-        {meta.error && typeof meta.error === 'string' && (
-          <Row>
-            <Col>
-              <Alert className="field-array-alert" color="danger">
-                {meta.error}
-              </Alert>
-            </Col>
-          </Row>
-        )}
-        {Prepend && values.filter((x) => !x.isDeleted).length > 0 && (
-          <Row className={classnames('input-array-header')}>
-            <Prepend />
-            {!disabled && <div className="remove-array-item"></div>}
-          </Row>
-        )}
-        {values.map((value, index) => {
-          const itemName = `${inputProps.name}[${index}]`;
-          return (
-            <Row
-              key={
-                (value && value['form-input-array-key']) ||
-                (value && value['id']) ||
-                itemName
-              }
-              className={classnames('field-array-item', {
-                removed: value.isDeleted,
-              })}
-              role="listitem">
-              <NestedFormFieldContext.Provider value={itemName}>
-                <div className="component">
-                <Component
-                  value={value}
-                  name={itemName}
-                  disabled={disabled}
-                  {...props}
-                />
-                </div>
-              </NestedFormFieldContext.Provider>
-              {!disabled && (
-                <div className="remove-array-item">
-                  <Button
-                    color="link"
-                    onClick={() => removeItem(index)}
-                    title="Remove Item">
-                   <FontAwesomeIcon icon={faTrash} />
-                  </Button>
-                </div>
-              )}
-            </Row>
-          );
-        })}
-      </CardBody>
-    </Card>
-  );
-
-  function addItem() {
-    if (disabled) {
-      return;
-    }
-    const item = Object.assign({}, newItem, { 'form-input-array-key': uuid() });
-    const mapped = [...values, item];
-    inputProps.onChange(mapped);
-  }
-
-  function removeItem(index) {
-    if (disabled) {
-      return;
-    }
-    const itemToRemove = values[index];
-    // assumes anything from the server has an 'id' value sent
-    if (!itemToRemove.id) {
-      inputProps.onChange(values.filter((x) => x !== itemToRemove));
-      return;
-    }
-    const mapped = values.map((x) =>
-      x !== itemToRemove ? x : Object.assign({}, x, { isDeleted: true })
-    );
-    inputProps.onChange(mapped);
-  }
-}
-
-FormInputArray.Header = ({ className, ...props }) => {
-  return (
-    <FormInputArray.Column
-      className={classnames('mb-2', className)}
-      {...props}
-    />
-  );
-};
-
-FormInputArray.Column = ({ className, children, ...props }) => {
-  return (
-    <Col className={classnames('d-flex', className)} {...props}>
-      {children}
-    </Col>
-  );
-};
-
-FormInputArray.propTypes = {
-  name: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-
-  /**
-   * The component to use for each element of the array
-   **/
-  component: PropTypes.func.isRequired,
-
-  disabled: PropTypes.bool,
-
-  /**
-   * When 'Add Item' is used this object is passed as the default (so you can, as an example, give a default)
-   **/
-  newItem: PropTypes.object,
-
-  /**
-   * Affixes a 'header' above all rows so you can have a grid-like display
-   **/
-  prepend: PropTypes.func,
-
-  /**
-   * standard validator, BUT, will be passed the whole array to validate
-   **/
-  validate: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.func),
-    PropTypes.func,
-  ]),
-};
-
-function CardActionHeader({ children, className, ...props }) {
-  return (
-    <div
-      className={classnames(
-        'card-header card-action-header d-flex align-items-baseline',
-        className
-      )}
-      {...props}>
-      {children}
-    </div>
-  );
-}
-
-CardActionHeader.Title = function Title({ children, className, ...props }) {
-  return (
-    <strong className={classnames('mr-auto', className)} {...props}>
-      {children}
-    </strong>
-  );
-};
-
-CardActionHeader.Actions = function Actions({ children, className, ...props }) {
-  return (
-    <div
-      className={classnames('card-action-header-actions', className)}
-      {...props}>
-      {children}
-    </div>
-  );
-};

package/src/FormInputArray/FormInputArray.test.js

@@ -1,108 +0,0 @@
-import React from 'react';
-import { render, screen, waitFor, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { FormTestBase } from '../__Tests__';
-import FormInput from '../FormInput';
-import FormInputArray from './FormInputArray';
-
-describe('FormInputArray', () => {
-  it('renders without crashing', () => {
-    render(
-      <FormTestBase>
-        <FormInputArray
-          label="Names"
-          name="things"
-          component={FirstLastNameInput}
-        />
-      </FormTestBase>
-    );
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        <FormInputArray
-          label="Names"
-          name="things"
-          component={FirstLastNameInput}
-        />
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-
-  it('renders a simple two input array', async () => {
-    render(
-      <FormTestBase>
-        <FormInputArray
-          label="Names"
-          name="things"
-          component={FirstLastNameInput}
-        />
-      </FormTestBase>
-    );
-    const addButton = screen.getByText('Add New');
-    userEvent.click(addButton);
-    userEvent.click(addButton);
-    const firstNameElements = await screen.findAllByLabelText('First Name');
-    expect(firstNameElements).toHaveLength(2);
-  });
-
-  it('adds "removed" class to deleted items specified in initialValues', async () => {
-    const initialValues = {
-      things: [
-        {
-          id: 1,
-          firstName: 'John',
-          lastName: 'Doe',
-        },
-      ],
-    };
-
-    render(
-      <FormTestBase initialValues={initialValues}>
-        <FormInputArray
-          label="Names"
-          name="things"
-          component={FirstLastNameInput}
-        />
-      </FormTestBase>
-    );
-
-    const item = screen.getByRole(/listitem/i);
-    const deleteButton = within(item).getByTitle(/remove item/i);
-    expect(item).not.toHaveClass('removed');
-    userEvent.click(deleteButton);
-    expect(item).toHaveClass('removed');
-  });
-
-  it('removes deleted items not specified in initialValues', async () => {
-    render(
-      <FormTestBase>
-        <FormInputArray
-          label="Names"
-          name="things"
-          component={FirstLastNameInput}
-        />
-      </FormTestBase>
-    );
-
-    const addButton = screen.getByText(/add new/i);
-    userEvent.click(addButton);
-    const item = screen.getByRole(/listitem/i);
-    const deleteButton = within(item).getByTitle(/remove item/i);
-    userEvent.click(deleteButton);
-    await waitFor(() => {
-      expect(screen.queryByRole(/listitem/i)).not.toBeInTheDocument();
-    });
-  });
-});
-
-function FirstLastNameInput() {
-  return (
-    <>
-      <FormInput label="First Name" name="firstName" type="text" />
-      <FormInput label="Last Name" name="lastName" type="text" />
-    </>
-  );
-}