envoc-form 5.0.3 → 5.0.6

package/src/Form/LegacyFormBasedPreventNavigation.tsx

@@ -1,77 +1,77 @@
-import type { History, Blocker, Transition } from 'history';
-import { useEffect } from 'react';
-// see: https://gist.github.com/rmorse/426ffcc579922a82749934826fa9f743
-import { Navigator as BaseNavigator } from 'react-router-dom';
-
-interface Navigator extends BaseNavigator {
-  block?: History['block'];
-}
-
-export interface FormBasedPreventNavigationProps {
-  promptMessage?: string;
-  preventNavigate: boolean;
-  navigator: Navigator;
-}
-/** Only use this if the project uses `<BrowserRouter/>` or any router that does not support the new
- * [react-router Data API](https://reactrouter.com/en/main/routers/picking-a-router#using-v64-data-apis)
- *
- * Legacy function to prevent the user from navigating away from a form if there are any changes.
- */
-export default function LegacyFormBasedPreventNavigation({
-  promptMessage = 'Changes you made may not be saved.',
-  preventNavigate,
-  navigator,
-}: FormBasedPreventNavigationProps) {
-  useEffect(() => {
-    if (!preventNavigate) {
-      return;
-    }
-    let unblock = () => {};
-    const push = navigator.push;
-
-    // TODO: https://reactrouter.com/docs/en/v6/upgrading/v5#prompt-is-not-currently-supported
-    // this is a workaround until we get native support for prompt on navigate
-    if (navigator.block) {
-      const blocker: Blocker = (tx) => {
-        if (window.confirm(promptMessage)) {
-          tx.retry();
-        }
-      };
-      unblock = navigator.block((tx: Transition) => {
-        const autoUnblockingTx = {
-          ...tx,
-          retry() {
-            // Automatically unblock the transition so it can play all the way
-            // through before retrying it. TODO: Figure out how to re-enable
-            // this block if the transition is cancelled for some reason.
-            unblock();
-            tx.retry();
-          },
-        };
-
-        blocker(autoUnblockingTx);
-      });
-    } else {
-      //https://gist.github.com/MarksCode/64e438c82b0b2a1161e01c88ca0d0355
-      navigator.push = (...args: Parameters<typeof push>) => {
-        if (window.confirm(promptMessage)) {
-          push(...args);
-        }
-      };
-    }
-
-    window.addEventListener('beforeunload', beforeUnload);
-    return () => {
-      unblock();
-      navigator.push = push;
-      window.removeEventListener('beforeunload', beforeUnload);
-    };
-
-    function beforeUnload(e: BeforeUnloadEvent) {
-      e.preventDefault();
-      e.returnValue = promptMessage;
-    }
-  }, [preventNavigate, promptMessage, navigator]);
-
-  return null;
-}
+import type { History, Blocker, Transition } from 'history';
+import { useEffect } from 'react';
+// see: https://gist.github.com/rmorse/426ffcc579922a82749934826fa9f743
+import { Navigator as BaseNavigator } from 'react-router-dom';
+
+interface Navigator extends BaseNavigator {
+  block?: History['block'];
+}
+
+export interface FormBasedPreventNavigationProps {
+  promptMessage?: string;
+  preventNavigate: boolean;
+  navigator: Navigator;
+}
+/** Only use this if the project uses `<BrowserRouter/>` or any router that does not support the new
+ * [react-router Data API](https://reactrouter.com/en/main/routers/picking-a-router#using-v64-data-apis)
+ *
+ * Legacy function to prevent the user from navigating away from a form if there are any changes.
+ */
+export default function LegacyFormBasedPreventNavigation({
+  promptMessage = 'Changes you made may not be saved.',
+  preventNavigate,
+  navigator,
+}: FormBasedPreventNavigationProps) {
+  useEffect(() => {
+    if (!preventNavigate) {
+      return;
+    }
+    let unblock = () => {};
+    const push = navigator.push;
+
+    // TODO: https://reactrouter.com/docs/en/v6/upgrading/v5#prompt-is-not-currently-supported
+    // this is a workaround until we get native support for prompt on navigate
+    if (navigator.block) {
+      const blocker: Blocker = (tx) => {
+        if (window.confirm(promptMessage)) {
+          tx.retry();
+        }
+      };
+      unblock = navigator.block((tx: Transition) => {
+        const autoUnblockingTx = {
+          ...tx,
+          retry() {
+            // Automatically unblock the transition so it can play all the way
+            // through before retrying it. TODO: Figure out how to re-enable
+            // this block if the transition is cancelled for some reason.
+            unblock();
+            tx.retry();
+          },
+        };
+
+        blocker(autoUnblockingTx);
+      });
+    } else {
+      //https://gist.github.com/MarksCode/64e438c82b0b2a1161e01c88ca0d0355
+      navigator.push = (...args: Parameters<typeof push>) => {
+        if (window.confirm(promptMessage)) {
+          push(...args);
+        }
+      };
+    }
+
+    window.addEventListener('beforeunload', beforeUnload);
+    return () => {
+      unblock();
+      navigator.push = push;
+      window.removeEventListener('beforeunload', beforeUnload);
+    };
+
+    function beforeUnload(e: BeforeUnloadEvent) {
+      e.preventDefault();
+      e.returnValue = promptMessage;
+    }
+  }, [preventNavigate, promptMessage, navigator]);
+
+  return null;
+}

