@rjsf/core 5.11.2 → 5.12.0

package/src/components/widgets/CheckboxWidget.tsx

@@ -0,0 +1,92 @@
+import { ChangeEvent, FocusEvent, useCallback } from 'react';
+import {
+  ariaDescribedByIds,
+  descriptionId,
+  getTemplate,
+  labelValue,
+  schemaRequiresTrueValue,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from '@rjsf/utils';
+
+/** The `CheckBoxWidget` is a widget for rendering boolean properties.
+ *  It is typically used to represent a boolean.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+function CheckboxWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  schema,
+  uiSchema,
+  options,
+  id,
+  value,
+  disabled,
+  readonly,
+  label,
+  hideLabel,
+  autofocus = false,
+  onBlur,
+  onFocus,
+  onChange,
+  registry,
+}: WidgetProps<T, S, F>) {
+  const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
+    'DescriptionFieldTemplate',
+    registry,
+    options
+  );
+  // Because an unchecked checkbox will cause html5 validation to fail, only add
+  // the "required" attribute if the field value must be "true", due to the
+  // "const" or "enum" keywords
+  const required = schemaRequiresTrueValue<S>(schema);
+
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => onChange(event.target.checked),
+    [onChange]
+  );
+
+  const handleBlur = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => onBlur(id, event.target.checked),
+    [onBlur, id]
+  );
+
+  const handleFocus = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => onFocus(id, event.target.checked),
+    [onFocus, id]
+  );
+  const description = options.description ?? schema.description;
+
+  return (
+    <div className={`checkbox ${disabled || readonly ? 'disabled' : ''}`}>
+      {!hideLabel && !!description && (
+        <DescriptionFieldTemplate
+          id={descriptionId<T>(id)}
+          description={description}
+          schema={schema}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+      <label>
+        <input
+          type='checkbox'
+          id={id}
+          name={id}
+          checked={typeof value === 'undefined' ? false : value}
+          required={required}
+          disabled={disabled || readonly}
+          autoFocus={autofocus}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
+          aria-describedby={ariaDescribedByIds<T>(id)}
+        />
+        {labelValue(<span>{label}</span>, hideLabel)}
+      </label>
+    </div>
+  );
+}
+
+export default CheckboxWidget;

package/src/components/widgets/CheckboxesWidget.tsx

@@ -0,0 +1,92 @@
+import { ChangeEvent, FocusEvent, useCallback } from 'react';
+import {
+  ariaDescribedByIds,
+  enumOptionsDeselectValue,
+  enumOptionsIsSelected,
+  enumOptionsSelectValue,
+  enumOptionsValueForIndex,
+  optionId,
+  FormContextType,
+  WidgetProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
+
+/** The `CheckboxesWidget` is a widget for rendering checkbox groups.
+ *  It is typically used to represent an array of enums.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+function CheckboxesWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  id,
+  disabled,
+  options: { inline = false, enumOptions, enumDisabled, emptyValue },
+  value,
+  autofocus = false,
+  readonly,
+  onChange,
+  onBlur,
+  onFocus,
+}: WidgetProps<T, S, F>) {
+  const checkboxesValues = Array.isArray(value) ? value : [value];
+
+  const handleBlur = useCallback(
+    ({ target: { value } }: FocusEvent<HTMLInputElement>) =>
+      onBlur(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue)),
+    [onBlur, id]
+  );
+
+  const handleFocus = useCallback(
+    ({ target: { value } }: FocusEvent<HTMLInputElement>) =>
+      onFocus(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue)),
+    [onFocus, id]
+  );
+  return (
+    <div className='checkboxes' id={id}>
+      {Array.isArray(enumOptions) &&
+        enumOptions.map((option, index) => {
+          const checked = enumOptionsIsSelected<S>(option.value, checkboxesValues);
+          const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+          const disabledCls = disabled || itemDisabled || readonly ? 'disabled' : '';
+
+          const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+            if (event.target.checked) {
+              onChange(enumOptionsSelectValue<S>(index, checkboxesValues, enumOptions));
+            } else {
+              onChange(enumOptionsDeselectValue<S>(index, checkboxesValues, enumOptions));
+            }
+          };
+
+          const checkbox = (
+            <span>
+              <input
+                type='checkbox'
+                id={optionId(id, index)}
+                name={id}
+                checked={checked}
+                value={String(index)}
+                disabled={disabled || itemDisabled || readonly}
+                autoFocus={autofocus && index === 0}
+                onChange={handleChange}
+                onBlur={handleBlur}
+                onFocus={handleFocus}
+                aria-describedby={ariaDescribedByIds<T>(id)}
+              />
+              <span>{option.label}</span>
+            </span>
+          );
+          return inline ? (
+            <label key={index} className={`checkbox-inline ${disabledCls}`}>
+              {checkbox}
+            </label>
+          ) : (
+            <div key={index} className={`checkbox ${disabledCls}`}>
+              <label>{checkbox}</label>
+            </div>
+          );
+        })}
+    </div>
+  );
+}
+
+export default CheckboxesWidget;

package/src/components/widgets/ColorWidget.tsx

@@ -0,0 +1,14 @@
+import { getTemplate, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+
+/** The `ColorWidget` component uses the `BaseInputTemplate` changing the type to `color` and disables it when it is
+ * either disabled or readonly.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function ColorWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: WidgetProps<T, S, F>
+) {
+  const { disabled, readonly, options, registry } = props;
+  const BaseInputTemplate = getTemplate<'BaseInputTemplate', T, S, F>('BaseInputTemplate', registry, options);
+  return <BaseInputTemplate type='color' {...props} disabled={disabled || readonly} />;
+}

package/src/components/widgets/DateTimeWidget.tsx

@@ -0,0 +1,31 @@
+import {
+  getTemplate,
+  localToUTC,
+  utcToLocal,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from '@rjsf/utils';
+
+/** The `DateTimeWidget` component uses the `BaseInputTemplate` changing the type to `datetime-local` and transforms
+ * the value to/from utc using the appropriate utility functions.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function DateTimeWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: WidgetProps<T, S, F>) {
+  const { onChange, value, options, registry } = props;
+  const BaseInputTemplate = getTemplate<'BaseInputTemplate', T, S, F>('BaseInputTemplate', registry, options);
+  return (
+    <BaseInputTemplate
+      type='datetime-local'
+      {...props}
+      value={utcToLocal(value)}
+      onChange={(value) => onChange(localToUTC(value))}
+    />
+  );
+}

package/src/components/widgets/DateWidget.tsx

@@ -0,0 +1,17 @@
+import { useCallback } from 'react';
+import { getTemplate, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+
+/** The `DateWidget` component uses the `BaseInputTemplate` changing the type to `date` and transforms
+ * the value to undefined when it is falsy during the `onChange` handling.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function DateWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: WidgetProps<T, S, F>
+) {
+  const { onChange, options, registry } = props;
+  const BaseInputTemplate = getTemplate<'BaseInputTemplate', T, S, F>('BaseInputTemplate', registry, options);
+  const handleChange = useCallback((value: any) => onChange(value || undefined), [onChange]);
+
+  return <BaseInputTemplate type='date' {...props} onChange={handleChange} />;
+}

package/src/components/widgets/EmailWidget.tsx

@@ -0,0 +1,13 @@
+import { getTemplate, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+
+/** The `EmailWidget` component uses the `BaseInputTemplate` changing the type to `email`.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function EmailWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: WidgetProps<T, S, F>
+) {
+  const { options, registry } = props;
+  const BaseInputTemplate = getTemplate<'BaseInputTemplate', T, S, F>('BaseInputTemplate', registry, options);
+  return <BaseInputTemplate type='email' {...props} />;
+}

package/src/components/widgets/FileWidget.tsx

@@ -0,0 +1,178 @@
+import { ChangeEvent, useCallback, useState } from 'react';
+import {
+  dataURItoBlob,
+  FormContextType,
+  getTemplate,
+  Registry,
+  RJSFSchema,
+  StrictRJSFSchema,
+  TranslatableString,
+  WidgetProps,
+} from '@rjsf/utils';
+import Markdown from 'markdown-to-jsx';
+
+function addNameToDataURL(dataURL: string, name: string) {
+  if (dataURL === null) {
+    return null;
+  }
+  return dataURL.replace(';base64', `;name=${encodeURIComponent(name)};base64`);
+}
+
+type FileInfoType = {
+  dataURL?: string | null;
+  name: string;
+  size: number;
+  type: string;
+};
+
+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);
+  });
+}
+
+function processFiles(files: FileList) {
+  return Promise.all(Array.from(files).map(processFile));
+}
+
+function FileInfoPreview<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  fileInfo,
+  registry,
+}: {
+  fileInfo: FileInfoType;
+  registry: Registry<T, S, F>;
+}) {
+  const { translateString } = registry;
+  const { dataURL, type, name } = fileInfo;
+  if (!dataURL) {
+    return null;
+  }
+
+  if (type.indexOf('image') !== -1) {
+    return <img src={dataURL} style={{ maxWidth: '100%' }} className='file-preview' />;
+  }
+
+  return (
+    <>
+      {' '}
+      <a download={`preview-${name}`} href={dataURL} className='file-download'>
+        {translateString(TranslatableString.PreviewLabel)}
+      </a>
+    </>
+  );
+}
+
+function FilesInfo<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  filesInfo,
+  registry,
+  preview,
+}: {
+  filesInfo: FileInfoType[];
+  registry: Registry<T, S, F>;
+  preview?: boolean;
+}) {
+  if (filesInfo.length === 0) {
+    return null;
+  }
+  const { translateString } = registry;
+  return (
+    <ul className='file-info'>
+      {filesInfo.map((fileInfo, key) => {
+        const { name, size, type } = fileInfo;
+        return (
+          <li key={key}>
+            <Markdown>{translateString(TranslatableString.FilesInfo, [name, type, String(size)])}</Markdown>
+            {preview && <FileInfoPreview<T, S, F> fileInfo={fileInfo} registry={registry} />}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+function extractFileInfo(dataURLs: string[]): FileInfoType[] {
+  return dataURLs
+    .filter((dataURL) => dataURL)
+    .map((dataURL) => {
+      const { blob, name } = dataURItoBlob(dataURL);
+      return {
+        dataURL,
+        name: name,
+        size: blob.size,
+        type: blob.type,
+      };
+    });
+}
+
+/**
+ *  The `FileWidget` is a widget for rendering file upload fields.
+ *  It is typically used with a string property with data-url format.
+ */
+function FileWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: WidgetProps<T, S, F>
+) {
+  const { disabled, readonly, required, multiple, onChange, value, options, registry } = props;
+  const BaseInputTemplate = getTemplate<'BaseInputTemplate', T, S, F>('BaseInputTemplate', registry, options);
+  const [filesInfo, setFilesInfo] = useState<FileInfoType[]>(
+    Array.isArray(value) ? extractFileInfo(value) : extractFileInfo([value])
+  );
+
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      if (!event.target.files) {
+        return;
+      }
+      // Due to variances in themes, dealing with multiple files for the array case now happens one file at a time.
+      // This is because we don't pass `multiple` into the `BaseInputTemplate` anymore. Instead, we deal with the single
+      // file in each event and concatenate them together ourselves
+      processFiles(event.target.files).then((filesInfoEvent) => {
+        const newValue = filesInfoEvent.map((fileInfo) => fileInfo.dataURL);
+        if (multiple) {
+          setFilesInfo(filesInfo.concat(filesInfoEvent[0]));
+          onChange(value.concat(newValue[0]));
+        } else {
+          setFilesInfo(filesInfoEvent);
+          onChange(newValue[0]);
+        }
+      });
+    },
+    [multiple, value, filesInfo, onChange]
+  );
+
+  return (
+    <div>
+      <BaseInputTemplate
+        {...props}
+        disabled={disabled || readonly}
+        type='file'
+        required={value ? false : required} // this turns off HTML required validation when a value exists
+        onChangeOverride={handleChange}
+        value=''
+        accept={options.accept ? String(options.accept) : undefined}
+      />
+      <FilesInfo<T, S, F> filesInfo={filesInfo} registry={registry} preview={options.filePreview} />
+    </div>
+  );
+}
+
+export default FileWidget;

