envoc-form 2.0.1-7 → 2.0.1

package/src/FileInput/DropzoneFileInput.js

@@ -1,59 +1,56 @@
-import './file-input.scss';
-import React, { useMemo } from 'react';
-import { useDropzone } from 'react-dropzone';
-import classNames from 'classnames';
-import DefaultFileList from './DefaultFileList';
-
-export default function DropzoneFileInput({
-  className,
-  onChange,
-  value,
-  accept,
-  disabled,
-  multiple,
-  FileList = DefaultFileList,
-  placeholder = "Drag 'n' drop some files here, or click to select files",
-  ...props
-}) {
-  const {
-    acceptedFiles,
-    fileRejections,
-    getRootProps,
-    getInputProps,
-    isDragAccept,
-    isDragReject,
-  } = useDropzone({ accept, onDrop, disabled: disabled });
-
-  function onDrop(acceptedFiles) {
-    if (acceptedFiles?.length) {
-      onChange(null);
-    } else if (multiple) {
-      onChange(acceptedFiles);
-    } else {
-      const target = acceptedFiles[0];
-      onChange(target);
-    }
-  }
-
-  const classNameProp = useMemo(
-    () =>
-      classNames('react-dropzone', {
-        accept: isDragAccept,
-        reject: isDragReject,
-        disabled: disabled,
-      }),
-    [isDragAccept, isDragReject, disabled]
-  );
-
-  return (
-    <section className={classNameProp}>
-      <div {...getRootProps()}>
-        <input {...props} {...getInputProps()} />
-        <>{placeholder}</>
-      </div>
-      <aside>
-        <FileList files={acceptedFiles} rejectedFiles={fileRejections} />
-      </aside>
-    </section>
-  );
-}
+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();
+  });
+});

package/src/FileInput/FileInput.js

@@ -1,49 +1,77 @@
-import React, { useEffect, useRef } from 'react';
-
-export default function FileInput({ className, onChange, value, ...props }) {
-  const inputRef = useRef();
-  useEffect(() => {
-    if (!value && inputRef.current) {
-      inputRef.current.value = null;
-    }
-  }, [value]);
-  return (
-    <div
-      className={`custom-file file-input ${className || ''} ${
-        props.disabled ? 'disabled' : ''
-      }`}>
-      <input
-        ref={inputRef}
-        type="file"
-        className="custom-file-input"
-        onChange={handleChange}
-        {...props}
-      />
-      <label className="custom-file-label">
-        {!value && <span>Choose A File...</span>}
-        {value && (
-          <span>
-            {value.name} - size: {humanFileSize(value.size)}
-          </span>
-        )}
-      </label>
-    </div>
-  );
-  function handleChange(e) {
-    if (e == null || !e.target || !e.target.files.length) {
-      onChange(null);
-    } else {
-      const target = e.target.files[0];
-      onChange(target);
-    }
-  }
-}
-
-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]
-  );
-}
+import React, { useEffect, useRef, useState } from 'react';
+import DefaultFileList from './DefaultFileList';
+
+export default function FileInput({
+  className,
+  onChange,
+  value,
+  multiple = false,
+  ...props
+}) {
+  const inputRef = useRef();
+  const [acceptedFiles, setAcceptedFiles] = useState([]);
+  useEffect(() => {
+    if (!value && inputRef.current) {
+      inputRef.current.value = null;
+    }
+  }, [value]);
+  return (
+    <>
+      <div
+        className={`custom-file file-input ${className || ''} ${
+          props.disabled ? 'disabled' : ''
+        }`}>
+        <div>
+          <input
+            ref={inputRef}
+            type="file"
+            className="custom-file-input"
+            onChange={handleChange}
+            multiple={multiple}
+            {...props}
+          />
+        </div>
+        <label className="custom-file-label">
+          <div>
+            {!value && <span>Choose A File...</span>}
+            {value &&
+              (!multiple ? (
+                <span>
+                  {value.name} - size: {humanFileSize(value.size)}
+                </span>
+              ) : value.length === 1 ? (
+                <span>
+                  {value[0].name} - size: {humanFileSize(value[0].size)}
+                </span>
+              ) : (
+                <span>Multiple files selected.</span>
+              ))}
+          </div>
+        </label>
+      </div>
+      <DefaultFileList files={acceptedFiles} />
+    </>
+  );
+  function handleChange(e) {
+    if (e == null || !e.target || !e.target.files.length) {
+      onChange(null);
+    } else {
+      const files = [...e.target.files];
+      setAcceptedFiles(files);
+      if (!multiple) {
+        onChange(files[0]);
+      } else {
+        onChange(files);
+      }
+    }
+  }
+}
+
+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/FileInput.test.js

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

