envoc-form 5.0.3 → 5.0.6

package/src/File/FileGroup.test.tsx

@@ -1,35 +1,35 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { FileGroup } from '../';
-import FormTestBase from '../__Tests__/FormTestBase';
-
-describe('FileGroup', () => {
-  it('renders without crashing', () => {
-    render(
-      <FormTestBase>
-        {({ Field }) => (
-          <Field
-            name="profileImage"
-            Component={FileGroup}
-            label="Profile Image"
-          />
-        )}
-      </FormTestBase>
-    );
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        {({ Field }) => (
-          <Field
-            name="profileImage"
-            Component={FileGroup}
-            label="Profile Image"
-          />
-        )}
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});
+import React from 'react';
+import { render } from '@testing-library/react';
+import { FileGroup } from '../';
+import FormTestBase from '../__Tests__/FormTestBase';
+
+describe('FileGroup', () => {
+  it('renders without crashing', () => {
+    render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="profileImage"
+            Component={FileGroup}
+            label="Profile Image"
+          />
+        )}
+      </FormTestBase>
+    );
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="profileImage"
+            Component={FileGroup}
+            label="Profile Image"
+          />
+        )}
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});

package/src/File/FileGroup.tsx

@@ -1,85 +1,82 @@
-import React, { ComponentType, LegacyRef } from 'react';
-import classNames from 'classnames';
-import FileList from './FileList';
-import { InjectedFieldProps } from '../Field/InjectedFieldProps';
-import { FormDefaults } from '../FormDefaults';
-import Group, { GroupProps } from '../Group';
-
-export interface FileGroupProps
-  // note: file props are of type "any" with the current type generation
-  extends InjectedFieldProps<any | undefined | null>,
-    Omit<GroupProps, keyof InjectedFieldProps<any> | 'children'>,
-    Omit<
-      React.HTMLProps<HTMLInputElement>,
-      keyof InjectedFieldProps<any> | 'children' | 'className' | 'label'
-    > {
-  /** Allow multiple files to be uploaded. */
-  multiple?: boolean | undefined;
-}
-
-function FileGroup(
-  {
-    input,
-    meta,
-    label,
-    helpText,
-    className,
-    required,
-    disabled,
-    multiple,
-    ...rest
-  }: FileGroupProps,
-  ref: LegacyRef<HTMLInputElement>
-) {
-  return (
-    <Group
-      input={input}
-      meta={meta}
-      label={label}
-      helpText={helpText}
-      className={classNames(
-        className,
-        { [FormDefaults.cssClassPrefix + 'multiple']: multiple },
-        FormDefaults.cssClassPrefix + 'file-group'
-      )}
-      required={required}
-      disabled={disabled}>
-      <input
-        {...input}
-        {...rest}
-        multiple={multiple}
-        onChange={(e) => {
-          if (!e?.target?.files?.length) {
-            input.onChange(undefined);
-          } else {
-            const files: File[] = [];
-            for (let i = 0; i < e.target.files.length; i++) {
-              files.push(e.target.files[i]);
-            }
-            if (!multiple) {
-              input.onChange(files[0]);
-            } else {
-              input.onChange(files);
-            }
-          }
-        }}
-        value={undefined}
-        ref={ref}
-        type="file"
-        className={classNames(
-          className,
-          FormDefaults.cssClassPrefix + 'file-group'
-        )}
-      />
-      {/* Note: because input.value is any - due to how files are currently handled - type safeness isn't great here */}
-      <FileList files={input.value} />
-    </Group>
-  );
-}
-
-/** File upload input group.  */
-const FileGroupWithRef = React.forwardRef(
-  FileGroup
-) as ComponentType<FileGroupProps>;
-
-export default FileGroupWithRef;
+import React, { ComponentType, LegacyRef } from 'react';
+import { clsx } from 'clsx';
+import FileList from './FileList';
+import { InjectedFieldProps } from '../Field/InjectedFieldProps';
+import { FormDefaults } from '../FormDefaults';
+import Group, { GroupProps } from '../Group';
+
+export interface FileGroupProps
+  // note: file props are of type "any" with the current type generation
+  extends InjectedFieldProps<any | undefined | null>,
+    Omit<GroupProps, keyof InjectedFieldProps<any> | 'children'>,
+    Omit<
+      React.HTMLProps<HTMLInputElement>,
+      keyof InjectedFieldProps<any> | 'children' | 'className' | 'label'
+    > {
+  /** Allow multiple files to be uploaded. */
+  multiple?: boolean | undefined;
+}
+
+function FileGroup(
+  {
+    input,
+    meta,
+    label,
+    helpText,
+    className,
+    required,
+    disabled,
+    multiple,
+    ...rest
+  }: FileGroupProps,
+  ref: LegacyRef<HTMLInputElement>
+) {
+  return (
+    <Group
+      input={input}
+      meta={meta}
+      label={label}
+      helpText={helpText}
+      className={clsx(
+        className,
+        { [FormDefaults.cssClassPrefix + 'multiple']: multiple },
+        FormDefaults.cssClassPrefix + 'file-group'
+      )}
+      required={required}
+      disabled={disabled}>
+      <input
+        {...input}
+        {...rest}
+        multiple={multiple}
+        onChange={(e) => {
+          if (!e?.target?.files?.length) {
+            input.onChange(undefined);
+          } else {
+            const files: File[] = [];
+            for (let i = 0; i < e.target.files.length; i++) {
+              files.push(e.target.files[i]);
+            }
+            if (!multiple) {
+              input.onChange(files[0]);
+            } else {
+              input.onChange(files);
+            }
+          }
+        }}
+        value={undefined}
+        ref={ref}
+        type="file"
+        className={clsx(className, FormDefaults.cssClassPrefix + 'file-group')}
+      />
+      {/* Note: because input.value is any - due to how files are currently handled - type safeness isn't great here */}
+      <FileList files={input.value} />
+    </Group>
+  );
+}
+
+/** File upload input group.  */
+const FileGroupWithRef = React.forwardRef(
+  FileGroup
+) as ComponentType<FileGroupProps>;
+
+export default FileGroupWithRef;

