envoc-form 3.3.0 → 4.0.1-0

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

@@ -1,89 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BoolInput has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-  >
-    <div
-      class="form-group"
-    >
-      <div
-        id="yesno-error-scroll-target"
-        style="display: none;"
-      />
-      <div
-        class="react-select-input css-2b097c-container"
-        id="yesNo"
-      >
-        <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-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="yesNo"
-          type="hidden"
-          value=""
-        />
-      </div>
-    </div>
-  </form>
-</DocumentFragment>
-`;

package/src/BoolInput/boolOptions.js

@@ -1,6 +0,0 @@
-const boolOptions = [
-  { label: 'Yes', value: true },
-  { label: 'No', value: false },
-];
-
-export default boolOptions;

package/src/BoolInput/index.js

@@ -1,4 +0,0 @@
-import BoolInput from './BoolInput';
-import InlineBoolInput from './InlineBoolInput';
-
-export { BoolInput, InlineBoolInput };

package/src/ConfirmBaseForm/ConfirmBaseForm.js

@@ -1,37 +0,0 @@
-import React from 'react';
-import { Button } from 'reactstrap';
-import { useAxiosRequest } from 'envoc-request';
-
-export default function ConfirmBaseForm({
-  handleCancel,
-  request,
-  yesColor = 'danger',
-  style,
-  title,
-  ...props
-}) {
-  const webRequest = useAxiosRequest(
-    Object.assign({}, request, { autoExecute: false })
-  );
-  return (
-    <div style={{ textAlign: 'center', ...style }} {...props}>
-      <h3>{title}</h3>
-      <Button
-        color={yesColor}
-        onClick={webRequest.submitRequest}
-        disabled={webRequest.loading}>
-        Yes
-      </Button>
-      <Button
-        type="button"
-        color="link"
-        disabled={webRequest.loading}
-        onClick={handleCancel || goBack}>
-        Cancel
-      </Button>
-    </div>
-  );
-  function goBack() {
-    window.history.back();
-  }
-}

package/src/ConfirmBaseForm/ConfirmBaseForm.test.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import ConfirmBaseForm from './ConfirmBaseForm';
-
-describe('ConfirmBaseForm', () => {
-  it('Renders without error', () => {
-    render(<ConfirmBaseForm />);
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(<ConfirmBaseForm />);
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});

package/src/ConfirmBaseForm/index.js

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

package/src/ConfirmDeleteForm/ConfirmDeleteForm.js

@@ -1,39 +0,0 @@
-import React from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-import ConfirmBaseForm from '../ConfirmBaseForm';
-import { toast } from 'react-toastify';
-
-export default function ConfirmDeleteForm({
-  successUrl,
-  form,
-  children,
-  ...props
-}) {
-  const navigate = useNavigate();
-  const { entityId } = useParams();
-  const request = {
-    method: 'delete',
-    url: `/api/${form}/${entityId}`,
-    onComplete: () => {
-      toast.success('Deleted!');
-      goBack();
-    },
-  };
-  return (
-    <ConfirmBaseForm
-      request={request}
-      handleCancel={goBack}
-      title="Are you sure you want to delete this?"
-      {...props}>
-      {children}
-    </ConfirmBaseForm>
-  );
-
-  function goBack() {
-    if (successUrl) {
-      navigate(successUrl);
-    } else {
-      navigate(-1);
-    }
-  }
-}

package/src/ConfirmDeleteForm/index.js

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

package/src/DatePickerInput/DatePickerInput.js

@@ -1,49 +0,0 @@
-import React from 'react';
-import DatePicker from 'react-date-picker/dist/entry.nostyle';
-import parseISO from 'date-fns/parseISO';
-import classnames from 'classnames';
-
-const dateOnlyRegex = /^\d{4}-\d{2}-\d{2}$/;
-const defaultMaxDate = new Date('9999-12-31');
-
-export default class DatePickerInput extends React.Component {
-  render() {
-    const { value, className, maxDate = defaultMaxDate, ...rest } = this.props;
-
-    if (value && !dateOnlyRegex.test(value)) {
-      const errorMessage = `Invalid date only value of ${value} passed to DatePicker input. This input is only configured to handle dates in the format yyyy-mm-dd. Ensure that the server is configured to return date only values.`;
-      if (process.env.NODE_ENV !== 'production') {
-        //We should throw if 'value' is not 'yyyy-mm-dd' in dev
-        throw new Error(errorMessage);
-      } else {
-        console.error(errorMessage);
-      }
-    }
-
-    const parsedValue = value ? parseISO(value) : null;
-    return (
-      <DatePicker
-        className={classnames('form-control', className)}
-        onCalendarOpen={this.onCalendarOpen}
-        {...rest}
-        value={parsedValue}
-        onChange={this.handleChange}
-        onBlur={this.handleBlur}
-        maxDate={maxDate}
-      />
-    );
-  }
-  handleBlur = () => {
-    const { onBlur } = this.props;
-    onBlur();
-  };
-  handleChange = (e) => {
-    const { onChange } = this.props;
-    if (e == null) {
-      onChange(null);
-    } else {
-      // ensure ONLY the date is persisted - so UTC offset info / time is not persisted or sent
-      onChange(e.toISOString().split('T')[0]);
-    }
-  };
-}

package/src/DatePickerInput/DatePickerInput.test.js

@@ -1,74 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import DatePickerInput from './DatePickerInput';
-
-//hack so the datepicker internals don't complain about this not existing in the context of jest
-HTMLCanvasElement.prototype.getContext = () => {};
-
-//Tell console.error to be quiet about the errors so jest output isn't super noisy
-//https://github.com/facebook/jest/pull/5267#issuecomment-356605468
-beforeEach(() => {
-  jest.spyOn(console, 'error');
-  console.error.mockImplementation(() => {});
-});
-
-afterEach(() => {
-  console.error.mockRestore();
-});
-
-describe('DatePickerInput', () => {
-  it('Renders without error', () => {
-    render(
-      <DatePickerInput
-        minDate={new Date('9/23/2020')}
-        maxDate={new Date('09/23/2021')}
-      />
-    );
-  });
-
-  it('Throws when given an invalid format date', () => {
-    expect(() =>
-      render(
-        <DatePickerInput
-          minDate={new Date('9/23/2020')}
-          maxDate={new Date('09/23/2021')}
-          value="09/25/2020"
-        />
-      )
-    ).toThrow();
-  });
-
-  it('Throws when given a date with time included', () => {
-    expect(() =>
-      render(
-        <DatePickerInput
-          minDate={new Date('9/23/2020')}
-          maxDate={new Date('09/23/2021')}
-          value="2020-09-25T19:07:49.774Z"
-        />
-      )
-    ).toThrow();
-  });
-
-  it('Accepts valid date only format', () => {
-    render(
-      <DatePickerInput
-        minDate={new Date('9/23/2020')}
-        maxDate={new Date('09/23/2021')}
-        value="2020-09-25"
-      />
-    );
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <DatePickerInput
-        minDate={new Date('9/23/2020')}
-        maxDate={new Date('09/23/2021')}
-        value="2020-09-25"
-      />
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});

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

@@ -1,134 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DatePickerInput has matching snapshot 1`] = `
-<DocumentFragment>
-  <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="date"
-          style="visibility: hidden; position: absolute; z-index: -999;"
-          type="date"
-          value="2020-09-25"
-        />
-        <input
-          autocomplete="off"
-          class="react-date-picker__inputGroup__input react-date-picker__inputGroup__month"
-          data-input="true"
-          inputmode="numeric"
-          max="12"
-          min="9"
-          name="month"
-          placeholder="--"
-          type="number"
-          value="9"
-        />
-        <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="30"
-          min="23"
-          name="day"
-          placeholder="--"
-          type="number"
-          value="25"
-        />
-        <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="2020"
-        />
-      </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>
-</DocumentFragment>
-`;

