@rjsf/core 5.11.2 → 5.12.0

package/src/components/fields/StringField.tsx

@@ -0,0 +1,71 @@
+import {
+  getWidget,
+  getUiOptions,
+  optionsList,
+  hasWidget,
+  FieldProps,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
+
+/** The `StringField` component is used to render a schema field that represents a string type
+ *
+ * @param props - The `FieldProps` for this template
+ */
+function StringField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: FieldProps<T, S, F>
+) {
+  const {
+    schema,
+    name,
+    uiSchema,
+    idSchema,
+    formData,
+    required,
+    disabled = false,
+    readonly = false,
+    autofocus = false,
+    onChange,
+    onBlur,
+    onFocus,
+    registry,
+    rawErrors,
+  } = props;
+  const { title, format } = schema;
+  const { widgets, formContext, schemaUtils, globalUiOptions } = registry;
+  const enumOptions = schemaUtils.isSelect(schema) ? optionsList(schema) : undefined;
+  let defaultWidget = enumOptions ? 'select' : 'text';
+  if (format && hasWidget<T, S, F>(schema, format, widgets)) {
+    defaultWidget = format;
+  }
+  const { widget = defaultWidget, placeholder = '', title: uiTitle, ...options } = getUiOptions<T, S, F>(uiSchema);
+  const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
+  const label = uiTitle ?? title ?? name;
+  const Widget = getWidget<T, S, F>(schema, widget, widgets);
+  return (
+    <Widget
+      options={{ ...options, enumOptions }}
+      schema={schema}
+      uiSchema={uiSchema}
+      id={idSchema.$id}
+      name={name}
+      label={label}
+      hideLabel={!displayLabel}
+      value={formData}
+      onChange={onChange}
+      onBlur={onBlur}
+      onFocus={onFocus}
+      required={required}
+      disabled={disabled}
+      readonly={readonly}
+      formContext={formContext}
+      autofocus={autofocus}
+      registry={registry}
+      placeholder={placeholder}
+      rawErrors={rawErrors}
+    />
+  );
+}
+
+export default StringField;

package/src/components/fields/index.ts

@@ -0,0 +1,31 @@
+import { Field, FormContextType, RegistryFieldsType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+import ArrayField from './ArrayField';
+import BooleanField from './BooleanField';
+import MultiSchemaField from './MultiSchemaField';
+import NumberField from './NumberField';
+import ObjectField from './ObjectField';
+import SchemaField from './SchemaField';
+import StringField from './StringField';
+import NullField from './NullField';
+
+function fields<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(): RegistryFieldsType<T, S, F> {
+  return {
+    AnyOfField: MultiSchemaField,
+    ArrayField: ArrayField as unknown as Field<T, S, F>,
+    // ArrayField falls back to SchemaField if ArraySchemaField is not defined, which it isn't by default
+    BooleanField,
+    NumberField,
+    ObjectField,
+    OneOfField: MultiSchemaField,
+    SchemaField,
+    StringField,
+    NullField,
+  };
+}
+
+export default fields;

package/src/components/templates/ArrayFieldDescriptionTemplate.tsx

@@ -0,0 +1,41 @@
+import {
+  descriptionId,
+  getTemplate,
+  getUiOptions,
+  ArrayFieldDescriptionProps,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
+
+/** The `ArrayFieldDescriptionTemplate` component renders a `DescriptionFieldTemplate` with an `id` derived from
+ * the `idSchema`.
+ *
+ * @param props - The `ArrayFieldDescriptionProps` for the component
+ */
+export default function ArrayFieldDescriptionTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: ArrayFieldDescriptionProps<T, S, F>) {
+  const { idSchema, description, registry, schema, uiSchema } = props;
+  const options = getUiOptions<T, S, F>(uiSchema, registry.globalUiOptions);
+  const { label: displayLabel = true } = options;
+  if (!description || !displayLabel) {
+    return null;
+  }
+  const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
+    'DescriptionFieldTemplate',
+    registry,
+    options
+  );
+  return (
+    <DescriptionFieldTemplate
+      id={descriptionId<T>(idSchema)}
+      description={description}
+      schema={schema}
+      uiSchema={uiSchema}
+      registry={registry}
+    />
+  );
+}

package/src/components/templates/ArrayFieldItemTemplate.tsx

