envoc-form 5.0.8 → 5.1.0

package/src/DatePicker/DatePickerGroup.tsx

@@ -32,6 +32,8 @@ export default function DatePickerGroup<T>({
   required,
   disabled,
   convert,
+  maxDate = new Date(9999, 11, 31),
+  minDate = new Date(1000, 0, 1),
   ...rest
 }: DatePickerGroupProps<T>) {
   const [displayDate, setDisplayDate] = useState<Date | null>(null);
@@ -62,6 +64,9 @@ export default function DatePickerGroup<T>({
         className={clsx(FormDefaults.cssClassPrefix + 'date-picker', className)}
         value={displayDate}
         onChange={handleChange}
+        maxDate={maxDate}
+        minDate={minDate}
+        disabled={disabled}
       />
     </Group>
   );
@@ -100,6 +105,7 @@ export default function DatePickerGroup<T>({
 export function convertToTimeZoneInsensitiveISOString(date: Date): string {
   const year = new Intl.DateTimeFormat('en', { year: 'numeric' })
     .format(date)
+    .substring(0, 4)
     .padStart(4, '0');
   const month = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(
     date

package/src/DateTimePicker/DateTimePicker.test.tsx

@@ -0,0 +1,243 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import StringDateTimePickerGroup from './StringDateTimePickerGroup';
+import FormTestBase, { PersonDto } from '../__Tests__/FormTestBase';
+
+//hack so the datetimepicker internals don't complain about this not existing in the context of jest
+HTMLCanvasElement.prototype.getContext = () => null;
+
+describe('StringDateTimePickerGroup', () => {
+  it('renders without crashing', () => {
+    render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="createdDateTime"
+            Component={StringDateTimePickerGroup}
+            label="Created Date Time"
+            monthPlaceholder="mm"
+            dayPlaceholder="dd"
+            yearPlaceholder="yyyy"
+            disableClock
+            maxDate={new Date('9/23/2023')}
+            minDate={new Date('6/22/2022')}
+          />
+        )}
+      </FormTestBase>
+    );
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="createdDateTime"
+            Component={StringDateTimePickerGroup}
+            label="Created Date Time"
+            monthPlaceholder="mm"
+            dayPlaceholder="dd"
+            yearPlaceholder="yyyy"
+            disableClock
+            maxDate={new Date('9/23/2023')}
+            minDate={new Date('6/22/2022')}
+          />
+        )}
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+
+  it('does not render with initial date-only string and throws exception', () => {
+    const dateOnlyString = '2024-09-04';
+    const personDtoWithDateOnlyString: PersonDto = {
+      createdDateTime: dateOnlyString,
+    };
+
+    try {
+      render(
+        <FormTestBase initialValues={personDtoWithDateOnlyString}>
+          {({ Field }) => (
+            <Field
+              name="createdDateTime"
+              Component={StringDateTimePickerGroup}
+              label="Created Date Time"
+              monthPlaceholder="mm"
+              dayPlaceholder="dd"
+              yearPlaceholder="yyyy"
+              disableClock
+            />
+          )}
+        </FormTestBase>
+      );
+
+      fail('Expected an exception to be thrown for date-only string');
+    } catch (error: any) {
+      // Assert that the error message matches the expected message
+      expect(error.message).toEqual(
+        `Invalid "date time" value of ${dateOnlyString} provided to DateTimePickerGroup component. Please provide ISO 8601 string that includes the time zone designator. Sample strings: 2022-09-24T:08:54:12+00:00, 2022-09-24T:08:54:12Z, 2022-09-24T:08:54:12.123-05:00`
+      );
+    }
+  });
+
+  it('renders with ISO UTC date time string taking browser timezone into account', () => {
+    const isoUTCDateTimeString = '2024-04-09T21:00:24.670Z';
+    const personDtoWithDateTimeString: PersonDto = {
+      createdDateTime: isoUTCDateTimeString,
+    };
+
+    render(
+      <FormTestBase initialValues={personDtoWithDateTimeString}>
+        {({ Field }) => (
+          <Field
+            name="createdDateTime"
+            Component={StringDateTimePickerGroup}
+            label="Created Date Time"
+            monthPlaceholder="mm"
+            dayPlaceholder="dd"
+            yearPlaceholder="yyyy"
+            disableClock
+          />
+        )}
+      </FormTestBase>
+    );
+
+    const dateTimePickerInputComponent = document.querySelector(
+      'input[name="datetime"][type="datetime-local"]'
+    );
+    const utcDate = new Date(isoUTCDateTimeString);
+    const localDateTimeString =
+      convertToDateTimePickerComponentValueString(utcDate);
+
+    // Assert that no exception is thrown during rendering
+    expect(true).toBe(true);
+    // Assert the value of the component
+    expect(dateTimePickerInputComponent).toHaveValue(localDateTimeString);
+  });
+
+  it('does not render with invalid datetime ISO string and throws exception', () => {
+    const invalidISODateTimeString = '2024-04-11T01:00:00.000-5:00';
+    const personDtoWithDateOnlyString: PersonDto = {
+      createdDateTime: invalidISODateTimeString,
+    };
+
+    try {
+      render(
+        <FormTestBase initialValues={personDtoWithDateOnlyString}>
+          {({ Field }) => (
+            <Field
+              name="createdDateTime"
+              Component={StringDateTimePickerGroup}
+              label="Created Date Time"
+              monthPlaceholder="mm"
+              dayPlaceholder="dd"
+              yearPlaceholder="yyyy"
+              disableClock
+            />
+          )}
+        </FormTestBase>
+      );
+
+      fail('Expected an exception to be thrown for invalid datetime string');
+    } catch (error: any) {
+      // Assert that the error message matches the expected message
+      expect(error.message).toEqual(
+        `Invalid "date time" value of ${invalidISODateTimeString} provided to DateTimePickerGroup component. Please provide ISO 8601 string that includes the time zone designator. Sample strings: 2022-09-24T:08:54:12+00:00, 2022-09-24T:08:54:12Z, 2022-09-24T:08:54:12.123-05:00`
+      );
+    }
+  });
+
+  it('renders with ISO date time string with different offset than browser taking browser timezone into account', () => {
+    const isoDateTimeString = '2024-04-09T21:00:24.670-01:00';
+    const personDtoWithDateTimeString: PersonDto = {
+      createdDateTime: isoDateTimeString,
+    };
+
+    render(
+      <FormTestBase initialValues={personDtoWithDateTimeString}>
+        {({ Field }) => (
+          <Field
+            name="createdDateTime"
+            Component={StringDateTimePickerGroup}
+            label="Created Date Time"
+            monthPlaceholder="mm"
+            dayPlaceholder="dd"
+            yearPlaceholder="yyyy"
+            disableClock
+          />
+        )}
+      </FormTestBase>
+    );
+
+    const dateTimePickerInputComponent = document.querySelector(
+      'input[name="datetime"][type="datetime-local"]'
+    );
+    const utcDate = new Date(isoDateTimeString);
+    const localDateTimeString =
+      convertToDateTimePickerComponentValueString(utcDate);
+
+    // Assert that no exception is thrown during rendering
+    expect(true).toBe(true);
+    // Assert the value of the component
+    expect(dateTimePickerInputComponent).toHaveValue(localDateTimeString);
+  });
+
+  it('renders with ISO date time string with same offset as the browser taking browser timezone into account', () => {
+    const isoDateTimeString = '2024-04-09T21:00:24.670-05:00';
+    const personDtoWithDateTimeString: PersonDto = {
+      createdDateTime: isoDateTimeString,
+    };
+
+    render(
+      <FormTestBase initialValues={personDtoWithDateTimeString}>
+        {({ Field }) => (
+          <Field
+            name="createdDateTime"
+            Component={StringDateTimePickerGroup}
+            label="Created Date Time"
+            monthPlaceholder="mm"
+            dayPlaceholder="dd"
+            yearPlaceholder="yyyy"
+            disableClock
+          />
+        )}
+      </FormTestBase>
+    );
+
+    const dateTimePickerInputComponent = document.querySelector(
+      'input[name="datetime"][type="datetime-local"]'
+    );
+    const utcDate = new Date(isoDateTimeString);
+    const localDateTimeString =
+      convertToDateTimePickerComponentValueString(utcDate);
+
+    // Assert that no exception is thrown during rendering
+    expect(true).toBe(true);
+    // Assert the value of the component
+    expect(dateTimePickerInputComponent).toHaveValue(localDateTimeString);
+  });
+});
+
+function convertToDateTimePickerComponentValueString(date: Date): string {
+  // Format the date in the required format using `intl.DateTimeFormat`
+  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);
+
+  const hour = new Intl.DateTimeFormat('en', {
+    hour: '2-digit',
+    hourCycle: 'h23',
+  }).format(date);
+
+  const minute = new Intl.DateTimeFormat('en', { minute: '2-digit' })
+    .format(date)
+    .padStart(2, '0');
+
+  return `${year}-${month}-${day}T${hour}:${minute}`;
+}

package/src/DateTimePicker/DateTimePickerGroup.tsx

@@ -0,0 +1,116 @@
+import { useEffect, useState } from 'react';
+import { DateTimePicker, DateTimePickerProps } from 'react-datetime-picker';
+import { clsx } from 'clsx';
+import parseISO from 'date-fns/parseISO';
+import { InjectedFieldProps } from '../Field/InjectedFieldProps';
+import { FormDefaults } from '../FormDefaults';
+import Group, { GroupProps } from '../Group';
+
+// Represents a single date/date string, or null
+type DateTimePickerValuePiece = Date | string | null;
+// Represents either a single date/date string, a pair of dates/date strings for a range, or null
+type DateTimePickerValue =
+  | DateTimePickerValuePiece
+  | [DateTimePickerValuePiece, DateTimePickerValuePiece];
+
+export interface DateTimePickerGroupProps<T>
+  extends InjectedFieldProps<T | undefined | null>,
+    Omit<
+      DateTimePickerProps,
+      keyof InjectedFieldProps<T> | 'name' | 'value' | 'className'
+    >,
+    Omit<GroupProps, keyof InjectedFieldProps<T> | 'children'> {
+  convert: (date: Date) => T;
+}
+
+/**
+ * Field for inputting date and time. Uses `<Group/>` and `<DateTimePicker/>`.
+ *
+ * Uses [react-datetime-picker](https://www.npmjs.com/package/react-datetime-picker)
+ */
+export default function DateTimePickerGroup<T>({
+  input,
+  meta,
+  label,
+  helpText,
+  className,
+  required,
+  disabled,
+  convert,
+  ...rest
+}: DateTimePickerGroupProps<T>) {
+  const [displayDateTime, setDisplayDateTime] = useState<Date | null>(null);
+
+  useEffect(() => {
+    const inputValue = input.value;
+    if (!inputValue) {
+      setDisplayDateTime(null);
+    } else if (typeof inputValue === 'string') {
+      const parsedDateTime = convertISODateTimeStringToDate(inputValue);
+      setDisplayDateTime(parsedDateTime);
+    } else if (inputValue instanceof Date) {
+      setDisplayDateTime(inputValue);
+    }
+  }, [setDisplayDateTime, input.value]);
+
+  return (
+    <Group
+      input={input}
+      meta={meta}
+      label={label}
+      helpText={helpText}
+      className={clsx(
+        className,
+        FormDefaults.cssClassPrefix + 'date-time-picker'
+      )}
+      required={required}
+      disabled={disabled}>
+      <DateTimePicker
+        {...rest}
+        className={clsx(
+          FormDefaults.cssClassPrefix + 'date-time-picker',
+          className
+        )}
+        value={displayDateTime}
+        onChange={handleChange}
+      />
+    </Group>
+  );
+
+  function handleChange(newDateTime: DateTimePickerValue) {
+    const { onChange } = input;
+    if (onChange === null) {
+      return;
+    }
+
+    if (!newDateTime) {
+      onChange(undefined);
+      setDisplayDateTime(null);
+      return;
+    } else if (typeof newDateTime === 'string') {
+      const parsedDateTime = parseISO(newDateTime);
+      setDisplayDateTime(parsedDateTime);
+      onChange(convert(parsedDateTime));
+    } else if (newDateTime instanceof Date) {
+      setDisplayDateTime(newDateTime);
+      onChange(convert(newDateTime));
+    }
+  }
+}
+
+function convertISODateTimeStringToDate(isoDateTimeString: string) {
+  const isoDateTimeRegex =
+    /^(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d+)?)([+-]\d{2}:\d{2}|Z)?$/;
+  const isValidIsoDateTimeString = isoDateTimeRegex.test(isoDateTimeString);
+  if (isValidIsoDateTimeString) {
+    return new Date(isoDateTimeString);
+  }
+
+  const errorMessage = `Invalid "date time" value of ${isoDateTimeString} provided to DateTimePickerGroup component. Please provide ISO 8601 string that includes the time zone designator. Sample strings: 2022-09-24T:08:54:12+00:00, 2022-09-24T:08:54:12Z, 2022-09-24T:08:54:12.123-05:00`;
+  if (process.env.NODE_ENV !== 'production') {
+    throw new Error(errorMessage);
+  } else {
+    console.error(errorMessage);
+  }
+  return null;
+}

package/src/DateTimePicker/DateTimePickerHelper.ts

@@ -0,0 +1,4 @@
+import { DateTimePickerGroupProps } from './DateTimePickerGroup';
+
+export interface DateTimePickerHelper<T>
+  extends Omit<DateTimePickerGroupProps<T>, 'convert'> {}

package/src/DateTimePicker/StringDateTimePickerGroup.tsx

@@ -0,0 +1,61 @@
+import DateTimePickerGroup from './DateTimePickerGroup';
+import { DateTimePickerHelper } from './DateTimePickerHelper';
+
+export interface StringDateTimePickerGroupProps
+  extends DateTimePickerHelper<string | undefined | null> {}
+
+/**
+ * Date Time picker input that consumes JS Date object and outputs as a date time offset string in ISO format `YYYY-MM-DDTHH:mm:ss.sss±hh:mm`.
+ *
+ * Default display to the user is in `MM/DD/YYYY HH:mm:ss AM/PM` format.
+ */
+export default function StringDateTimePickerGroup(
+  props: StringDateTimePickerGroupProps
+) {
+  return <DateTimePickerGroup {...props} convert={convertToISOString} />;
+}
+
+function convertToISOString(date: Date): string {
+  // Get the offset in minutes
+  const offsetMinutes = date.getTimezoneOffset();
+
+  // Calculate the offset in hours and minutes
+  const offsetHours = Math.floor(Math.abs(offsetMinutes) / 60);
+  const offsetMinutesPart = Math.abs(offsetMinutes) % 60;
+
+  // Format the offset in the required format (+/-hh:mm)
+  const offsetString =
+    (offsetMinutes >= 0 ? '-' : '+') +
+    String(offsetHours).padStart(2, '0') +
+    ':' +
+    String(offsetMinutesPart).padStart(2, '0');
+
+  // Format the date in the required format using `intl.DateTimeFormat`
+  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);
+
+  const hour = new Intl.DateTimeFormat('en', {
+    hour: '2-digit',
+    hourCycle: 'h23',
+  }).format(date);
+
+  const minute = new Intl.DateTimeFormat('en', { minute: '2-digit' })
+    .format(date)
+    .padStart(2, '0');
+
+  const second = new Intl.DateTimeFormat('en', {
+    second: '2-digit',
+    fractionalSecondDigits: 3,
+  })
+    .format(date)
+    .padStart(6, '0');
+
+  return `${year}-${month}-${day}T${hour}:${minute}:${second}${offsetString}`;
+}

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

