@rjsf/utils 6.0.0-beta.8 → 6.0.0

package/src/useAltDateWidgetProps.tsx

@@ -0,0 +1,163 @@
+import { MouseEvent, useCallback, useEffect, useMemo, useState } from 'react';
+
+import dateRangeOptions from './dateRangeOptions';
+import getDateElementProps, { DateElementFormat, DateElementProp } from './getDateElementProps';
+import { ariaDescribedByIds } from './idGenerators';
+import parseDateString from './parseDateString';
+import toDateString from './toDateString';
+import { DateObject, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from './types';
+
+/** Function that checks to see if a `DateObject` is ready for the onChange callback to be triggered
+ *
+ * @param state - The current `DateObject`
+ * @returns - True if the `state` is ready to trigger an onChange
+ */
+function readyForChange(state: DateObject) {
+  return Object.values(state).every((value) => value !== -1);
+}
+
+/** The Props for the `DateElement` component */
+export type DateElementProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> = Pick<
+  WidgetProps<T, S, F>,
+  'value' | 'name' | 'disabled' | 'readonly' | 'autofocus' | 'registry' | 'onBlur' | 'onFocus' | 'className'
+> & {
+  /** The root id of the field */
+  rootId: string;
+  /** The selector function for a specific prop within the `DateObject`, for a value */
+  select: (property: keyof DateObject, value: any) => void;
+  /** The type of the date element */
+  type: DateElementProp['type'];
+  /** The range for the date element */
+  range: DateElementProp['range'];
+};
+
+/** The `DateElement` component renders one of the 6 date element selectors for an `AltDateWidget`, using the `select`
+ * widget from the registry.
+ *
+ * @param props - The `DateElementProps` for the date element
+ */
+export function DateElement<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: DateElementProps<T, S, F>,
+) {
+  const {
+    className = 'form-control',
+    type,
+    range,
+    value,
+    select,
+    rootId,
+    name,
+    disabled,
+    readonly,
+    autofocus,
+    registry,
+    onBlur,
+    onFocus,
+  } = props;
+  const id = `${rootId}_${type}`;
+  const { SelectWidget } = registry.widgets;
+  const onChange = useCallback((value: any) => select(type as keyof DateObject, value), [select, type]);
+  return (
+    <SelectWidget
+      schema={{ type: 'integer' } as S}
+      id={id}
+      name={name}
+      className={className}
+      options={{ enumOptions: dateRangeOptions<S>(range[0], range[1]) }}
+      placeholder={type}
+      value={value}
+      disabled={disabled}
+      readonly={readonly}
+      autofocus={autofocus}
+      onChange={onChange}
+      onBlur={onBlur}
+      onFocus={onFocus}
+      registry={registry}
+      label=''
+      aria-describedby={ariaDescribedByIds(rootId)}
+    />
+  );
+}
+
+/** The result of a call to the `useAltDateWidgetProps()` hook */
+export type UseAltDateWidgetResult = {
+  /** The list of `DateElementProp` data to render for the `AltDateWidget` */
+  elements: DateElementProp[];
+  /** The callback that handles the changing of DateElement components */
+  handleChange: (property: keyof DateObject, value?: string) => void;
+  /** The callback that will clear the `AltDateWidget` when a button is clicked */
+  handleClear: (event: MouseEvent) => void;
+  /** The callback that will set the `AltDateWidget` to NOW when a button is clicked */
+  handleSetNow: (event: MouseEvent) => void;
+};
+
+/** Hook which encapsulates the logic needed to render an `AltDateWidget` with optional `time` elements. It contains
+ * the `state` of the current date(/time) selections in the widget. It returns a `UseAltDateWidgetResult` object
+ * that contains the `elements: DateElementProp[]` and three callbacks needed to change one of the rendered `elements`,
+ * and to handle the clicking of the `clear` and `setNow` buttons.
+ *
+ * @param props - The `WidgetProps` for the `AltDateWidget`
+ */
+export default function useAltDateWidgetProps<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: WidgetProps<T, S, F>): UseAltDateWidgetResult {
+  const { time = false, disabled = false, readonly = false, options, onChange, value } = props;
+  const [state, setState] = useState(parseDateString(value, time));
+
+  useEffect(() => {
+    setState(parseDateString(value, time));
+  }, [time, value]);
+
+  const handleChange = useCallback(
+    (property: keyof DateObject, value?: string) => {
+      const nextState = {
+        ...state,
+        [property]: typeof value === 'undefined' ? -1 : value,
+      };
+
+      if (readyForChange(nextState)) {
+        onChange(toDateString(nextState, time));
+      } else {
+        setState(nextState);
+      }
+    },
+    [state, onChange, time],
+  );
+
+  const handleClear = useCallback(
+    (event: MouseEvent) => {
+      event.preventDefault();
+      if (disabled || readonly) {
+        return;
+      }
+      onChange(undefined);
+    },
+    [disabled, readonly, onChange],
+  );
+
+  const handleSetNow = useCallback(
+    (event: MouseEvent) => {
+      event.preventDefault();
+      if (disabled || readonly) {
+        return;
+      }
+      const nextState = parseDateString(new Date().toJSON(), time);
+      onChange(toDateString(nextState, time));
+    },
+    [disabled, readonly, time, onChange],
+  );
+
+  const elements = useMemo(
+    () =>
+      getDateElementProps(
+        state,
+        time,
+        options.yearsRange as [number, number] | undefined,
+        options.format as DateElementFormat | undefined,
+      ),
+    [state, time, options.yearsRange, options.format],
+  );
+  return { elements, handleChange, handleClear, handleSetNow };
+}