package/src/components/widgets/HiddenWidget.tsx

@@ -0,0 +1,15 @@
+import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+
+/** The `HiddenWidget` is a widget for rendering a hidden input field.
+ *  It is typically used by setting type to "hidden".
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+function HiddenWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  id,
+  value,
+}: WidgetProps<T, S, F>) {
+  return <input type='hidden' id={id} name={id} value={typeof value === 'undefined' ? '' : value} />;
+}
+
+export default HiddenWidget;

package/src/components/widgets/PasswordWidget.tsx

@@ -0,0 +1,15 @@
+import { getTemplate, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+
+/** The `PasswordWidget` component uses the `BaseInputTemplate` changing the type to `password`.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function PasswordWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: WidgetProps<T, S, F>) {
+  const { options, registry } = props;
+  const BaseInputTemplate = getTemplate<'BaseInputTemplate', T, S, F>('BaseInputTemplate', registry, options);
+  return <BaseInputTemplate type='password' {...props} />;
+}

package/src/components/widgets/RadioWidget.tsx

@@ -0,0 +1,88 @@
+import { FocusEvent, useCallback } from 'react';
+import {
+  ariaDescribedByIds,
+  enumOptionsIsSelected,
+  enumOptionsValueForIndex,
+  optionId,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from '@rjsf/utils';
+
+/** The `RadioWidget` is a widget for rendering a radio group.
+ *  It is typically used with a string property constrained with enum options.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  options,
+  value,
+  required,
+  disabled,
+  readonly,
+  autofocus = false,
+  onBlur,
+  onFocus,
+  onChange,
+  id,
+}: WidgetProps<T, S, F>) {
+  const { enumOptions, enumDisabled, inline, emptyValue } = options;
+
+  const handleBlur = useCallback(
+    ({ target: { value } }: FocusEvent<HTMLInputElement>) =>
+      onBlur(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue)),
+    [onBlur, id]
+  );
+
+  const handleFocus = useCallback(
+    ({ target: { value } }: FocusEvent<HTMLInputElement>) =>
+      onFocus(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue)),
+    [onFocus, id]
+  );
+
+  return (
+    <div className='field-radio-group' id={id}>
+      {Array.isArray(enumOptions) &&
+        enumOptions.map((option, i) => {
+          const checked = enumOptionsIsSelected<S>(option.value, value);
+          const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+          const disabledCls = disabled || itemDisabled || readonly ? 'disabled' : '';
+
+          const handleChange = () => onChange(option.value);
+
+          const radio = (
+            <span>
+              <input
+                type='radio'
+                id={optionId(id, i)}
+                checked={checked}
+                name={id}
+                required={required}
+                value={String(i)}
+                disabled={disabled || itemDisabled || readonly}
+                autoFocus={autofocus && i === 0}
+                onChange={handleChange}
+                onBlur={handleBlur}
+                onFocus={handleFocus}
+                aria-describedby={ariaDescribedByIds<T>(id)}
+              />
+              <span>{option.label}</span>
+            </span>
+          );
+
+          return inline ? (
+            <label key={i} className={`radio-inline ${disabledCls}`}>
+              {radio}
+            </label>
+          ) : (
+            <div key={i} className={`radio ${disabledCls}`}>
+              <label>{radio}</label>
+            </div>
+          );
+        })}
+    </div>
+  );
+}
+
+export default RadioWidget;

package/src/components/widgets/RangeWidget.tsx

@@ -0,0 +1,23 @@
+import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+
+/** The `RangeWidget` component uses the `BaseInputTemplate` changing the type to `range` and wrapping the result
+ * in a div, with the value along side it.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: WidgetProps<T, S, F>
+) {
+  const {
+    value,
+    registry: {
+      templates: { BaseInputTemplate },
+    },
+  } = props;
+  return (
+    <div className='field-range-wrapper'>
+      <BaseInputTemplate type='range' {...props} />
+      <span className='range-view'>{value}</span>
+    </div>
+  );
+}

package/src/components/widgets/SelectWidget.tsx

@@ -0,0 +1,100 @@
+import { ChangeEvent, FocusEvent, SyntheticEvent, useCallback } from 'react';
+import {
+  ariaDescribedByIds,
+  enumOptionsIndexForValue,
+  enumOptionsValueForIndex,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from '@rjsf/utils';
+
+function getValue(event: SyntheticEvent<HTMLSelectElement>, multiple: boolean) {
+  if (multiple) {
+    return Array.from((event.target as HTMLSelectElement).options)
+      .slice()
+      .filter((o) => o.selected)
+      .map((o) => o.value);
+  }
+  return (event.target as HTMLSelectElement).value;
+}
+
+/** The `SelectWidget` is a widget for rendering dropdowns.
+ *  It is typically used with string properties constrained with enum options.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  schema,
+  id,
+  options,
+  value,
+  required,
+  disabled,
+  readonly,
+  multiple = false,
+  autofocus = false,
+  onChange,
+  onBlur,
+  onFocus,
+  placeholder,
+}: WidgetProps<T, S, F>) {
+  const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
+  const emptyValue = multiple ? [] : '';
+
+  const handleFocus = useCallback(
+    (event: FocusEvent<HTMLSelectElement>) => {
+      const newValue = getValue(event, multiple);
+      return onFocus(id, enumOptionsValueForIndex<S>(newValue, enumOptions, optEmptyVal));
+    },
+    [onFocus, id, schema, multiple, options]
+  );
+
+  const handleBlur = useCallback(
+    (event: FocusEvent<HTMLSelectElement>) => {
+      const newValue = getValue(event, multiple);
+      return onBlur(id, enumOptionsValueForIndex<S>(newValue, enumOptions, optEmptyVal));
+    },
+    [onBlur, id, schema, multiple, options]
+  );
+
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLSelectElement>) => {
+      const newValue = getValue(event, multiple);
+      return onChange(enumOptionsValueForIndex<S>(newValue, enumOptions, optEmptyVal));
+    },
+    [onChange, schema, multiple, options]
+  );
+
+  const selectedIndexes = enumOptionsIndexForValue<S>(value, enumOptions, multiple);
+
+  return (
+    <select
+      id={id}
+      name={id}
+      multiple={multiple}
+      className='form-control'
+      value={typeof selectedIndexes === 'undefined' ? emptyValue : selectedIndexes}
+      required={required}
+      disabled={disabled || readonly}
+      autoFocus={autofocus}
+      onBlur={handleBlur}
+      onFocus={handleFocus}
+      onChange={handleChange}
+      aria-describedby={ariaDescribedByIds<T>(id)}
+    >
+      {!multiple && schema.default === undefined && <option value=''>{placeholder}</option>}
+      {Array.isArray(enumOptions) &&
+        enumOptions.map(({ value, label }, i) => {
+          const disabled = enumDisabled && enumDisabled.indexOf(value) !== -1;
+          return (
+            <option key={i} value={String(i)} disabled={disabled}>
+              {label}
+            </option>
+          );
+        })}
+    </select>
+  );
+}
+
+export default SelectWidget;