@@ -0,0 +1,217 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StringDateTimePickerGroup has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+    class="envoc-form-form"
+  >
+    <div
+      class="envoc-form-date-time-picker envoc-form-group"
+    >
+      <div
+        id="createddatetime-error-scroll-target"
+        style="display: none;"
+      />
+      <label
+        for="createdDateTime"
+      >
+        Created Date Time
+      </label>
+      <div
+        class="react-datetime-picker react-datetime-picker--closed react-datetime-picker--enabled envoc-form-date-time-picker"
+        id="createdDateTime"
+      >
+        <div
+          class="react-datetime-picker__wrapper"
+        >
+          <div
+            class="react-datetime-picker__inputGroup"
+          >
+            <input
+              hidden=""
+              max="2023-09-23T00:00"
+              min="2022-06-22T00:00"
+              name="datetime"
+              step="60"
+              style="visibility: hidden; position: absolute; z-index: -999;"
+              type="datetime-local"
+              value=""
+            />
+            <input
+              autocomplete="off"
+              class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__month"
+              data-input="true"
+              inputmode="numeric"
+              max="12"
+              min="1"
+              name="month"
+              placeholder="mm"
+              type="number"
+              value=""
+            />
+            <span
+              class="react-datetime-picker__inputGroup__divider"
+            >
+              /
+            </span>
+            <input
+              autocomplete="off"
+              class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__day"
+              data-input="true"
+              inputmode="numeric"
+              max="31"
+              min="1"
+              name="day"
+              placeholder="dd"
+              type="number"
+              value=""
+            />
+            <span
+              class="react-datetime-picker__inputGroup__divider"
+            >
+              /
+            </span>
+            <input
+              autocomplete="off"
+              class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__year"
+              data-input="true"
+              inputmode="numeric"
+              max="2023"
+              min="2022"
+              name="year"
+              placeholder="yyyy"
+              step="1"
+              type="number"
+              value=""
+            />
+            <span
+              class="react-datetime-picker__inputGroup__divider"
+            >
+               
+            </span>
+            <input
+              autocomplete="off"
+              class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__hour"
+              data-input="true"
+              inputmode="numeric"
+              max="12"
+              min="1"
+              name="hour12"
+              placeholder="--"
+              type="number"
+              value=""
+            />
+            <span
+              class="react-datetime-picker__inputGroup__divider"
+            >
+              :
+            </span>
+            <input
+              autocomplete="off"
+              class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__minute"
+              data-input="true"
+              inputmode="numeric"
+              max="59"
+              min="0"
+              name="minute"
+              placeholder="--"
+              type="number"
+              value=""
+            />
+            <span
+              class="react-datetime-picker__inputGroup__divider"
+            >
+               
+            </span>
+            <select
+              class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__amPm"
+              data-input="true"
+              data-select="true"
+              name="amPm"
+            >
+              <option
+                value=""
+              >
+                --
+              </option>
+              <option
+                value="am"
+              >
+                AM
+              </option>
+              <option
+                value="pm"
+              >
+                PM
+              </option>
+            </select>
+          </div>
+          <button
+            class="react-datetime-picker__clear-button react-datetime-picker__button"
+            type="button"
+          >
+            <svg
+              class="react-datetime-picker__clear-button__icon react-datetime-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
+            aria-expanded="false"
+            class="react-datetime-picker__calendar-button react-datetime-picker__button"
+            type="button"
+          >
+            <svg
+              class="react-datetime-picker__calendar-button__icon react-datetime-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>
+    </div>
+  </form>
+</DocumentFragment>
+`;

package/src/Input/InputGroup.tsx

@@ -32,6 +32,7 @@ function InputGroup<TValue>(
     onChange,
     value,
     icon,
+    type,
     ...rest
   }: InputGroupProps<TValue>,
   ref: LegacyRef<HTMLInputElement>
@@ -55,6 +56,8 @@ function InputGroup<TValue>(
         onChange={onChange}
         ref={ref}
         className={clsx(className, FormDefaults.cssClassPrefix + 'input-group')}
+        disabled={disabled}
+        type={disabled ? 'text' : type}
       />
     </Group>
   );

package/src/__Tests__/FormTestBase.tsx

@@ -58,6 +58,7 @@ export interface PersonDto {
   favoriteColor?: string;
   favoriteColors?: string[];
   favoriteNames?: string[];
+  createdDateTime?: string;
   allowLogin?: boolean;
   userRoles?: number[];
   profileImage?: any;