@@ -0,0 +1,90 @@
+import { CSSProperties } from 'react';
+import { ArrayFieldTemplateItemType, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+/** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
+ *
+ * @param props - The `ArrayFieldTemplateItemType` props for the component
+ */
+export default function ArrayFieldItemTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: ArrayFieldTemplateItemType<T, S, F>) {
+  const {
+    children,
+    className,
+    disabled,
+    hasToolbar,
+    hasMoveDown,
+    hasMoveUp,
+    hasRemove,
+    hasCopy,
+    index,
+    onCopyIndexClick,
+    onDropIndexClick,
+    onReorderClick,
+    readonly,
+    registry,
+    uiSchema,
+  } = props;
+  const { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } = registry.templates.ButtonTemplates;
+  const btnStyle: CSSProperties = {
+    flex: 1,
+    paddingLeft: 6,
+    paddingRight: 6,
+    fontWeight: 'bold',
+  };
+  return (
+    <div className={className}>
+      <div className={hasToolbar ? 'col-xs-9' : 'col-xs-12'}>{children}</div>
+      {hasToolbar && (
+        <div className='col-xs-3 array-item-toolbox'>
+          <div
+            className='btn-group'
+            style={{
+              display: 'flex',
+              justifyContent: 'space-around',
+            }}
+          >
+            {(hasMoveUp || hasMoveDown) && (
+              <MoveUpButton
+                style={btnStyle}
+                disabled={disabled || readonly || !hasMoveUp}
+                onClick={onReorderClick(index, index - 1)}
+                uiSchema={uiSchema}
+                registry={registry}
+              />
+            )}
+            {(hasMoveUp || hasMoveDown) && (
+              <MoveDownButton
+                style={btnStyle}
+                disabled={disabled || readonly || !hasMoveDown}
+                onClick={onReorderClick(index, index + 1)}
+                uiSchema={uiSchema}
+                registry={registry}
+              />
+            )}
+            {hasCopy && (
+              <CopyButton
+                style={btnStyle}
+                disabled={disabled || readonly}
+                onClick={onCopyIndexClick(index)}
+                uiSchema={uiSchema}
+                registry={registry}
+              />
+            )}
+            {hasRemove && (
+              <RemoveButton
+                style={btnStyle}
+                disabled={disabled || readonly}
+                onClick={onDropIndexClick(index)}
+                uiSchema={uiSchema}
+                registry={registry}
+              />
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/templates/ArrayFieldTemplate.tsx

@@ -0,0 +1,88 @@
+import {
+  getTemplate,
+  getUiOptions,
+  ArrayFieldTemplateProps,
+  ArrayFieldTemplateItemType,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
+
+/** The `ArrayFieldTemplate` component is the template used to render all items in an array.
+ *
+ * @param props - The `ArrayFieldTemplateItemType` props for the component
+ */
+export default function ArrayFieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: ArrayFieldTemplateProps<T, S, F>) {
+  const {
+    canAdd,
+    className,
+    disabled,
+    idSchema,
+    uiSchema,
+    items,
+    onAddClick,
+    readonly,
+    registry,
+    required,
+    schema,
+    title,
+  } = props;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const ArrayFieldDescriptionTemplate = getTemplate<'ArrayFieldDescriptionTemplate', T, S, F>(
+    'ArrayFieldDescriptionTemplate',
+    registry,
+    uiOptions
+  );
+  const ArrayFieldItemTemplate = getTemplate<'ArrayFieldItemTemplate', T, S, F>(
+    'ArrayFieldItemTemplate',
+    registry,
+    uiOptions
+  );
+  const ArrayFieldTitleTemplate = getTemplate<'ArrayFieldTitleTemplate', T, S, F>(
+    'ArrayFieldTitleTemplate',
+    registry,
+    uiOptions
+  );
+  // Button templates are not overridden in the uiSchema
+  const {
+    ButtonTemplates: { AddButton },
+  } = registry.templates;
+  return (
+    <fieldset className={className} id={idSchema.$id}>
+      <ArrayFieldTitleTemplate
+        idSchema={idSchema}
+        title={uiOptions.title || title}
+        required={required}
+        schema={schema}
+        uiSchema={uiSchema}
+        registry={registry}
+      />
+      <ArrayFieldDescriptionTemplate
+        idSchema={idSchema}
+        description={uiOptions.description || schema.description}
+        schema={schema}
+        uiSchema={uiSchema}
+        registry={registry}
+      />
+      <div className='row array-item-list'>
+        {items &&
+          items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
+            <ArrayFieldItemTemplate key={key} {...itemProps} />
+          ))}
+      </div>
+      {canAdd && (
+        <AddButton
+          className='array-item-add'
+          onClick={onAddClick}
+          disabled={disabled || readonly}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+    </fieldset>
+  );
+}

package/src/components/templates/ArrayFieldTitleTemplate.tsx

@@ -0,0 +1,43 @@
+import {
+  getTemplate,
+  getUiOptions,
+  titleId,
+  ArrayFieldTitleProps,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  TemplatesType,
+} from '@rjsf/utils';
+
+/** The `ArrayFieldTitleTemplate` component renders a `TitleFieldTemplate` with an `id` derived from
+ * the `idSchema`.
+ *
+ * @param props - The `ArrayFieldTitleProps` for the component
+ */
+export default function ArrayFieldTitleTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: ArrayFieldTitleProps<T, S, F>) {
+  const { idSchema, title, schema, uiSchema, required, registry } = props;
+  const options = getUiOptions<T, S, F>(uiSchema, registry.globalUiOptions);
+  const { label: displayLabel = true } = options;
+  if (!title || !displayLabel) {
+    return null;
+  }
+  const TitleFieldTemplate: TemplatesType<T, S, F>['TitleFieldTemplate'] = getTemplate<'TitleFieldTemplate', T, S, F>(
+    'TitleFieldTemplate',
+    registry,
+    options
+  );
+  return (
+    <TitleFieldTemplate
+      id={titleId<T>(idSchema)}
+      title={title}
+      required={required}
+      schema={schema}
+      uiSchema={uiSchema}
+      registry={registry}
+    />
+  );
+}

package/src/components/templates/BaseInputTemplate.tsx

@@ -0,0 +1,102 @@
+import { ChangeEvent, FocusEvent, useCallback } from 'react';
+import {
+  ariaDescribedByIds,
+  BaseInputTemplateProps,
+  examplesId,
+  getInputProps,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
+
+/** The `BaseInputTemplate` is the template to use to render the basic `<input>` component for the `core` theme.
+ * It is used as the template for rendering many of the <input> based widgets that differ by `type` and callbacks only.
+ * It can be customized/overridden for other themes or individual implementations as needed.
+ *
+ * @param props - The `WidgetProps` for this template
+ */
+export default function BaseInputTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: BaseInputTemplateProps<T, S, F>) {
+  const {
+    id,
+    name, // remove this from ...rest
+    value,
+    readonly,
+    disabled,
+    autofocus,
+    onBlur,
+    onFocus,
+    onChange,
+    onChangeOverride,
+    options,
+    schema,
+    uiSchema,
+    formContext,
+    registry,
+    rawErrors,
+    type,
+    hideLabel, // remove this from ...rest
+    hideError, // remove this from ...rest
+    ...rest
+  } = props;
+
+  // Note: since React 15.2.0 we can't forward unknown element attributes, so we
+  // exclude the "options" and "schema" ones here.
+  if (!id) {
+    console.log('No id for', props);
+    throw new Error(`no id for props ${JSON.stringify(props)}`);
+  }
+  const inputProps = {
+    ...rest,
+    ...getInputProps<T, S, F>(schema, type, options),
+  };
+
+  let inputValue;
+  if (inputProps.type === 'number' || inputProps.type === 'integer') {
+    inputValue = value || value === 0 ? value : '';
+  } else {
+    inputValue = value == null ? '' : value;
+  }
+
+  const _onChange = useCallback(
+    ({ target: { value } }: ChangeEvent<HTMLInputElement>) => onChange(value === '' ? options.emptyValue : value),
+    [onChange, options]
+  );
+  const _onBlur = useCallback(({ target: { value } }: FocusEvent<HTMLInputElement>) => onBlur(id, value), [onBlur, id]);
+  const _onFocus = useCallback(
+    ({ target: { value } }: FocusEvent<HTMLInputElement>) => onFocus(id, value),
+    [onFocus, id]
+  );
+
+  return (
+    <>
+      <input
+        id={id}
+        name={id}
+        className='form-control'
+        readOnly={readonly}
+        disabled={disabled}
+        autoFocus={autofocus}
+        value={inputValue}
+        {...inputProps}
+        list={schema.examples ? examplesId<T>(id) : undefined}
+        onChange={onChangeOverride || _onChange}
+        onBlur={_onBlur}
+        onFocus={_onFocus}
+        aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}
+      />
+      {Array.isArray(schema.examples) && (
+        <datalist key={`datalist_${id}`} id={examplesId<T>(id)}>
+          {(schema.examples as string[])
+            .concat(schema.default && !schema.examples.includes(schema.default) ? ([schema.default] as string[]) : [])
+            .map((example: any) => {
+              return <option key={example} value={example} />;
+            })}
+        </datalist>
+      )}
+    </>
+  );
+}

package/src/components/templates/ButtonTemplates/AddButton.tsx

@@ -0,0 +1,29 @@
+import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+
+import IconButton from './IconButton';
+
+/** The `AddButton` renders a button that represent the `Add` action on a form
+ */
+export default function AddButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  className,
+  onClick,
+  disabled,
+  registry,
+}: IconButtonProps<T, S, F>) {
+  const { translateString } = registry;
+  return (
+    <div className='row'>
+      <p className={`col-xs-3 col-xs-offset-9 text-right ${className}`}>
+        <IconButton
+          iconType='info'
+          icon='plus'
+          className='btn-add col-xs-12'
+          title={translateString(TranslatableString.AddButton)}
+          onClick={onClick}
+          disabled={disabled}
+          registry={registry}
+        />
+      </p>
+    </div>
+  );
+}

package/src/components/templates/ButtonTemplates/IconButton.tsx

@@ -0,0 +1,77 @@
+import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+
+export default function IconButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: IconButtonProps<T, S, F>
+) {
+  const { iconType = 'default', icon, className, uiSchema, registry, ...otherProps } = props;
+  return (
+    <button type='button' className={`btn btn-${iconType} ${className}`} {...otherProps}>
+      <i className={`glyphicon glyphicon-${icon}`} />
+    </button>
+  );
+}
+
+export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: IconButtonProps<T, S, F>
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return (
+    <IconButton
+      title={translateString(TranslatableString.CopyButton)}
+      className='array-item-copy'
+      {...props}
+      icon='copy'
+    />
+  );
+}
+
+export function MoveDownButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: IconButtonProps<T, S, F>
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return (
+    <IconButton
+      title={translateString(TranslatableString.MoveDownButton)}
+      className='array-item-move-down'
+      {...props}
+      icon='arrow-down'
+    />
+  );
+}
+
+export function MoveUpButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: IconButtonProps<T, S, F>
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return (
+    <IconButton
+      title={translateString(TranslatableString.MoveUpButton)}
+      className='array-item-move-up'
+      {...props}
+      icon='arrow-up'
+    />
+  );
+}
+
+export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: IconButtonProps<T, S, F>
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return (
+    <IconButton
+      title={translateString(TranslatableString.RemoveButton)}
+      className='array-item-remove'
+      {...props}
+      iconType='danger'
+      icon='remove'
+    />
+  );
+}

