envoc-form 2.0.1-1 → 2.0.1-13

package/src/DatePickerInput/DatePickerInput.test.js

@@ -1,74 +1,74 @@
-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();
-  });
-});
+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,131 +1,134 @@
-// 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; top: -9999px; left: -9999px;"
-          type="date"
-          value="2020-09-25"
-        />
-        <input
-          autocomplete="off"
-          class="react-date-picker__inputGroup__input react-date-picker__inputGroup__month"
-          data-input="true"
-          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"
-          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"
-          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>
-`;
+// 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 +1,42 @@
-@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);
-  }
-}
+@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 +1,3 @@
-import DatePickerInput from './DatePickerInput';
-
-export default DatePickerInput;
+import DatePickerInput from './DatePickerInput';
+
+export default DatePickerInput;

package/src/ErrorScrollTarget.js

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

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,24 @@
+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();
+  });
+});