package/src/Form/NewFormBasedPreventNavigation.tsx

@@ -1,59 +1,59 @@
-import type { History, Blocker, Transition } from 'history';
-import { useEffect } from 'react';
-import {
-  Navigator as BaseNavigator,
-  unstable_usePrompt as usePrompt,
-} from 'react-router-dom';
-
-interface Navigator extends BaseNavigator {
-  block?: History['block'];
-  location: Location;
-}
-
-interface FormBasedPreventNavigationProps {
-  promptMessage?: string;
-  preventNavigate: boolean;
-  navigator: Navigator;
-}
-
-/** Temporary function to allow backwards compatibility with routers that do not use the new Data API */
-export default function NewFormBasedPreventNavigation({
-  promptMessage = 'Changes you made may not be saved.',
-  preventNavigate,
-  navigator,
-}: FormBasedPreventNavigationProps) {
-  usePrompt({
-    when: preventNavigate,
-    message: promptMessage,
-  });
-
-  // TODO: Once react-router fully supports usePrompt and when we do not want to support routers
-  // that do not support the react-router Data API we can remove this.
-  useEffect(() => {
-    if (!preventNavigate) {
-      return;
-    }
-    let unblock = () => {};
-    const push = navigator.push;
-
-    navigator.push = (...args: Parameters<typeof push>) => {
-      if (window.confirm(promptMessage)) {
-        push(...args);
-      }
-    };
-
-    window.addEventListener('beforeunload', beforeUnload);
-    return () => {
-      unblock();
-      navigator.push = push;
-      window.removeEventListener('beforeunload', beforeUnload);
-    };
-
-    function beforeUnload(e: BeforeUnloadEvent) {
-      e.preventDefault();
-      e.returnValue = promptMessage;
-    }
-  }, [preventNavigate, promptMessage, navigator]);
-
-  return null;
-}
+import type { History, Blocker, Transition } from 'history';
+import { useEffect } from 'react';
+import {
+  Navigator as BaseNavigator,
+  unstable_usePrompt as usePrompt,
+} from 'react-router-dom';
+
+interface Navigator extends BaseNavigator {
+  block?: History['block'];
+  location: Location;
+}
+
+interface FormBasedPreventNavigationProps {
+  promptMessage?: string;
+  preventNavigate: boolean;
+  navigator: Navigator;
+}
+
+/** Temporary function to allow backwards compatibility with routers that do not use the new Data API */
+export default function NewFormBasedPreventNavigation({
+  promptMessage = 'Changes you made may not be saved.',
+  preventNavigate,
+  navigator,
+}: FormBasedPreventNavigationProps) {
+  usePrompt({
+    when: preventNavigate,
+    message: promptMessage,
+  });
+
+  // TODO: Once react-router fully supports usePrompt and when we do not want to support routers
+  // that do not support the react-router Data API we can remove this.
+  useEffect(() => {
+    if (!preventNavigate) {
+      return;
+    }
+    let unblock = () => {};
+    const push = navigator.push;
+
+    navigator.push = (...args: Parameters<typeof push>) => {
+      if (window.confirm(promptMessage)) {
+        push(...args);
+      }
+    };
+
+    window.addEventListener('beforeunload', beforeUnload);
+    return () => {
+      unblock();
+      navigator.push = push;
+      window.removeEventListener('beforeunload', beforeUnload);
+    };
+
+    function beforeUnload(e: BeforeUnloadEvent) {
+      e.preventDefault();
+      e.returnValue = promptMessage;
+    }
+  }, [preventNavigate, promptMessage, navigator]);
+
+  return null;
+}

