envoc-form 5.0.3 → 5.0.6

package/src/ConfirmDeleteForm/ConfirmDeleteForm.tsx

@@ -1,87 +1,87 @@
-import React from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-import { toast } from 'react-toastify';
-import { useAxiosRequestProps } from 'envoc-request';
-import ConfirmBaseForm, {
-  ConfirmBaseFormProps,
-} from '../ConfirmBaseForm/ConfirmBaseForm';
-import { FormDefaults } from '../FormDefaults';
-
-export interface ConfirmDeleteFormProps
-  extends Pick<ConfirmBaseFormProps, 'style'> {
-  /** Url to navigate to on success. */
-  successUrl?: string;
-  /** Form name (key) to apply the confirmation on. */
-  form: string;
-  /** Custom message to display.
-   * @defaultValue `Are you sure you want to delete this?`
-   */
-  title?: string;
-  /** Custom function when the axios request succeeds. */
-  handleComplete?: Function;
-  /** Custom function when the axios request fails. */
-  handleError?: Function;
-  /** Any components to be rendered in between the title and the buttons. */
-  children?: React.ReactNode;
-}
-
-/**
- * Deletion confirmation. Navigates to a different route to allow the user to either confirm or cancel an action.
- *
- * Wraps `<ConfirmBaseForm/>`.
- */
-export default function ConfirmDeleteForm({
-  successUrl,
-  form,
-  title,
-  handleComplete,
-  handleError,
-  children,
-  ...props
-}: ConfirmDeleteFormProps) {
-  const navigate = useNavigate();
-  const { entityId } = useParams();
-  const onComplete =
-    handleComplete ??
-    function () {
-      toast.success('Deleted!');
-      goBack();
-    };
-  const onError =
-    handleError ??
-    function (error: any) {
-      toast.error(
-        error.response?.data?.validationFailures[0]?.errorMessage ??
-          'Something went wrong talking to the portal. Contact support if this continues.'
-      );
-    };
-
-  const request = {
-    method: 'delete',
-    url: `/api/${form}/${entityId}`,
-    onComplete: onComplete,
-    onError: onError,
-  } as useAxiosRequestProps;
-
-  return (
-    <ConfirmBaseForm
-      request={request}
-      handleCancel={goBack}
-      title={title ?? 'Are you sure you want to delete this?'}
-      confirmButtonText="Yes"
-      confirmButtonClass={
-        FormDefaults.cssClassPrefix + 'confirm-delete-form-yes-button'
-      }
-      {...props}>
-      {children}
-    </ConfirmBaseForm>
-  );
-
-  function goBack() {
-    if (successUrl) {
-      navigate(successUrl);
-    } else {
-      navigate(-1);
-    }
-  }
-}
+import React from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import { useAxiosRequestProps } from 'envoc-request';
+import ConfirmBaseForm, {
+  ConfirmBaseFormProps,
+} from '../ConfirmBaseForm/ConfirmBaseForm';
+import { FormDefaults } from '../FormDefaults';
+
+export interface ConfirmDeleteFormProps
+  extends Pick<ConfirmBaseFormProps, 'style'> {
+  /** Url to navigate to on success. */
+  successUrl?: string;
+  /** Form name (key) to apply the confirmation on. */
+  form: string;
+  /** Custom message to display.
+   * @defaultValue `Are you sure you want to delete this?`
+   */
+  title?: string;
+  /** Custom function when the axios request succeeds. */
+  handleComplete?: Function;
+  /** Custom function when the axios request fails. */
+  handleError?: Function;
+  /** Any components to be rendered in between the title and the buttons. */
+  children?: React.ReactNode;
+}
+
+/**
+ * Deletion confirmation. Navigates to a different route to allow the user to either confirm or cancel an action.
+ *
+ * Wraps `<ConfirmBaseForm/>`.
+ */
+export default function ConfirmDeleteForm({
+  successUrl,
+  form,
+  title,
+  handleComplete,
+  handleError,
+  children,
+  ...props
+}: ConfirmDeleteFormProps) {
+  const navigate = useNavigate();
+  const { entityId } = useParams();
+  const onComplete =
+    handleComplete ??
+    function () {
+      toast.success('Deleted!');
+      goBack();
+    };
+  const onError =
+    handleError ??
+    function (error: any) {
+      toast.error(
+        error.response?.data?.validationFailures[0]?.errorMessage ??
+          'Something went wrong talking to the portal. Contact support if this continues.'
+      );
+    };
+
+  const request = {
+    method: 'delete',
+    url: `/api/${form}/${entityId}`,
+    onComplete: onComplete,
+    onError: onError,
+  } as useAxiosRequestProps;
+
+  return (
+    <ConfirmBaseForm
+      request={request}
+      handleCancel={goBack}
+      title={title ?? 'Are you sure you want to delete this?'}
+      confirmButtonText="Yes"
+      confirmButtonClass={
+        FormDefaults.cssClassPrefix + 'confirm-delete-form-yes-button'
+      }
+      {...props}>
+      {children}
+    </ConfirmBaseForm>
+  );
+
+  function goBack() {
+    if (successUrl) {
+      navigate(successUrl);
+    } else {
+      navigate(-1);
+    }
+  }
+}

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

