envoc-form 3.2.0 → 4.0.1-1

package/src/FormGroupWrapper.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import { InputGroup } from 'reactstrap';
-import FormGroup from './FormGroup';
-import ErrorScrollTarget from './ErrorScrollTarget';
-
-export default function FormGroupWrapper({
-  prepend,
-  append,
-  Component,
-  helpText,
-  ...props
-}) {
-  const { meta } = props;
-  return (
-    <FormGroup meta={meta} helpText={helpText} {...props}>
-      <ErrorScrollTarget name={props.name} />
-      {prepend || append ? (
-        <InputGroup>
-          {prepend}
-          <Component {...props} />
-          {append}
-        </InputGroup>
-      ) : (
-        <Component {...props} />
-      )}
-    </FormGroup>
-  );
-}

package/src/FormInput/FormInput.js

@@ -1,145 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-import {
-  Input as BootstrapInput,
-  FormFeedback,
-  CustomInput,
-  FormText,
-  Alert,
-} from 'reactstrap';
-import lru from 'lru-cache';
-import PropTypes from 'prop-types';
-import TextareaAutosize from 'react-textarea-autosize';
-import { useAxiosRequest } from 'envoc-request';
-import FormGroupWrapper from '../FormGroupWrapper';
-import DatePickerInput from '../DatePickerInput';
-import ReactSelectField from '../ReactSelectField';
-import useStandardFormInput from '../useStandardFormInput';
-import { FileInput, DropzoneFileInput } from '../FileInput';
-
-export default function FormInput(props) {
-  const [input, meta] = useStandardFormInput(props);
-  const { className, hide } = props;
-  return (
-    <StandardFieldGroup
-      {...input}
-      className={classnames({ 'd-none': hide }, className)}
-      meta={meta}
-    />
-  );
-}
-
-FormInput.propTypes = {
-  id: PropTypes.string,
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  name: PropTypes.string.isRequired,
-  placeholder: PropTypes.string,
-  helpText: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-};
-
-function StandardFieldGroup(props) {
-  switch (props.type) {
-    case 'date':
-      return <FormGroupWrapper {...props} Component={DatePicker} />;
-    case 'select':
-      if (props.optionsUrl) {
-        return <FormGroupWrapper {...props} Component={RemoteSelect} />;
-      } else {
-        return <FormGroupWrapper {...props} Component={Select} />;
-      }
-    case 'checkbox':
-    case 'radio':
-      return Checkbox(props);
-    case 'file':
-      if (props.dropzone) {
-        return <FormGroupWrapper {...props} Component={DropzoneFileInput} />;
-      }
-      return <FormGroupWrapper {...props} Component={FileInput} />;
-    case 'textarea':
-      return <FormGroupWrapper {...props} Component={TextAreaInput} />;
-    default:
-      return <FormGroupWrapper {...props} Component={DefaultInput} />;
-  }
-}
-
-const TextAreaInput = ({ className, meta, helpText, ...props }) => {
-  return (
-    <TextareaAutosize
-      cacheMeasurements
-      className={classnames(
-        className,
-        'form-control',
-        meta.error ? 'is-invalid' : ''
-      )}
-      {...props}
-    />
-  );
-};
-
-const DefaultInput = ({ meta, ...props }) => {
-  return <BootstrapInput invalid={!!meta.error} {...props} />;
-};
-
-const Select = ({ includeEmptyOption = true, options, ...props }) => {
-  const allOptions =
-    includeEmptyOption && !props.isMulti
-      ? [{ label: ' ', value: null }, ...options]
-      : options;
-  return <ReactSelectField {...props} options={allOptions} />;
-};
-
-// low cache value just to prevent the same dropdown from hitting the API at the same time
-// TODO: global cache provider / "envoc-cache" instead of this static instance
-export const optionCache = new lru({ max: 500, maxAge: 1000 * 10 });
-const RemoteSelect = ({
-  optionsUrl,
-  includeEmptyOption = true,
-  includeOtherOption = false,
-  cache = optionCache,
-  maxAge = 1000 * 10,
-  ...props
-}) => {
-  const request = {
-    method: 'get',
-    url: optionsUrl,
-    cache: cache,
-    maxAge: maxAge,
-    autoExecute: true,
-  };
-  const webRequest = useAxiosRequest(request);
-  if (webRequest.error) {
-    return <Alert color="danger">An error occurred while loading.</Alert>;
-  }
-
-  const options = [];
-
-  if (webRequest.loading) {
-    options.push({ label: 'Loading...', value: '' });
-  } else {
-    if (includeEmptyOption && !props.isMulti) {
-      options.push({ label: ' ', value: null });
-    }
-    options.push(...webRequest.resp.data.result);
-    if (includeOtherOption) {
-      options.push({ label: 'Other', value: 'other' });
-    }
-  }
-
-  return <ReactSelectField {...props} options={options} />;
-};
-
-const DatePicker = ({ meta, ...props }) => {
-  return (
-    <DatePickerInput {...props} className={meta.error ? 'is-invalid' : ''} />
-  );
-};
-
-const Checkbox = ({ helpText, meta, ...props }) => {
-  return (
-    <React.Fragment>
-      <CustomInput {...props} />
-      {meta.error && <FormFeedback>{meta.error}</FormFeedback>}
-      {helpText && <FormText>{helpText}</FormText>}
-    </React.Fragment>
-  );
-};

package/src/FormInput/FormInput.test.js

@@ -1,66 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import { FormTestBase } from '../__Tests__';
-import FormInput from './FormInput';
-HTMLCanvasElement.prototype.getContext = () => {};
-
-describe('FormInput', () => {
-  it('renders without crashing', () => {
-    render(
-      <FormTestBase>
-        <FormInput name="test" />
-      </FormTestBase>
-    );
-  });
-
-  it('has matching datepicker snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        <FormInput
-          name="test"
-          minDate={new Date('9/23/2020')}
-          maxDate={new Date('09/23/2021')}
-          type="date"
-        />
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-
-  it('has matching textarea snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        <FormInput name="test" type="textarea" />
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-
-  it('has matching checkbox snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        <FormInput name="test" type="checkbox" />
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-
-  it('has matching file input snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        <FormInput name="test" type="file" />
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-
-  it('has matching select snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        <FormInput name="test" type="select" options={[]} />
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});

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;