package/src/Form/ServerErrorContext.ts

@@ -1,18 +1,18 @@
-import React from 'react';
-
-export interface ServerErrors {
-  [path: string]: string;
-}
-export interface ServerErrorContextProps {
-  errors: ServerErrors;
-  getError: (path: string) => string | undefined;
-  setError: (path: string, errorMessage: string | undefined) => void;
-}
-/** Context to store the API errors from the server for the form. */
-export const ServerErrorContext = React.createContext<ServerErrorContextProps>({
-  errors: {},
-  getError: (path: string) => {
-    return undefined;
-  },
-  setError: (path: string, errorMessage: string | undefined) => {},
-});
+import React from 'react';
+
+export interface ServerErrors {
+  [path: string]: string;
+}
+export interface ServerErrorContextProps {
+  errors: ServerErrors;
+  getError: (path: string) => string | undefined;
+  setError: (path: string, errorMessage: string | undefined) => void;
+}
+/** Context to store the API errors from the server for the form. */
+export const ServerErrorContext = React.createContext<ServerErrorContextProps>({
+  errors: {},
+  getError: (path: string) => {
+    return undefined;
+  },
+  setError: (path: string, errorMessage: string | undefined) => {},
+});

package/src/Form/__snapshots__/Form.test.tsx.snap

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FormTestBase has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-    class="envoc-form-form"
-  />
-</DocumentFragment>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FormTestBase has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+    class="envoc-form-form"
+  />
+</DocumentFragment>
+`;

package/src/FormActions.tsx

@@ -1,47 +1,47 @@
-import { FormDefaults } from './FormDefaults';
-import { useFormikContext } from 'formik';
-import SubmitFormButton from './SubmitFormButton';
-
-export interface FormActionsProps {
-  /** Allow the form to be submitted without any changes. By default this is not allowed. */
-  allowPristineSubmit?: boolean;
-  /** The cancel button's `onClick`.
-   * @defaultValue `window.history.back()`
-   */
-  handleCancel?: () => void;
-  /** Whether both buttons should be disabled. */
-  disabled?: boolean;
-}
-
-/** Standard cancel and submit buttons. */
-export default function FormActions({
-  allowPristineSubmit,
-  handleCancel,
-  disabled,
-}: FormActionsProps) {
-  const { isSubmitting } = useFormikContext();
-  return (
-    <>
-      <SubmitFormButton
-        className={FormDefaults.cssClassPrefix + 'form-actions'}
-        allowPristineSubmit={allowPristineSubmit}
-        disabled={disabled}
-      />
-      <button
-        type="button"
-        className={
-          FormDefaults.cssClassPrefix +
-          'form-actions ' +
-          FormDefaults.cssClassPrefix +
-          'cancel-form-button'
-        }
-        disabled={isSubmitting || disabled}
-        onClick={handleCancel || goBack}>
-        Cancel
-      </button>
-    </>
-  );
-  function goBack() {
-    window.history.back();
-  }
-}
+import { FormDefaults } from './FormDefaults';
+import { useFormikContext } from 'formik';
+import SubmitFormButton from './SubmitFormButton';
+
+export interface FormActionsProps {
+  /** Allow the form to be submitted without any changes. By default this is not allowed. */
+  allowPristineSubmit?: boolean;
+  /** The cancel button's `onClick`.
+   * @defaultValue `window.history.back()`
+   */
+  handleCancel?: () => void;
+  /** Whether both buttons should be disabled. */
+  disabled?: boolean;
+}
+
+/** Standard cancel and submit buttons. */
+export default function FormActions({
+  allowPristineSubmit,
+  handleCancel,
+  disabled,
+}: FormActionsProps) {
+  const { isSubmitting } = useFormikContext();
+  return (
+    <>
+      <SubmitFormButton
+        className={FormDefaults.cssClassPrefix + 'form-actions'}
+        allowPristineSubmit={allowPristineSubmit}
+        disabled={disabled}
+      />
+      <button
+        type="button"
+        className={
+          FormDefaults.cssClassPrefix +
+          'form-actions ' +
+          FormDefaults.cssClassPrefix +
+          'cancel-form-button'
+        }
+        disabled={isSubmitting || disabled}
+        onClick={handleCancel || goBack}>
+        Cancel
+      </button>
+    </>
+  );
+  function goBack() {
+    window.history.back();
+  }
+}

package/src/FormDefaults.ts

@@ -1,2 +1,2 @@
-/** `envoc-form-` CSS class prefix */
-export const FormDefaults = { cssClassPrefix: 'envoc-form-' };
+/** `envoc-form-` CSS class prefix */
+export const FormDefaults = { cssClassPrefix: 'envoc-form-' };

package/src/Group.tsx

@@ -1,62 +1,62 @@
-import classNames from 'classnames';
-import { FormDefaults } from './FormDefaults';
-import FieldErrorScrollTarget from './Field/FieldErrorScrollTarget';
-import { InjectedFieldProps } from './Field/InjectedFieldProps';
-
-export interface GroupProps extends InjectedFieldProps<any> {
-  /** Extra class names to apply. */
-  className?: string;
-
-  children: React.ReactNode;
-
-  /** Simple text label before the input. */
-  label?: string;
-
-  /** Simple helper text after the input. */
-  helpText?: string | React.ReactNode;
-
-  /** Whether the field should be disabled. */
-  disabled?: boolean;
-
-  required?: boolean;
-}
-
-/** Contains standard field bits like a label, helper text, error scroll target, validation message container, etc. */
-export default function Group({
-  className,
-  children,
-  label,
-  helpText,
-  meta,
-  input,
-  disabled,
-  required,
-}: GroupProps) {
-  return (
-    <div
-      className={classNames(className, FormDefaults.cssClassPrefix + 'group', {
-        [FormDefaults.cssClassPrefix + 'invalid']: meta.error,
-        [FormDefaults.cssClassPrefix + 'disabled']: disabled,
-        [FormDefaults.cssClassPrefix + 'required']: required,
-      })}>
-      <FieldErrorScrollTarget />
-      {meta.warning && (
-        <div className={FormDefaults.cssClassPrefix + 'warning'}>
-          {meta.warning}
-        </div>
-      )}
-      <label htmlFor={input.id}>{label}</label>
-      {children}
-      {meta.error && (
-        <div
-          id={`${input.id}-error`}
-          className={FormDefaults.cssClassPrefix + 'error'}>
-          {meta.error}
-        </div>
-      )}
-      {helpText && (
-        <div className={FormDefaults.cssClassPrefix + 'help'}>{helpText}</div>
-      )}
-    </div>
-  );
-}
+import { clsx } from 'clsx';
+import FieldErrorScrollTarget from './Field/FieldErrorScrollTarget';
+import { InjectedFieldProps } from './Field/InjectedFieldProps';
+import { FormDefaults } from './FormDefaults';
+
+export interface GroupProps extends InjectedFieldProps<any> {
+  /** Extra class names to apply. */
+  className?: string;
+
+  children: React.ReactNode;
+
+  /** Simple text label before the input. */
+  label?: string;
+
+  /** Simple helper text after the input. */
+  helpText?: string | React.ReactNode;
+
+  /** Whether the field should be disabled. */
+  disabled?: boolean;
+
+  required?: boolean;
+}
+
+/** Contains standard field bits like a label, helper text, error scroll target, validation message container, etc. */
+export default function Group({
+  className,
+  children,
+  label,
+  helpText,
+  meta,
+  input,
+  disabled,
+  required,
+}: GroupProps) {
+  return (
+    <div
+      className={clsx(className, FormDefaults.cssClassPrefix + 'group', {
+        [FormDefaults.cssClassPrefix + 'invalid']: meta.error,
+        [FormDefaults.cssClassPrefix + 'disabled']: disabled,
+        [FormDefaults.cssClassPrefix + 'required']: required,
+      })}>
+      <FieldErrorScrollTarget />
+      {meta.warning && (
+        <div className={FormDefaults.cssClassPrefix + 'warning'}>
+          {meta.warning}
+        </div>
+      )}
+      <label htmlFor={input.id}>{label}</label>
+      {children}
+      {meta.error && (
+        <div
+          id={`${input.id}-error`}
+          className={FormDefaults.cssClassPrefix + 'error'}>
+          {meta.error}
+        </div>
+      )}
+      {helpText && (
+        <div className={FormDefaults.cssClassPrefix + 'help'}>{helpText}</div>
+      )}
+    </div>
+  );
+}

package/src/Input/CheckboxGroup.tsx

@@ -0,0 +1,60 @@
+import { clsx } from 'clsx';
+import FieldErrorScrollTarget from '../Field/FieldErrorScrollTarget';
+import { FormDefaults } from '../FormDefaults';
+import { GroupProps } from '../Group';
+
+export interface CheckboxGroupProps extends GroupProps {
+  labelOnLeft?: boolean;
+}
+
+/** Contains standard field bits like a label, helper text, error scroll target, validation message container, etc. */
+export default function CheckboxGroup({
+  className,
+  children,
+  label,
+  helpText,
+  meta,
+  input,
+  disabled,
+  required,
+  labelOnLeft,
+}: CheckboxGroupProps) {
+  return (
+    <div
+      className={clsx(className, FormDefaults.cssClassPrefix + 'group', {
+        [FormDefaults.cssClassPrefix + 'invalid']: meta.error,
+        [FormDefaults.cssClassPrefix + 'disabled']: disabled,
+        [FormDefaults.cssClassPrefix + 'required']: required,
+      })}>
+      <FieldErrorScrollTarget />
+      {meta.warning && (
+        <div className={FormDefaults.cssClassPrefix + 'warning'}>
+          {meta.warning}
+        </div>
+      )}
+      <div className={FormDefaults.cssClassPrefix + 'checkbox-group-input'}>
+        {labelOnLeft ? (
+          <>
+            <label htmlFor={input.id}>{label}</label>
+            {children}
+          </>
+        ) : (
+          <>
+            {children}
+            <label htmlFor={input.id}>{label}</label>
+          </>
+        )}
+      </div>
+      {meta.error && (
+        <div
+          id={`${input.id}-error`}
+          className={FormDefaults.cssClassPrefix + 'error'}>
+          {meta.error}
+        </div>
+      )}
+      {helpText && (
+        <div className={FormDefaults.cssClassPrefix + 'help'}>{helpText}</div>
+      )}
+    </div>
+  );
+}