package/src/File/FileList.tsx

@@ -1,21 +1,21 @@
-import { FormDefaults } from '../FormDefaults';
-
-export interface FileListProps {
-  files?: File | File[] | undefined | null;
-  rejectedFiles?: File | File[] | undefined | null;
-}
-export default function FileList({ files, rejectedFiles }: FileListProps) {
-  return (
-    <div className={FormDefaults.cssClassPrefix + 'file-list'}>
-      {!files ? null : Array.isArray(files) ? (
-        files.map((x, i) => <File file={x} key={i} />)
-      ) : (
-        <File file={files} />
-      )}
-    </div>
-  );
-}
-
-function File({ file }: { file: File }) {
-  return null;
-}
+import { FormDefaults } from '../FormDefaults';
+
+export interface FileListProps {
+  files?: File | File[] | undefined | null;
+  rejectedFiles?: File | File[] | undefined | null;
+}
+export default function FileList({ files, rejectedFiles }: FileListProps) {
+  return (
+    <div className={FormDefaults.cssClassPrefix + 'file-list'}>
+      {!files ? null : Array.isArray(files) ? (
+        files.map((x, i) => <File file={x} key={i} />)
+      ) : (
+        <File file={files} />
+      )}
+    </div>
+  );
+}
+
+function File({ file }: { file: File }) {
+  return null;
+}

package/src/File/__snapshots__/FileGroup.test.tsx.snap