package/src/useDeepCompareMemo.ts

@@ -0,0 +1,17 @@
+import { useRef } from 'react';
+import isEqual from 'lodash/isEqual';
+
+/** Hook that stores and returns a `T` value. If `newValue` is the same as the stored one, then the stored one is
+ * returned to avoid having a component rerender due it being a different object. Otherwise, the `newValue` is stored
+ * and returned.
+ *
+ * @param newValue - The potential new `T` value
+ * @returns - The latest stored `T` value
+ */
+export default function useDeepCompareMemo<T = unknown>(newValue: T): T {
+  const valueRef = useRef<T>(newValue);
+  if (!isEqual(newValue, valueRef.current)) {
+    valueRef.current = newValue;
+  }
+  return valueRef.current;
+}

package/src/useFileWidgetProps.ts

@@ -0,0 +1,155 @@
+import { useCallback, useMemo } from 'react';
+
+import dataURItoBlob from './dataURItoBlob';
+
+/** The information about files used by a FileWidget */
+export type FileInfoType = {
+  /** The url of the data containing the file */
+  dataURL?: string | null;
+  /** The name of the file */
+  name: string;
+  /** The size of the file */
+  size: number;
+  /** The type of the file */
+  type: string;
+};
+
+export interface UseFileWidgetPropsResult {
+  /** The list of FileInfoType contained within the FileWidget */
+  filesInfo: FileInfoType[];
+  /** The callback handler to pass to the onChange of the input */
+  handleChange: (files: FileList) => void;
+  /** The callback handler to pass in order to delete a file */
+  handleRemove: (index: number) => void;
+}
+
+/** Updated the given `dataUrl` to add the `name` to it
+ *
+ * @param dataURL - The url description string
+ * @param name - The name of the file to add to the dataUrl
+ * @returns - The `dataUrl` updated to include the name
+ */
+function addNameToDataURL(dataURL: string, name: string) {
+  return dataURL.replace(';base64', `;name=${encodeURIComponent(name)};base64`);
+}
+
+/** Returns a promise that will read the file from the browser and return it as the result of the promise.
+ *
+ * @param file - The `File` information to read
+ * @returns - A promise that resolves to the read file.
+ */
+function processFile(file: File): Promise<FileInfoType> {
+  const { name, size, type } = file;
+  return new Promise((resolve, reject) => {
+    const reader = new window.FileReader();
+    reader.onerror = reject;
+    reader.onload = (event) => {
+      if (typeof event.target?.result === 'string') {
+        resolve({
+          dataURL: addNameToDataURL(event.target.result, name),
+          name,
+          size,
+          type,
+        });
+      } else {
+        resolve({
+          dataURL: null,
+          name,
+          size,
+          type,
+        });
+      }
+    };
+    reader.readAsDataURL(file);
+  });
+}
+
+/** Reads a list of files from the browser, returning the results of the promises of each individual file read.
+ *
+ * @param files - The list of files to read
+ * @returns - The list of read files
+ */
+function processFiles(files: FileList) {
+  return Promise.all(Array.from(files).map(processFile));
+}
+
+/** Extracts the file information from the data URLs
+ *
+ * @param dataURLs - The information about the files
+ * @returns - The list of `FileInfoType` objects extracted from the data urls
+ */
+function extractFileInfo(dataURLs: string[]): FileInfoType[] {
+  return dataURLs.reduce((acc, dataURL) => {
+    if (!dataURL) {
+      return acc;
+    }
+    try {
+      const { blob, name } = dataURItoBlob(dataURL);
+      return [
+        ...acc,
+        {
+          dataURL,
+          name: name,
+          size: blob.size,
+          type: blob.type,
+        },
+      ];
+    } catch {
+      // Invalid dataURI, so just ignore it.
+      return acc;
+    }
+  }, [] as FileInfoType[]);
+}
+
+/** Hook which encapsulates the logic needed to read and convert a `value` of `File` or `File[]` into the
+ * `filesInfo: FileInfoType[]` and the two callback implementations needed to change the list or to remove a
+ * `File` from the list. To be used by theme specific `FileWidget` implementations.
+ *
+ * @param value - The current value of the `FileWidget`
+ * @param onChange - The onChange handler for the `FileWidget`
+ * @param [multiple=false] - Flag indicating whether the control supports multiple selections
+ * @returns - The `UseFileWidgetPropsResult` to be used within a `FileWidget` implementation
+ */
+export default function useFileWidgetProps(
+  value: string | string[] | undefined | null,
+  onChange: (value?: string | null | (string | null)[]) => void,
+  multiple = false,
+): UseFileWidgetPropsResult {
+  const values: (string | null)[] = useMemo(() => {
+    if (multiple && value) {
+      return Array.isArray(value) ? value : [value];
+    }
+    return [];
+  }, [value, multiple]);
+  const filesInfo = useMemo(
+    () => (Array.isArray(value) ? extractFileInfo(value) : extractFileInfo([value || ''])),
+    [value],
+  );
+
+  const handleChange = useCallback(
+    (files: FileList) => {
+      processFiles(files).then((filesInfoEvent) => {
+        const newValue = filesInfoEvent.map((fileInfo) => fileInfo.dataURL || null);
+        if (multiple) {
+          onChange(values.concat(...newValue));
+        } else {
+          onChange(newValue[0]);
+        }
+      });
+    },
+    [values, multiple, onChange],
+  );
+  const handleRemove = useCallback(
+    (index: number) => {
+      if (multiple) {
+        const newValue = values.filter((_, i: number) => i !== index);
+        onChange(newValue);
+      } else {
+        onChange(undefined);
+      }
+    },
+    [values, multiple, onChange],
+  );
+
+  return { filesInfo, handleChange, handleRemove };
+}