package/src/DatePickerInput/date-picker-input.scss

@@ -1,42 +0,0 @@
-@import '../variables';
-
-.react-date-picker {
-  padding: 0;
-  &.react-date-picker--open {
-    border: 1px solid $input-border-color--focused;
-    box-shadow: $input-box-shadow--focused;
-  }
-  &.react-date-picker--disabled {
-    background-color: $input-disabled-background-color;
-    border-color: $input-disabled-border-color;
-  }
-
-  .react-date-picker__wrapper {
-    width: 100%;
-    border: none;
-  }
-
-  .react-date-picker__inputGroup {
-    width: 100%;
-    margin-left: 10px;
-  }
-
-  .is-invalid.react-date-picker {
-    border: 1px solid $red;
-  }
-
-  .react-date-picker__calendar {
-    z-index: 3;
-  }
-  .react-date-picker__inputGroup__input {
-    min-width: 18px;
-    text-align: center;
-    &.react-date-picker__inputGroup__year {
-      min-width: 40px;
-    }
-  }
-
-  .react-calendar__tile--now {
-    outline: 1px solid rgba(0, 0, 0, 0.5);
-  }
-}

package/src/DatePickerInput/index.js

@@ -1,3 +0,0 @@
-import DatePickerInput from './DatePickerInput';
-
-export default DatePickerInput;