package/src/FileInput/__snapshots__/DropzoneFileInput.test.js.snap

@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DropZoneFileInput Multiple file input has matching snapshot 1`] = `
+<DocumentFragment>
+  <section
+    class="react-dropzone"
+  >
+    <div
+      tabindex="0"
+    >
+      <input
+        autocomplete="off"
+        multiple=""
+        name="myFile"
+        style="display: none;"
+        tabindex="-1"
+        type="file"
+      />
+      Drag and drop some file(s) here, or click to select file(s)
+    </div>
+    <aside>
+      <ul
+        class="list-group"
+      />
+    </aside>
+  </section>
+</DocumentFragment>
+`;
+
+exports[`DropZoneFileInput has matching snapshot 1`] = `
+<DocumentFragment>
+  <section
+    class="react-dropzone"
+  >
+    <div
+      tabindex="0"
+    >
+      <input
+        autocomplete="off"
+        name="myFile"
+        style="display: none;"
+        tabindex="-1"
+        type="file"
+      />
+      Drag and drop some file(s) here, or click to select file(s)
+      <b>
+        Only one file accepted.
+      </b>
+    </div>
+    <aside>
+      <ul
+        class="list-group"
+      />
+    </aside>
+  </section>
+</DocumentFragment>
+`;

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

@@ -1,22 +1,58 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FileInput has matching snapshot 1`] = `
-<DocumentFragment>
-  <div
-    class="custom-file file-input  "
-  >
-    <input
-      class="custom-file-input"
-      name="myFile"
-      type="file"
-    />
-    <label
-      class="custom-file-label"
-    >
-      <span>
-        Choose A File...
-      </span>
-    </label>
-  </div>
-</DocumentFragment>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FileInput has matching snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="custom-file file-input  "
+  >
+    <div>
+      <input
+        class="custom-file-input"
+        name="myFile"
+        type="file"
+      />
+    </div>
+    <label
+      class="custom-file-label"
+    >
+      <div>
+        <span>
+          Choose A File...
+        </span>
+      </div>
+    </label>
+  </div>
+  <ul
+    class="list-group"
+  />
+</DocumentFragment>
+`;
+
+exports[`FileInput multiple files has matching snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="custom-file file-input  "
+  >
+    <div>
+      <input
+        class="custom-file-input"
+        multiple=""
+        name="myFile"
+        type="file"
+      />
+    </div>
+    <label
+      class="custom-file-label"
+    >
+      <div>
+        <span>
+          Choose A File...
+        </span>
+      </div>
+    </label>
+  </div>
+  <ul
+    class="list-group"
+  />
+</DocumentFragment>
+`;

package/src/FileInput/file-input.scss

@@ -1,17 +1,58 @@
-@import '../variables';
-
-.file-input {
-  &.is-invalid {
-    .custom-file-label {
-      border: 1px solid $red;
-    }
-  }
-}
-
-.custom-file-input:disabled ~ .custom-file-label {
-  background-color: $input-disabled-background-color;
-  border-color: $input-disabled-border-color;
-  &:after {
-    display: none !important;
-  }
-}
+@import '../variables';
+
+.file-input {
+  &.is-invalid {
+    .custom-file-label {
+      border: 1px solid $red;
+    }
+  }
+}
+
+.custom-file-input:disabled ~ .custom-file-label {
+  background-color: $input-disabled-background-color;
+  border-color: $input-disabled-border-color;
+  &:after {
+    display: none !important;
+  }
+}
+
+section.react-dropzone {
+  & > div {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    align-items: center;
+    border: 1px dashed #d8dbe0;
+    border-radius: 0.25rem;
+    background-color: white;
+    color: #8a93a2;
+    outline: none;
+    margin: 0;
+    padding: 20px;
+    transition: 'border .24s ease-in-out';
+    cursor: pointer;
+    &:focus,
+    &:focus-within {
+      border-color: #958bef;
+      box-shadow: 0 0 0 0.2rem rgba(50, 31, 219, 0.25);
+    }
+  }
+  &.active > div,
+  &.accept > div {
+    border-color: #958bef;
+    box-shadow: 0 0 0 0.2rem rgba(50, 31, 219, 0.25);
+  }
+  &.reject > div {
+    color: rgb(229, 83, 83);
+    border-color: rgb(229, 83, 83);
+    box-shadow: rgba(229, 83, 83, 0.25) 0px 0px 0px 3.2px;
+  }
+  &.disabled > div {
+    background-color: $input-disabled-background-color;
+    border-color: $input-disabled-border-color;
+    cursor: no-drop;
+  }
+  & > aside > .list-group:not(:empty) {
+    margin-top: 1rem;
+  }
+}

package/src/FileInput/index.js

@@ -1,4 +1,4 @@
-import FileInput from './FileInput';
-import DropzoneFileInput from './DropzoneFileInput';
-
-export { FileInput, DropzoneFileInput };
+import FileInput from './FileInput';
+import DropzoneFileInput from './DropzoneFileInput';
+
+export { FileInput, DropzoneFileInput };

package/src/Form/FocusError.js

@@ -1,48 +1,48 @@
-import { useEffect } from 'react';
-import { useFormikContext } from 'formik';
-import smoothscroll from 'smoothscroll-polyfill';
-
-export default function FocusError(props) {
-  const { errors, isSubmitting, isValidating } = useFormikContext();
-  smoothscroll.polyfill();
-  useEffect(() => {
-    if (!isSubmitting || isValidating) {
-      return;
-    }
-    //This block handles any front-end input validation errors
-    //e.g. required fields, max characters, etc
-    const keys = Object.keys(errors);
-    if (keys.length > 0) {
-      return scrollToErrorElement(keys);
-    }
-    //This block handles any input-specific server-side errors
-    //e.g. improper email formatting, invalid phone number, etc.
-    if (
-      props.serverErrors.errors &&
-      Object.values(props.serverErrors.errors).some((x) => !!x)
-    ) {
-      const names = Object.keys(props.serverErrors.errors);
-      return scrollToErrorElement(names);
-    }
-  }, [errors, isSubmitting, isValidating, props]);
-  return null;
-}
-
-const scrollToErrorElement = (keys) => {
-  let firstErrorElement = document.getElementById(
-    `${keys[0].toLowerCase()}-error-scroll-target`
-  );
-  if (firstErrorElement == null || firstErrorElement.parentNode == null) {
-    return;
-  }
-  firstErrorElement = firstErrorElement.parentNode;
-  const headerOffset = -110;
-  const y =
-    firstErrorElement.getBoundingClientRect().top +
-    window.pageYOffset +
-    headerOffset;
-  window.scrollTo({ top: y, behavior: 'smooth' });
-  setTimeout(() => {
-    firstErrorElement.focus();
-  }, 500);
-};
+import { useEffect } from 'react';
+import { useFormikContext } from 'formik';
+import smoothscroll from 'smoothscroll-polyfill';
+
+export default function FocusError(props) {
+  const { errors, isSubmitting, isValidating } = useFormikContext();
+  smoothscroll.polyfill();
+  useEffect(() => {
+    if (!isSubmitting || isValidating) {
+      return;
+    }
+    //This block handles any front-end input validation errors
+    //e.g. required fields, max characters, etc
+    const keys = Object.keys(errors);
+    if (keys.length > 0) {
+      return scrollToErrorElement(keys);
+    }
+    //This block handles any input-specific server-side errors
+    //e.g. improper email formatting, invalid phone number, etc.
+    if (
+      props.serverErrors.errors &&
+      Object.values(props.serverErrors.errors).some((x) => !!x)
+    ) {
+      const names = Object.keys(props.serverErrors.errors);
+      return scrollToErrorElement(names);
+    }
+  }, [errors, isSubmitting, isValidating, props]);
+  return null;
+}
+
+const scrollToErrorElement = (keys) => {
+  let firstErrorElement = document.getElementById(
+    `${keys[0].toLowerCase()}-error-scroll-target`
+  );
+  if (firstErrorElement == null || firstErrorElement.parentNode == null) {
+    return;
+  }
+  firstErrorElement = firstErrorElement.parentNode;
+  const headerOffset = -110;
+  const y =
+    firstErrorElement.getBoundingClientRect().top +
+    window.pageYOffset +
+    headerOffset;
+  window.scrollTo({ top: y, behavior: 'smooth' });
+  setTimeout(() => {
+    firstErrorElement.focus();
+  }, 500);
+};