@rjsf/core 5.11.2 → 5.12.0

package/src/components/templates/FieldErrorTemplate.tsx

@@ -0,0 +1,33 @@
+import { errorId, FieldErrorProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+/** The `FieldErrorTemplate` component renders the errors local to the particular field
+ *
+ * @param props - The `FieldErrorProps` for the errors being rendered
+ */
+export default function FieldErrorTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: FieldErrorProps<T, S, F>) {
+  const { errors = [], idSchema } = props;
+  if (errors.length === 0) {
+    return null;
+  }
+  const id = errorId<T>(idSchema);
+
+  return (
+    <div>
+      <ul id={id} className='error-detail bs-callout bs-callout-info'>
+        {errors
+          .filter((elem) => !!elem)
+          .map((error, index: number) => {
+            return (
+              <li className='text-danger' key={index}>
+                {error}
+              </li>
+            );
+          })}
+      </ul>
+    </div>
+  );
+}

package/src/components/templates/FieldHelpTemplate.tsx

@@ -0,0 +1,29 @@
+import { helpId, FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+/** The `FieldHelpTemplate` component renders any help desired for a field
+ *
+ * @param props - The `FieldHelpProps` to be rendered
+ */
+export default function FieldHelpTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: FieldHelpProps<T, S, F>) {
+  const { idSchema, help } = props;
+  if (!help) {
+    return null;
+  }
+  const id = helpId<T>(idSchema);
+  if (typeof help === 'string') {
+    return (
+      <p id={id} className='help-block'>
+        {help}
+      </p>
+    );
+  }
+  return (
+    <div id={id} className='help-block'>
+      {help}
+    </div>
+  );
+}

package/src/components/templates/FieldTemplate/FieldTemplate.tsx

@@ -0,0 +1,41 @@
+import {
+  FieldTemplateProps,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  getTemplate,
+  getUiOptions,
+} from '@rjsf/utils';
+
+import Label from './Label';
+
+/** The `FieldTemplate` component is the template used by `SchemaField` to render any field. It renders the field
+ * content, (label, description, children, errors and help) inside of a `WrapIfAdditional` component.
+ *
+ * @param props - The `FieldTemplateProps` for this component
+ */
+export default function FieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: FieldTemplateProps<T, S, F>) {
+  const { id, label, children, errors, help, description, hidden, required, displayLabel, registry, uiSchema } = props;
+  const uiOptions = getUiOptions(uiSchema);
+  const WrapIfAdditionalTemplate = getTemplate<'WrapIfAdditionalTemplate', T, S, F>(
+    'WrapIfAdditionalTemplate',
+    registry,
+    uiOptions
+  );
+  if (hidden) {
+    return <div className='hidden'>{children}</div>;
+  }
+  return (
+    <WrapIfAdditionalTemplate {...props}>
+      {displayLabel && <Label label={label} required={required} id={id} />}
+      {displayLabel && description ? description : null}
+      {children}
+      {errors}
+      {help}
+    </WrapIfAdditionalTemplate>
+  );
+}

package/src/components/templates/FieldTemplate/Label.tsx

@@ -0,0 +1,27 @@
+const REQUIRED_FIELD_SYMBOL = '*';
+
+export type LabelProps = {
+  /** The label for the field */
+  label?: string;
+  /** A boolean value stating if the field is required */
+  required?: boolean;
+  /** The id of the input field being labeled */
+  id?: string;
+};
+
+/** Renders a label for a field
+ *
+ * @param props - The `LabelProps` for this component
+ */
+export default function Label(props: LabelProps) {
+  const { label, required, id } = props;
+  if (!label) {
+    return null;
+  }
+  return (
+    <label className='control-label' htmlFor={id}>
+      {label}
+      {required && <span className='required'>{REQUIRED_FIELD_SYMBOL}</span>}
+    </label>
+  );
+}

package/src/components/templates/FieldTemplate/index.ts

@@ -0,0 +1,3 @@
+import FieldTemplate from './FieldTemplate';
+
+export default FieldTemplate;

package/src/components/templates/ObjectFieldTemplate.tsx