package/src/ErrorScrollTarget.js

@@ -1,6 +0,0 @@
-import React from 'react';
-
-export default function ErrorScrollTarget(props) {
-  const divId = `${props.name.toLowerCase()}-error-scroll-target`;
-  return <div id={divId} style={{ display: 'none' }} />;
-}

package/src/FileInput/DefaultFileList.js

@@ -1,39 +0,0 @@
-import React from 'react';
-import { ListGroupItem, ListGroup } from 'reactstrap';
-
-export default function DefaultFileList({ files, rejectedFiles = [] }) {
-  return (
-    <ListGroup>
-      {files.map((file) => (
-        <Group key={file.path} item={file} warning={false} />
-      ))}
-      {rejectedFiles.map(({ file }) => {
-        return <Group key={file.path} item={file} warning={true} />;
-      })}
-    </ListGroup>
-  );
-}
-
-function Group({ item, warning }) {
-  return (
-    <ListGroupItem
-      color={`d-flex ${
-        warning ? 'warning' : 'success'
-      }  justify-content-between list-group-item ${
-        warning ? 'list-group-item-warning' : 'list-group-item-success'
-      } px-3 py-1 rounded-1`}>
-      <span className="d-flex justify-content-between w-100">
-        <span>{item.name}</span> <span>{humanFileSize(item.size)}</span>
-      </span>
-    </ListGroupItem>
-  );
-}
-
-function humanFileSize(size) {
-  const i = Math.floor(Math.log(size) / Math.log(1024));
-  return (
-    (size / Math.pow(1024, i)).toFixed(2) * 1 +
-    ' ' +
-    ['B', 'KB', 'MB', 'GB', 'TB'][i]
-  );
-}

package/src/FileInput/DropzoneFileInput.js

@@ -1,56 +0,0 @@
-import React from 'react';
-import { useDropzone } from 'react-dropzone';
-import classNames from 'classnames';
-import DefaultFileList from './DefaultFileList';
-
-export default function DropzoneFileInput({
-  className: classNameProp,
-  onChange,
-  value,
-  accept,
-  disabled,
-  multiple = false,
-  FileList = DefaultFileList,
-  placeholder = 'Drag and drop some file(s) here, or click to select file(s)',
-  dropzone,
-  ...props
-}) {
-  const {
-    acceptedFiles = (acceptedFiles = acceptedFiles[0]),
-    fileRejections = fileRejections.push(
-      acceptedFiles.slice(1, acceptedFiles.length)
-    ),
-    getRootProps,
-    getInputProps,
-    isDragAccept,
-    isDragReject,
-  } = useDropzone({ accept, onDrop, disabled: disabled, multiple: multiple });
-
-  function onDrop(acceptedFiles) {
-    if (!acceptedFiles?.length > 1 && !multiple) {
-      onChange(null);
-    } else {
-      onChange(acceptedFiles);
-    }
-  }
-
-  const className = classNames('react-dropzone', classNameProp, {
-    accept: isDragAccept,
-    reject: isDragReject,
-    disabled: disabled,
-  });
-
-  return (
-    <section className={className}>
-      <div {...getRootProps()}>
-        <input {...props} {...getInputProps()} />
-        <>{placeholder}</>
-        {!multiple && <b>{`Only one file accepted.`}</b>}
-        {accept && <b>{`Files of type "${accept}" accepted`}</b>}
-      </div>
-      <aside>
-        <FileList files={acceptedFiles} rejectedFiles={fileRejections} />
-      </aside>
-    </section>
-  );
-}

package/src/FileInput/DropzoneFileInput.test.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import DropzoneFileInput from './DropzoneFileInput';
-
-describe('DropZoneFileInput', () => {
-  it('Renders without error', () => {
-    render(<DropzoneFileInput name="myFile" />);
-  });
-
-  it('Renders multiple file without error', () => {
-    render(<DropzoneFileInput name="myFile" multiple />);
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(<DropzoneFileInput name="myFile" />);
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-
-  it('Multiple file input has matching snapshot', () => {
-    const renderResult = render(<DropzoneFileInput name="myFile" multiple />);
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});