@@ -1,25 +1,25 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ConfirmDeleteForm has matching snapshot 1`] = `
-<DocumentFragment>
-  <div
-    style="text-align: center;"
-  >
-    <h3>
-      Are you sure you want to delete this?
-    </h3>
-    <button
-      class="envoc-form-confirm-delete-form-yes-button"
-      type="button"
-    >
-      Yes
-    </button>
-    <button
-      class="envoc-form-confirm-base-form-cancel-button"
-      type="button"
-    >
-      Cancel
-    </button>
-  </div>
-</DocumentFragment>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ConfirmDeleteForm has matching snapshot 1`] = `
+<DocumentFragment>
+  <div
+    style="text-align: center;"
+  >
+    <h3>
+      Are you sure you want to delete this?
+    </h3>
+    <button
+      class="envoc-form-confirm-delete-form-yes-button"
+      type="button"
+    >
+      Yes
+    </button>
+    <button
+      class="envoc-form-confirm-base-form-cancel-button"
+      type="button"
+    >
+      Cancel
+    </button>
+  </div>
+</DocumentFragment>
+`;

package/src/DatePicker/DatePicker.test.tsx

@@ -1,48 +1,48 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import StringDatePickerGroup from './StringDatePickerGroup';
-import FormTestBase from '../__Tests__/FormTestBase';
-
-//hack so the datepicker internals don't complain about this not existing in the context of jest
-HTMLCanvasElement.prototype.getContext = () => null;
-
-describe('IconInputGroup', () => {
-  it('renders without crashing', () => {
-    render(
-      <FormTestBase>
-        {({ Field }) => (
-          <Field
-            name="favoriteDate"
-            Component={StringDatePickerGroup}
-            label="Favorite Date"
-            monthPlaceholder="mm"
-            dayPlaceholder="dd"
-            yearPlaceholder="yyyy"
-            maxDate={new Date('9/23/2023')}
-            minDate={new Date('6/22/2022')}
-          />
-        )}
-      </FormTestBase>
-    );
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        {({ Field }) => (
-          <Field
-            name="favoriteDate"
-            Component={StringDatePickerGroup}
-            label="Favorite Date"
-            monthPlaceholder="mm"
-            dayPlaceholder="dd"
-            yearPlaceholder="yyyy"
-            maxDate={new Date('9/23/2023')}
-            minDate={new Date('6/22/2022')}
-          />
-        )}
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});
+import React from 'react';
+import { render } from '@testing-library/react';
+import StringDatePickerGroup from './StringDatePickerGroup';
+import FormTestBase from '../__Tests__/FormTestBase';
+
+//hack so the datepicker internals don't complain about this not existing in the context of jest
+HTMLCanvasElement.prototype.getContext = () => null;
+
+describe('IconInputGroup', () => {
+  it('renders without crashing', () => {
+    render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="favoriteDate"
+            Component={StringDatePickerGroup}
+            label="Favorite Date"
+            monthPlaceholder="mm"
+            dayPlaceholder="dd"
+            yearPlaceholder="yyyy"
+            maxDate={new Date('9/23/2023')}
+            minDate={new Date('6/22/2022')}
+          />
+        )}
+      </FormTestBase>
+    );
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="favoriteDate"
+            Component={StringDatePickerGroup}
+            label="Favorite Date"
+            monthPlaceholder="mm"
+            dayPlaceholder="dd"
+            yearPlaceholder="yyyy"
+            maxDate={new Date('9/23/2023')}
+            minDate={new Date('6/22/2022')}
+          />
+        )}
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});

package/src/DatePicker/DatePickerGroup.tsx

@@ -1,115 +1,109 @@
-import { useEffect, useState } from 'react';
-import DatePicker, {
-  DatePickerProps,
-} from 'react-date-picker/dist/entry.nostyle';
-import classnames from 'classnames';
-import parseISO from 'date-fns/parseISO';
-import { InjectedFieldProps } from '../Field/InjectedFieldProps';
-import { FormDefaults } from '../FormDefaults';
-import Group, { GroupProps } from '../Group';
-
-export interface DatePickerGroupProps<T>
-  extends InjectedFieldProps<T | undefined | null>,
-    Omit<
-      DatePickerProps,
-      keyof InjectedFieldProps<T> | 'name' | 'value' | 'className'
-    >,
-    Omit<GroupProps, keyof InjectedFieldProps<T> | 'children'> {
-  convert: (arg: Date) => T;
-}
-
-/**
- * Field for inputting dates. Uses `<Group/>` and `<DatePicker/>`.
- *
- * Uses [react-date-picker](https://www.npmjs.com/package/react-date-picker)
- */
-export default function DatePickerGroup<T>({
-  input,
-  meta,
-  label,
-  helpText,
-  className,
-  required,
-  disabled,
-  convert,
-  ...rest
-}: DatePickerGroupProps<T>) {
-  const [displayDate, setDisplayDate] = useState<Date | null>(null);
-
-  useEffect(() => {
-    if (!input.value) {
-      setDisplayDate(null);
-    } else if (typeof input.value === 'string') {
-      if (input.value.indexOf('T') === -1) {
-        setDisplayDate(new Date(`${input.value}T00:00:00.000`));
-      } else {
-        setDisplayDate(new Date(input.value));
-      }
-    }
-  }, [setDisplayDate, input.value]);
-
-  return (
-    <Group
-      input={input}
-      meta={meta}
-      label={label}
-      helpText={helpText}
-      className={classnames(
-        className,
-        FormDefaults.cssClassPrefix + 'date-picker'
-      )}
-      required={required}
-      disabled={disabled}>
-      <DatePicker
-        {...rest}
-        className={classnames(
-          FormDefaults.cssClassPrefix + 'date-picker',
-          className
-        )}
-        value={displayDate}
-        onChange={handleChange}
-      />
-    </Group>
-  );
-
-  function handleChange(e: Date | Date[] | string | undefined) {
-    const { onChange } = input;
-    if (onChange === null) {
-      return;
-    }
-
-    if (!e) {
-      onChange(undefined);
-      setDisplayDate(null);
-      return;
-    } else if (typeof e === 'string') {
-      const parsedValue = parseISO(e.toString().split('T')[0]);
-      setDisplayDate(parsedValue);
-      onChange(convert(parsedValue));
-    } else if (e instanceof Date) {
-      const parsedValue = parseISO(
-        convertToTimeZoneInsensitiveISOString(e).split('T')[0]
-      );
-      setDisplayDate(parsedValue);
-      onChange(convert(parsedValue));
-    } else {
-      // e is instanceof Date[]
-      const parsedValue = parseISO(
-        convertToTimeZoneInsensitiveISOString(e[0]).split('T')[0]
-      );
-      setDisplayDate(parsedValue);
-      onChange(convert(parsedValue));
-    }
-  }
-}
-
-export function convertToTimeZoneInsensitiveISOString(date: Date): string {
-  const year = new Intl.DateTimeFormat('en', { year: 'numeric' })
-    .format(date)
-    .padStart(4, '0');
-  const month = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(
-    date
-  );
-  const day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(date);
-  return `${year}-${month}-${day}T00:00:00.000Z`;
-}
+import { useEffect, useState } from 'react';
+import DatePicker, {
+  DatePickerProps,
+} from 'react-date-picker/dist/entry.nostyle';
+import { clsx } from 'clsx';
+import parseISO from 'date-fns/parseISO';
+import { InjectedFieldProps } from '../Field/InjectedFieldProps';
+import { FormDefaults } from '../FormDefaults';
+import Group, { GroupProps } from '../Group';
+
+export interface DatePickerGroupProps<T>
+  extends InjectedFieldProps<T | undefined | null>,
+    Omit<
+      DatePickerProps,
+      keyof InjectedFieldProps<T> | 'name' | 'value' | 'className'
+    >,
+    Omit<GroupProps, keyof InjectedFieldProps<T> | 'children'> {
+  convert: (arg: Date) => T;
+}
+
+/**
+ * Field for inputting dates. Uses `<Group/>` and `<DatePicker/>`.
+ *
+ * Uses [react-date-picker](https://www.npmjs.com/package/react-date-picker)
+ */
+export default function DatePickerGroup<T>({
+  input,
+  meta,
+  label,
+  helpText,
+  className,
+  required,
+  disabled,
+  convert,
+  ...rest
+}: DatePickerGroupProps<T>) {
+  const [displayDate, setDisplayDate] = useState<Date | null>(null);
+
+  useEffect(() => {
+    if (!input.value) {
+      setDisplayDate(null);
+    } else if (typeof input.value === 'string') {
+      if (input.value.indexOf('T') === -1) {
+        setDisplayDate(new Date(`${input.value}T00:00:00.000`));
+      } else {
+        setDisplayDate(new Date(input.value));
+      }
+    }
+  }, [setDisplayDate, input.value]);
+
+  return (
+    <Group
+      input={input}
+      meta={meta}
+      label={label}
+      helpText={helpText}
+      className={clsx(className, FormDefaults.cssClassPrefix + 'date-picker')}
+      required={required}
+      disabled={disabled}>
+      <DatePicker
+        {...rest}
+        className={clsx(FormDefaults.cssClassPrefix + 'date-picker', className)}
+        value={displayDate}
+        onChange={handleChange}
+      />
+    </Group>
+  );
+
+  function handleChange(e: Date | Date[] | string | undefined) {
+    const { onChange } = input;
+    if (onChange === null) {
+      return;
+    }
+
+    if (!e) {
+      onChange(undefined);
+      setDisplayDate(null);
+      return;
+    } else if (typeof e === 'string') {
+      const parsedValue = parseISO(e.toString().split('T')[0]);
+      setDisplayDate(parsedValue);
+      onChange(convert(parsedValue));
+    } else if (e instanceof Date) {
+      const parsedValue = parseISO(
+        convertToTimeZoneInsensitiveISOString(e).split('T')[0]
+      );
+      setDisplayDate(parsedValue);
+      onChange(convert(parsedValue));
+    } else {
+      // e is instanceof Date[]
+      const parsedValue = parseISO(
+        convertToTimeZoneInsensitiveISOString(e[0]).split('T')[0]
+      );
+      setDisplayDate(parsedValue);
+      onChange(convert(parsedValue));
+    }
+  }
+}
+
+export function convertToTimeZoneInsensitiveISOString(date: Date): string {
+  const year = new Intl.DateTimeFormat('en', { year: 'numeric' })
+    .format(date)
+    .padStart(4, '0');
+  const month = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(
+    date
+  );
+  const day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(date);
+  return `${year}-${month}-${day}T00:00:00.000Z`;
+}

package/src/DatePicker/DatePickerHelper.ts

@@ -1,4 +1,4 @@
-import { DatePickerGroupProps } from './DatePickerGroup';
-
-export interface DatePickerHelper<T>
-  extends Omit<DatePickerGroupProps<T>, 'convert'> {}
+import { DatePickerGroupProps } from './DatePickerGroup';
+
+export interface DatePickerHelper<T>
+  extends Omit<DatePickerGroupProps<T>, 'convert'> {}

package/src/DatePicker/StringDateOnlyPickerGroup.tsx

@@ -1,28 +1,28 @@
-import DatePickerGroup from './DatePickerGroup';
-import { DatePickerHelper } from './DatePickerHelper';
-
-export interface StringDateOnlyPickerGroupProps
-  extends DatePickerHelper<string | undefined | null> {}
-
-/**
- * Date picker input that consumes and outputs as a date only string in ISO format `YYYY-MM-DD`.
- *
- * Default display to the user is in `MM/DD/YYYY` format.
- */
-export default function StringDatePickerGroup(
-  props: StringDateOnlyPickerGroupProps
-) {
-  return <DatePickerGroup {...props} convert={convertToDateOnly} />;
-}
-
-function convertToDateOnly(arg: Date) {
-  const year = new Intl.DateTimeFormat('en', { year: 'numeric' })
-    .format(arg)
-    .padStart(4, '0');
-
-  const month = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(arg);
-
-  const day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(arg);
-
-  return `${year}-${month}-${day}`;
-}
+import DatePickerGroup from './DatePickerGroup';
+import { DatePickerHelper } from './DatePickerHelper';
+
+export interface StringDateOnlyPickerGroupProps
+  extends DatePickerHelper<string | undefined | null> {}
+
+/**
+ * Date picker input that consumes and outputs as a date only string in ISO format `YYYY-MM-DD`.
+ *
+ * Default display to the user is in `MM/DD/YYYY` format.
+ */
+export default function StringDatePickerGroup(
+  props: StringDateOnlyPickerGroupProps
+) {
+  return <DatePickerGroup {...props} convert={convertToDateOnly} />;
+}
+
+function convertToDateOnly(arg: Date) {
+  const year = new Intl.DateTimeFormat('en', { year: 'numeric' })
+    .format(arg)
+    .padStart(4, '0');
+
+  const month = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(arg);
+
+  const day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(arg);
+
+  return `${year}-${month}-${day}`;
+}

package/src/DatePicker/StringDatePickerGroup.tsx

@@ -1,20 +1,20 @@
-import DatePickerGroup from './DatePickerGroup';
-import { DatePickerHelper } from './DatePickerHelper';
-
-export interface StringDatePickerGroupProps
-  extends DatePickerHelper<string | undefined | null> {}
-
-/**
- * Date picker input that consumes and outputs as a date only string in ISO format `YYYY-MM-DDTHH:mm:ss.sssZ` or `±YYYYYY-MM-DDTHH:mm:ss.sssZ`
- *
- * If you need `YYYY-MM-DD` format use `<StringDateOnlyPickerGroup/>`.
- */
-export default function StringDatePickerGroup(
-  props: StringDatePickerGroupProps
-) {
-  return <DatePickerGroup {...props} convert={convertToDateOnly} />;
-}
-
-function convertToDateOnly(arg: Date) {
-  return arg.toISOString();
-}
+import DatePickerGroup from './DatePickerGroup';
+import { DatePickerHelper } from './DatePickerHelper';
+
+export interface StringDatePickerGroupProps
+  extends DatePickerHelper<string | undefined | null> {}
+
+/**
+ * Date picker input that consumes and outputs as a date only string in ISO format `YYYY-MM-DDTHH:mm:ss.sssZ` or `±YYYYYY-MM-DDTHH:mm:ss.sssZ`
+ *
+ * If you need `YYYY-MM-DD` format use `<StringDateOnlyPickerGroup/>`.
+ */
+export default function StringDatePickerGroup(
+  props: StringDatePickerGroupProps
+) {
+  return <DatePickerGroup {...props} convert={convertToDateOnly} />;
+}
+
+function convertToDateOnly(arg: Date) {
+  return arg.toISOString();
+}