@@ -1,34 +1,34 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FileGroup has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-    class="envoc-form-form"
-  >
-    <div
-      class="envoc-form-file-group envoc-form-group"
-    >
-      <div
-        id="profileimage-error-scroll-target"
-        style="display: none;"
-      />
-      <label
-        for="profileImage"
-      >
-        Profile Image
-      </label>
-      <input
-        class="envoc-form-file-group"
-        id="profileImage"
-        name="profileImage"
-        type="file"
-        value=""
-      />
-      <div
-        class="envoc-form-file-list"
-      />
-    </div>
-  </form>
-</DocumentFragment>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FileGroup has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+    class="envoc-form-form"
+  >
+    <div
+      class="envoc-form-file-group envoc-form-group"
+    >
+      <div
+        id="profileimage-error-scroll-target"
+        style="display: none;"
+      />
+      <label
+        for="profileImage"
+      >
+        Profile Image
+      </label>
+      <input
+        class="envoc-form-file-group"
+        id="profileImage"
+        name="profileImage"
+        type="file"
+        value=""
+      />
+      <div
+        class="envoc-form-file-list"
+      />
+    </div>
+  </form>
+</DocumentFragment>
+`;

package/src/File/humanFileSize.ts

@@ -1,8 +1,8 @@
-export function humanFileSize(size: number) {
-  const i = Math.floor(Math.log(size) / Math.log(1024));
-  return (
-    (size / Math.pow(1024, i)).toFixed(2) +
-    ' ' +
-    ['B', 'KB', 'MB', 'GB', 'TB'][i]
-  );
-}
+export function humanFileSize(size: number) {
+  const i = Math.floor(Math.log(size) / Math.log(1024));
+  return (
+    (size / Math.pow(1024, i)).toFixed(2) +
+    ' ' +
+    ['B', 'KB', 'MB', 'GB', 'TB'][i]
+  );
+}

package/src/Form/FocusError.tsx

@@ -1,55 +1,55 @@
-import { useEffect } from 'react';
-import { useFormikContext } from 'formik';
-import smoothscroll from 'smoothscroll-polyfill';
-import { ServerErrorContextProps } from './ServerErrorContext';
-
-export interface FocusErrorProps {
-  /** Validation errors that have been received from the server. */
-  serverErrors: ServerErrorContextProps;
-}
-
-/** Function to scroll to the field that has an error. */
-export default function FocusError(props: FocusErrorProps) {
-  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: string[]) => {
-  let firstErrorElement: HTMLElement | null = document.getElementById(
-    `${keys[0].toLowerCase()}-error-scroll-target`
-  );
-  if (!firstErrorElement || !firstErrorElement.parentNode) {
-    return;
-  }
-  firstErrorElement = firstErrorElement.parentNode as HTMLElement;
-  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';
+import { ServerErrorContextProps } from './ServerErrorContext';
+
+export interface FocusErrorProps {
+  /** Validation errors that have been received from the server. */
+  serverErrors: ServerErrorContextProps;
+}
+
+/** Function to scroll to the field that has an error. */
+export default function FocusError(props: FocusErrorProps) {
+  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: string[]) => {
+  let firstErrorElement: HTMLElement | null = document.getElementById(
+    `${keys[0].toLowerCase()}-error-scroll-target`
+  );
+  if (!firstErrorElement || !firstErrorElement.parentNode) {
+    return;
+  }
+  firstErrorElement = firstErrorElement.parentNode as HTMLElement;
+  const headerOffset = -110;
+  const y =
+    firstErrorElement.getBoundingClientRect().top +
+    window.pageYOffset +
+    headerOffset;
+  window.scrollTo({ top: y, behavior: 'smooth' });
+  setTimeout(() => {
+    firstErrorElement?.focus();
+  }, 500);
+};

package/src/Form/Form.test.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import FormTestBase from '../__Tests__/FormTestBase';
-
-describe('FormTestBase', () => {
-  it('renders without crashing', () => {
-    render(<FormTestBase>{() => <></>}</FormTestBase>);
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(<FormTestBase>{() => <></>}</FormTestBase>);
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});
+import React from 'react';
+import { render } from '@testing-library/react';
+import FormTestBase from '../__Tests__/FormTestBase';
+
+describe('FormTestBase', () => {
+  it('renders without crashing', () => {
+    render(<FormTestBase>{() => <></>}</FormTestBase>);
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(<FormTestBase>{() => <></>}</FormTestBase>);
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});