package/src/components/templates/ButtonTemplates/SubmitButton.tsx

@@ -0,0 +1,21 @@
+import { getSubmitButtonOptions, FormContextType, RJSFSchema, StrictRJSFSchema, SubmitButtonProps } from '@rjsf/utils';
+
+/** The `SubmitButton` renders a button that represent the `Submit` action on a form
+ */
+export default function SubmitButton<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({ uiSchema }: SubmitButtonProps<T, S, F>) {
+  const { submitText, norender, props: submitButtonProps = {} } = getSubmitButtonOptions<T, S, F>(uiSchema);
+  if (norender) {
+    return null;
+  }
+  return (
+    <div>
+      <button type='submit' {...submitButtonProps} className={`btn btn-info ${submitButtonProps.className || ''}`}>
+        {submitText}
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,22 @@
+import { FormContextType, RJSFSchema, StrictRJSFSchema, TemplatesType } from '@rjsf/utils';
+
+import SubmitButton from './SubmitButton';
+import AddButton from './AddButton';
+import { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } from './IconButton';
+
+function buttonTemplates<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(): TemplatesType<T, S, F>['ButtonTemplates'] {
+  return {
+    SubmitButton,
+    AddButton,
+    CopyButton,
+    MoveDownButton,
+    MoveUpButton,
+    RemoveButton,
+  };
+}
+
+export default buttonTemplates;

package/src/components/templates/DescriptionField.tsx

@@ -0,0 +1,29 @@
+import { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+/** The `DescriptionField` is the template to use to render the description of a field
+ *
+ * @param props - The `DescriptionFieldProps` for this component
+ */
+export default function DescriptionField<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: DescriptionFieldProps<T, S, F>) {
+  const { id, description } = props;
+  if (!description) {
+    return null;
+  }
+  if (typeof description === 'string') {
+    return (
+      <p id={id} className='field-description'>
+        {description}
+      </p>
+    );
+  } else {
+    return (
+      <div id={id} className='field-description'>
+        {description}
+      </div>
+    );
+  }
+}

package/src/components/templates/ErrorList.tsx

@@ -0,0 +1,35 @@
+import {
+  ErrorListProps,
+  FormContextType,
+  RJSFValidationError,
+  RJSFSchema,
+  StrictRJSFSchema,
+  TranslatableString,
+} from '@rjsf/utils';
+
+/** The `ErrorList` component is the template that renders the all the errors associated with the fields in the `Form`
+ *
+ * @param props - The `ErrorListProps` for this component
+ */
+export default function ErrorList<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  errors,
+  registry,
+}: ErrorListProps<T, S, F>) {
+  const { translateString } = registry;
+  return (
+    <div className='panel panel-danger errors'>
+      <div className='panel-heading'>
+        <h3 className='panel-title'>{translateString(TranslatableString.ErrorsLabel)}</h3>
+      </div>
+      <ul className='list-group'>
+        {errors.map((error: RJSFValidationError, i: number) => {
+          return (
+            <li key={i} className='list-group-item text-danger'>
+              {error.stack}
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}