@@ -0,0 +1,83 @@
+import {
+  FormContextType,
+  ObjectFieldTemplatePropertyType,
+  ObjectFieldTemplateProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+  canExpand,
+  descriptionId,
+  getTemplate,
+  getUiOptions,
+  titleId,
+} from '@rjsf/utils';
+
+/** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the
+ * title and description if available. If the object is expandable, then an `AddButton` is also rendered after all
+ * the properties.
+ *
+ * @param props - The `ObjectFieldTemplateProps` for this component
+ */
+export default function ObjectFieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: ObjectFieldTemplateProps<T, S, F>) {
+  const {
+    description,
+    disabled,
+    formData,
+    idSchema,
+    onAddClick,
+    properties,
+    readonly,
+    registry,
+    required,
+    schema,
+    title,
+    uiSchema,
+  } = props;
+  const options = getUiOptions<T, S, F>(uiSchema);
+  const TitleFieldTemplate = getTemplate<'TitleFieldTemplate', T, S, F>('TitleFieldTemplate', registry, options);
+  const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
+    'DescriptionFieldTemplate',
+    registry,
+    options
+  );
+  // Button templates are not overridden in the uiSchema
+  const {
+    ButtonTemplates: { AddButton },
+  } = registry.templates;
+  return (
+    <fieldset id={idSchema.$id}>
+      {title && (
+        <TitleFieldTemplate
+          id={titleId<T>(idSchema)}
+          title={title}
+          required={required}
+          schema={schema}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+      {description && (
+        <DescriptionFieldTemplate
+          id={descriptionId<T>(idSchema)}
+          description={description}
+          schema={schema}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+      {properties.map((prop: ObjectFieldTemplatePropertyType) => prop.content)}
+      {canExpand<T, S, F>(schema, uiSchema, formData) && (
+        <AddButton
+          className='object-property-expand'
+          onClick={onAddClick(schema)}
+          disabled={disabled || readonly}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+    </fieldset>
+  );
+}

package/src/components/templates/TitleField.tsx

@@ -0,0 +1,19 @@
+import { FormContextType, TitleFieldProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+const REQUIRED_FIELD_SYMBOL = '*';
+
+/** The `TitleField` is the template to use to render the title of a field
+ *
+ * @param props - The `TitleFieldProps` for this component
+ */
+export default function TitleField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: TitleFieldProps<T, S, F>
+) {
+  const { id, title, required } = props;
+  return (
+    <legend id={id}>
+      {title}
+      {required && <span className='required'>{REQUIRED_FIELD_SYMBOL}</span>}
+    </legend>
+  );
+}

package/src/components/templates/UnsupportedField.tsx

@@ -0,0 +1,37 @@
+import { FormContextType, RJSFSchema, StrictRJSFSchema, TranslatableString, UnsupportedFieldProps } from '@rjsf/utils';
+import Markdown from 'markdown-to-jsx';
+
+/** The `UnsupportedField` component is used to render a field in the schema is one that is not supported by
+ * react-jsonschema-form.
+ *
+ * @param props - The `FieldProps` for this template
+ */
+function UnsupportedField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: UnsupportedFieldProps<T, S, F>
+) {
+  const { schema, idSchema, reason, registry } = props;
+  const { translateString } = registry;
+  let translateEnum: TranslatableString = TranslatableString.UnsupportedField;
+  const translateParams: string[] = [];
+  if (idSchema && idSchema.$id) {
+    translateEnum = TranslatableString.UnsupportedFieldWithId;
+    translateParams.push(idSchema.$id);
+  }
+  if (reason) {
+    translateEnum =
+      translateEnum === TranslatableString.UnsupportedField
+        ? TranslatableString.UnsupportedFieldWithReason
+        : TranslatableString.UnsupportedFieldWithIdAndReason;
+    translateParams.push(reason);
+  }
+  return (
+    <div className='unsupported-field'>
+      <p>
+        <Markdown>{translateString(translateEnum, translateParams)}</Markdown>
+      </p>
+      {schema && <pre>{JSON.stringify(schema, null, 2)}</pre>}
+    </div>
+  );
+}
+
+export default UnsupportedField;

package/src/components/templates/WrapIfAdditionalTemplate.tsx

@@ -0,0 +1,80 @@
+import {
+  ADDITIONAL_PROPERTY_FLAG,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  TranslatableString,
+  WrapIfAdditionalTemplateProps,
+} from '@rjsf/utils';
+
+import Label from './FieldTemplate/Label';
+
+/** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are
+ * part of an `additionalProperties` part of a schema.
+ *
+ * @param props - The `WrapIfAdditionalProps` for this component
+ */
+export default function WrapIfAdditionalTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: WrapIfAdditionalTemplateProps<T, S, F>) {
+  const {
+    id,
+    classNames,
+    style,
+    disabled,
+    label,
+    onKeyChange,
+    onDropPropertyClick,
+    readonly,
+    required,
+    schema,
+    children,
+    uiSchema,
+    registry,
+  } = props;
+  const { templates, translateString } = registry;
+  // Button templates are not overridden in the uiSchema
+  const { RemoveButton } = templates.ButtonTemplates;
+  const keyLabel = translateString(TranslatableString.KeyLabel, [label]);
+  const additional = ADDITIONAL_PROPERTY_FLAG in schema;
+
+  if (!additional) {
+    return (
+      <div className={classNames} style={style}>
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <div className={classNames} style={style}>
+      <div className='row'>
+        <div className='col-xs-5 form-additional'>
+          <div className='form-group'>
+            <Label label={keyLabel} required={required} id={`${id}-key`} />
+            <input
+              className='form-control'
+              type='text'
+              id={`${id}-key`}
+              onBlur={(event) => onKeyChange(event.target.value)}
+              defaultValue={label}
+            />
+          </div>
+        </div>
+        <div className='form-additional form-group col-xs-5'>{children}</div>
+        <div className='col-xs-2'>
+          <RemoveButton
+            className='array-item-remove btn-block'
+            style={{ border: '0' }}
+            disabled={disabled || readonly}
+            onClick={onDropPropertyClick(label)}
+            uiSchema={uiSchema}
+            registry={registry}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/templates/index.ts

@@ -0,0 +1,43 @@
+import { FormContextType, RJSFSchema, StrictRJSFSchema, TemplatesType } from '@rjsf/utils';
+
+import ArrayFieldDescriptionTemplate from './ArrayFieldDescriptionTemplate';
+import ArrayFieldItemTemplate from './ArrayFieldItemTemplate';
+import ArrayFieldTemplate from './ArrayFieldTemplate';
+import ArrayFieldTitleTemplate from './ArrayFieldTitleTemplate';
+import BaseInputTemplate from './BaseInputTemplate';
+import ButtonTemplates from './ButtonTemplates';
+import DescriptionField from './DescriptionField';
+import ErrorList from './ErrorList';
+import FieldTemplate from './FieldTemplate';
+import FieldErrorTemplate from './FieldErrorTemplate';
+import FieldHelpTemplate from './FieldHelpTemplate';
+import ObjectFieldTemplate from './ObjectFieldTemplate';
+import TitleField from './TitleField';
+import UnsupportedField from './UnsupportedField';
+import WrapIfAdditionalTemplate from './WrapIfAdditionalTemplate';
+
+function templates<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(): TemplatesType<
+  T,
+  S,
+  F
+> {
+  return {
+    ArrayFieldDescriptionTemplate,
+    ArrayFieldItemTemplate,
+    ArrayFieldTemplate,
+    ArrayFieldTitleTemplate,
+    ButtonTemplates: ButtonTemplates<T, S, F>(),
+    BaseInputTemplate,
+    DescriptionFieldTemplate: DescriptionField,
+    ErrorListTemplate: ErrorList,
+    FieldTemplate,
+    FieldErrorTemplate,
+    FieldHelpTemplate,
+    ObjectFieldTemplate,
+    TitleFieldTemplate: TitleField,
+    UnsupportedFieldTemplate: UnsupportedField,
+    WrapIfAdditionalTemplate,
+  };
+}
+
+export default templates;

package/src/components/widgets/AltDateTimeWidget.tsx

@@ -0,0 +1,16 @@
+import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+
+/** The `AltDateTimeWidget` is an alternative widget for rendering datetime properties.
+ *  It uses the AltDateWidget for rendering, with the `time` prop set to true by default.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+function AltDateTimeWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  time = true,
+  ...props
+}: WidgetProps<T, S, F>) {
+  const { AltDateWidget } = props.registry.widgets;
+  return <AltDateWidget time={time} {...props} />;
+}
+
+export default AltDateTimeWidget;

package/src/components/widgets/AltDateWidget.tsx

@@ -0,0 +1,198 @@
+import { MouseEvent, useCallback, useEffect, useReducer, useState } from 'react';
+import {
+  ariaDescribedByIds,
+  parseDateString,
+  toDateString,
+  pad,
+  DateObject,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  TranslatableString,
+  WidgetProps,
+} from '@rjsf/utils';
+
+function rangeOptions(start: number, stop: number) {
+  const options = [];
+  for (let i = start; i <= stop; i++) {
+    options.push({ value: i, label: pad(i, 2) });
+  }
+  return options;
+}
+
+function readyForChange(state: DateObject) {
+  return Object.values(state).every((value) => value !== -1);
+}
+
+function dateElementProps(
+  state: DateObject,
+  time: boolean,
+  yearsRange: [number, number] = [1900, new Date().getFullYear() + 2]
+) {
+  const { year, month, day, hour, minute, second } = state;
+  const data = [
+    {
+      type: 'year',
+      range: yearsRange,
+      value: year,
+    },
+    { type: 'month', range: [1, 12], value: month },
+    { type: 'day', range: [1, 31], value: day },
+  ] as { type: string; range: [number, number]; value: number | undefined }[];
+  if (time) {
+    data.push(
+      { type: 'hour', range: [0, 23], value: hour },
+      { type: 'minute', range: [0, 59], value: minute },
+      { type: 'second', range: [0, 59], value: second }
+    );
+  }
+  return data;
+}
+
+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'
+> & {
+  rootId: string;
+  select: (property: keyof DateObject, value: any) => void;
+  type: string;
+  range: [number, number];
+};
+
+function DateElement<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  type,
+  range,
+  value,
+  select,
+  rootId,
+  name,
+  disabled,
+  readonly,
+  autofocus,
+  registry,
+  onBlur,
+  onFocus,
+}: DateElementProps<T, S, F>) {
+  const id = rootId + '_' + type;
+  const { SelectWidget } = registry.widgets;
+  return (
+    <SelectWidget
+      schema={{ type: 'integer' } as S}
+      id={id}
+      name={name}
+      className='form-control'
+      options={{ enumOptions: rangeOptions(range[0], range[1]) }}
+      placeholder={type}
+      value={value}
+      disabled={disabled}
+      readonly={readonly}
+      autofocus={autofocus}
+      onChange={(value: any) => select(type as keyof DateObject, value)}
+      onBlur={onBlur}
+      onFocus={onFocus}
+      registry={registry}
+      label=''
+      aria-describedby={ariaDescribedByIds<T>(rootId)}
+    />
+  );
+}
+
+/** The `AltDateWidget` is an alternative widget for rendering date properties.
+ * @param props - The `WidgetProps` for this component
+ */
+function AltDateWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  time = false,
+  disabled = false,
+  readonly = false,
+  autofocus = false,
+  options,
+  id,
+  name,
+  registry,
+  onBlur,
+  onFocus,
+  onChange,
+  value,
+}: WidgetProps<T, S, F>) {
+  const { translateString } = registry;
+  const [lastValue, setLastValue] = useState(value);
+  const [state, setState] = useReducer((state: DateObject, action: Partial<DateObject>) => {
+    return { ...state, ...action };
+  }, parseDateString(value, time));
+
+  useEffect(() => {
+    const stateValue = toDateString(state, time);
+    if (readyForChange(state) && stateValue !== value) {
+      // The user changed the date to a new valid data via the comboboxes, so call onChange
+      onChange(stateValue);
+    } else if (lastValue !== value) {
+      // We got a new value in the props
+      setLastValue(value);
+      setState(parseDateString(value, time));
+    }
+  }, [time, value, onChange, state, lastValue]);
+
+  const handleChange = useCallback((property: keyof DateObject, value: string) => {
+    setState({ [property]: value });
+  }, []);
+
+  const handleSetNow = useCallback(
+    (event: MouseEvent<HTMLAnchorElement>) => {
+      event.preventDefault();
+      if (disabled || readonly) {
+        return;
+      }
+      const nextState = parseDateString(new Date().toJSON(), time);
+      onChange(toDateString(nextState, time));
+    },
+    [disabled, readonly, time]
+  );
+
+  const handleClear = useCallback(
+    (event: MouseEvent<HTMLAnchorElement>) => {
+      event.preventDefault();
+      if (disabled || readonly) {
+        return;
+      }
+      onChange(undefined);
+    },
+    [disabled, readonly, onChange]
+  );
+
+  return (
+    <ul className='list-inline'>
+      {dateElementProps(state, time, options.yearsRange as [number, number] | undefined).map((elemProps, i) => (
+        <li className='list-inline-item' key={i}>
+          <DateElement
+            rootId={id}
+            name={name}
+            select={handleChange}
+            {...elemProps}
+            disabled={disabled}
+            readonly={readonly}
+            registry={registry}
+            onBlur={onBlur}
+            onFocus={onFocus}
+            autofocus={autofocus && i === 0}
+          />
+        </li>
+      ))}
+      {(options.hideNowButton !== 'undefined' ? !options.hideNowButton : true) && (
+        <li className='list-inline-item'>
+          <a href='#' className='btn btn-info btn-now' onClick={handleSetNow}>
+            {translateString(TranslatableString.NowLabel)}
+          </a>
+        </li>
+      )}
+      {(options.hideClearButton !== 'undefined' ? !options.hideClearButton : true) && (
+        <li className='list-inline-item'>
+          <a href='#' className='btn btn-warning btn-clear' onClick={handleClear}>
+            {translateString(TranslatableString.ClearLabel)}
+          </a>
+        </li>
+      )}
+    </ul>
+  );
+}
+
+export default AltDateWidget;