package/src/validationDataMerge.ts

@@ -11,11 +11,13 @@ import { ErrorSchema, ValidationData } from './types';
  *
  * @param validationData - The current `ValidationData` into which to merge the additional errors
  * @param [additionalErrorSchema] - The optional additional set of errors in an `ErrorSchema`
+ * @param [preventDuplicates=false] - Optional flag, if true, will call `mergeObjects()` with `preventDuplicates`
  * @returns - The `validationData` with the additional errors from `additionalErrorSchema` merged into it, if provided.
  */
 export default function validationDataMerge<T = any>(
   validationData: ValidationData<T>,
   additionalErrorSchema?: ErrorSchema<T>,
+  preventDuplicates = false,
 ): ValidationData<T> {
   if (!additionalErrorSchema) {
     return validationData;
@@ -24,7 +26,11 @@ export default function validationDataMerge<T = any>(
   let errors = toErrorList(additionalErrorSchema);
   let errorSchema = additionalErrorSchema;
   if (!isEmpty(oldErrorSchema)) {
-    errorSchema = mergeObjects(oldErrorSchema, additionalErrorSchema, true) as ErrorSchema<T>;
+    errorSchema = mergeObjects(
+      oldErrorSchema,
+      additionalErrorSchema,
+      preventDuplicates ? 'preventDuplicates' : true,
+    ) as ErrorSchema<T>;
     errors = [...oldErrors].concat(errors);
   }
   return { errorSchema, errors };