@rjsf/core 5.11.2 → 5.12.0

package/src/components/fields/ObjectField.tsx

@@ -0,0 +1,331 @@
+import { Component } from 'react';
+import {
+  getTemplate,
+  getUiOptions,
+  orderProperties,
+  ErrorSchema,
+  FieldProps,
+  FormContextType,
+  GenericObjectType,
+  IdSchema,
+  RJSFSchema,
+  StrictRJSFSchema,
+  TranslatableString,
+  ADDITIONAL_PROPERTY_FLAG,
+  PROPERTIES_KEY,
+  REF_KEY,
+  ANY_OF_KEY,
+  ONE_OF_KEY,
+} from '@rjsf/utils';
+import Markdown from 'markdown-to-jsx';
+import get from 'lodash/get';
+import has from 'lodash/has';
+import isObject from 'lodash/isObject';
+import set from 'lodash/set';
+import unset from 'lodash/unset';
+
+/** Type used for the state of the `ObjectField` component */
+type ObjectFieldState = {
+  /** Flag indicating whether an additional property key was modified */
+  wasPropertyKeyModified: boolean;
+  /** The set of additional properties */
+  additionalProperties: object;
+};
+
+/** The `ObjectField` component is used to render a field in the schema that is of type `object`. It tracks whether an
+ * additional property key was modified and what it was modified to
+ *
+ * @param props - The `FieldProps` for this template
+ */
+class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> extends Component<
+  FieldProps<T, S, F>,
+  ObjectFieldState
+> {
+  /** Set up the initial state */
+  state = {
+    wasPropertyKeyModified: false,
+    additionalProperties: {},
+  };
+
+  /** Returns a flag indicating whether the `name` field is required in the object schema
+   *
+   * @param name - The name of the field to check for required-ness
+   * @returns - True if the field `name` is required, false otherwise
+   */
+  isRequired(name: string) {
+    const { schema } = this.props;
+    return Array.isArray(schema.required) && schema.required.indexOf(name) !== -1;
+  }
+
+  /** Returns the `onPropertyChange` handler for the `name` field. Handles the special case where a user is attempting
+   * to clear the data for a field added as an additional property. Calls the `onChange()` handler with the updated
+   * formData.
+   *
+   * @param name - The name of the property
+   * @param addedByAdditionalProperties - Flag indicating whether this property is an additional property
+   * @returns - The onPropertyChange callback for the `name` property
+   */
+  onPropertyChange = (name: string, addedByAdditionalProperties = false) => {
+    return (value: T | undefined, newErrorSchema?: ErrorSchema<T>, id?: string) => {
+      const { formData, onChange, errorSchema } = this.props;
+      if (value === undefined && addedByAdditionalProperties) {
+        // Don't set value = undefined for fields added by
+        // additionalProperties. Doing so removes them from the
+        // formData, which causes them to completely disappear
+        // (including the input field for the property name). Unlike
+        // fields which are "mandated" by the schema, these fields can
+        // be set to undefined by clicking a "delete field" button, so
+        // set empty values to the empty string.
+        value = '' as unknown as T;
+      }
+      const newFormData = { ...formData, [name]: value } as unknown as T;
+      onChange(
+        newFormData,
+        errorSchema &&
+          errorSchema && {
+            ...errorSchema,
+            [name]: newErrorSchema,
+          },
+        id
+      );
+    };
+  };
+
+  /** Returns a callback to handle the onDropPropertyClick event for the given `key` which removes the old `key` data
+   * and calls the `onChange` callback with it
+   *
+   * @param key - The key for which the drop callback is desired
+   * @returns - The drop property click callback
+   */
+  onDropPropertyClick = (key: string) => {
+    return (event: DragEvent) => {
+      event.preventDefault();
+      const { onChange, formData } = this.props;
+      const copiedFormData = { ...formData } as T;
+      unset(copiedFormData, key);
+      onChange(copiedFormData);
+    };
+  };
+
+  /** Computes the next available key name from the `preferredKey`, indexing through the already existing keys until one
+   * that is already not assigned is found.
+   *
+   * @param preferredKey - The preferred name of a new key
+   * @param [formData] - The form data in which to check if the desired key already exists
+   * @returns - The name of the next available key from `preferredKey`
+   */
+  getAvailableKey = (preferredKey: string, formData?: T) => {
+    const { uiSchema, registry } = this.props;
+    const { duplicateKeySuffixSeparator = '-' } = getUiOptions<T, S, F>(uiSchema, registry.globalUiOptions);
+
+    let index = 0;
+    let newKey = preferredKey;
+    while (has(formData, newKey)) {
+      newKey = `${preferredKey}${duplicateKeySuffixSeparator}${++index}`;
+    }
+    return newKey;
+  };
+
+  /** Returns a callback function that deals with the rename of a key for an additional property for a schema. That
+   * callback will attempt to rename the key and move the existing data to that key, calling `onChange` when it does.
+   *
+   * @param oldValue - The old value of a field
+   * @returns - The key change callback function
+   */
+  onKeyChange = (oldValue: any) => {
+    return (value: any, newErrorSchema: ErrorSchema<T>) => {
+      if (oldValue === value) {
+        return;
+      }
+      const { formData, onChange, errorSchema } = this.props;
+
+      value = this.getAvailableKey(value, formData);
+      const newFormData: GenericObjectType = {
+        ...(formData as GenericObjectType),
+      };
+      const newKeys: GenericObjectType = { [oldValue]: value };
+      const keyValues = Object.keys(newFormData).map((key) => {
+        const newKey = newKeys[key] || key;
+        return { [newKey]: newFormData[key] };
+      });
+      const renamedObj = Object.assign({}, ...keyValues);
+
+      this.setState({ wasPropertyKeyModified: true });
+
+      onChange(
+        renamedObj,
+        errorSchema &&
+          errorSchema && {
+            ...errorSchema,
+            [value]: newErrorSchema,
+          }
+      );
+    };
+  };
+
+  /** Returns a default value to be used for a new additional schema property of the given `type`
+   *
+   * @param type - The type of the new additional schema property
+   */
+  getDefaultValue(type?: RJSFSchema['type']) {
+    const {
+      registry: { translateString },
+    } = this.props;
+    switch (type) {
+      case 'array':
+        return [];
+      case 'boolean':
+        return false;
+      case 'null':
+        return null;
+      case 'number':
+        return 0;
+      case 'object':
+        return {};
+      case 'string':
+      default:
+        // We don't have a datatype for some reason (perhaps additionalProperties was true)
+        return translateString(TranslatableString.NewStringDefault);
+    }
+  }
+
+  /** Handles the adding of a new additional property on the given `schema`. Calls the `onChange` callback once the new
+   * default data for that field has been added to the formData.
+   *
+   * @param schema - The schema element to which the new property is being added
+   */
+  handleAddClick = (schema: S) => () => {
+    if (!schema.additionalProperties) {
+      return;
+    }
+    const { formData, onChange, registry } = this.props;
+    const newFormData = { ...formData } as T;
+
+    let type: RJSFSchema['type'] = undefined;
+    if (isObject(schema.additionalProperties)) {
+      type = schema.additionalProperties.type;
+      let apSchema = schema.additionalProperties;
+      if (REF_KEY in apSchema) {
+        const { schemaUtils } = registry;
+        apSchema = schemaUtils.retrieveSchema({ $ref: apSchema[REF_KEY] } as S, formData);
+        type = apSchema.type;
+      }
+      if (!type && (ANY_OF_KEY in apSchema || ONE_OF_KEY in apSchema)) {
+        type = 'object';
+      }
+    }
+
+    const newKey = this.getAvailableKey('newKey', newFormData);
+    // Cast this to make the `set` work properly
+    set(newFormData as GenericObjectType, newKey, this.getDefaultValue(type));
+
+    onChange(newFormData);
+  };
+
+  /** Renders the `ObjectField` from the given props
+   */
+  render() {
+    const {
+      schema: rawSchema,
+      uiSchema = {},
+      formData,
+      errorSchema,
+      idSchema,
+      name,
+      required = false,
+      disabled = false,
+      readonly = false,
+      hideError,
+      idPrefix,
+      idSeparator,
+      onBlur,
+      onFocus,
+      registry,
+    } = this.props;
+
+    const { fields, formContext, schemaUtils, translateString, globalUiOptions } = registry;
+    const { SchemaField } = fields;
+    const schema: S = schemaUtils.retrieveSchema(rawSchema, formData);
+    const uiOptions = getUiOptions<T, S, F>(uiSchema, globalUiOptions);
+    const { properties: schemaProperties = {} } = schema;
+
+    const title = uiOptions.title ?? schema.title ?? name;
+    const description = uiOptions.description ?? schema.description;
+    let orderedProperties: string[];
+    try {
+      const properties = Object.keys(schemaProperties);
+      orderedProperties = orderProperties(properties, uiOptions.order);
+    } catch (err) {
+      return (
+        <div>
+          <p className='config-error' style={{ color: 'red' }}>
+            <Markdown>
+              {translateString(TranslatableString.InvalidObjectField, [name || 'root', (err as Error).message])}
+            </Markdown>
+          </p>
+          <pre>{JSON.stringify(schema)}</pre>
+        </div>
+      );
+    }
+
+    const Template = getTemplate<'ObjectFieldTemplate', T, S, F>('ObjectFieldTemplate', registry, uiOptions);
+
+    const templateProps = {
+      // getDisplayLabel() always returns false for object types, so just check the `uiOptions.label`
+      title: uiOptions.label === false ? '' : title,
+      description: uiOptions.label === false ? undefined : description,
+      properties: orderedProperties.map((name) => {
+        const addedByAdditionalProperties = has(schema, [PROPERTIES_KEY, name, ADDITIONAL_PROPERTY_FLAG]);
+        const fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[name];
+        const hidden = getUiOptions<T, S, F>(fieldUiSchema).widget === 'hidden';
+        const fieldIdSchema: IdSchema<T> = get(idSchema, [name], {});
+
+        return {
+          content: (
+            <SchemaField
+              key={name}
+              name={name}
+              required={this.isRequired(name)}
+              schema={get(schema, [PROPERTIES_KEY, name], {})}
+              uiSchema={fieldUiSchema}
+              errorSchema={get(errorSchema, name)}
+              idSchema={fieldIdSchema}
+              idPrefix={idPrefix}
+              idSeparator={idSeparator}
+              formData={get(formData, name)}
+              formContext={formContext}
+              wasPropertyKeyModified={this.state.wasPropertyKeyModified}
+              onKeyChange={this.onKeyChange(name)}
+              onChange={this.onPropertyChange(name, addedByAdditionalProperties)}
+              onBlur={onBlur}
+              onFocus={onFocus}
+              registry={registry}
+              disabled={disabled}
+              readonly={readonly}
+              hideError={hideError}
+              onDropPropertyClick={this.onDropPropertyClick}
+            />
+          ),
+          name,
+          readonly,
+          disabled,
+          required,
+          hidden,
+        };
+      }),
+      readonly,
+      disabled,
+      required,
+      idSchema,
+      uiSchema,
+      errorSchema,
+      schema,
+      formData,
+      formContext,
+      registry,
+    };
+    return <Template {...templateProps} onAddClick={this.handleAddClick} />;
+  }
+}
+
+export default ObjectField;

package/src/components/fields/SchemaField.tsx

@@ -0,0 +1,360 @@
+import { useCallback, Component } from 'react';
+import {
+  ADDITIONAL_PROPERTY_FLAG,
+  deepEquals,
+  descriptionId,
+  ErrorSchema,
+  FieldProps,
+  FieldTemplateProps,
+  FormContextType,
+  getSchemaType,
+  getTemplate,
+  getUiOptions,
+  ID_KEY,
+  IdSchema,
+  mergeObjects,
+  Registry,
+  RJSFSchema,
+  StrictRJSFSchema,
+  TranslatableString,
+  UI_OPTIONS_KEY,
+  UIOptionsType,
+} from '@rjsf/utils';
+import isObject from 'lodash/isObject';
+import omit from 'lodash/omit';
+import Markdown from 'markdown-to-jsx';
+
+/** The map of component type to FieldName */
+const COMPONENT_TYPES: { [key: string]: string } = {
+  array: 'ArrayField',
+  boolean: 'BooleanField',
+  integer: 'NumberField',
+  number: 'NumberField',
+  object: 'ObjectField',
+  string: 'StringField',
+  null: 'NullField',
+};
+
+/** Computes and returns which `Field` implementation to return in order to render the field represented by the
+ * `schema`. The `uiOptions` are used to alter what potential `Field` implementation is actually returned. If no
+ * appropriate `Field` implementation can be found then a wrapper around `UnsupportedFieldTemplate` is used.
+ *
+ * @param schema - The schema from which to obtain the type
+ * @param uiOptions - The UI Options that may affect the component decision
+ * @param idSchema - The id that is passed to the `UnsupportedFieldTemplate`
+ * @param registry - The registry from which fields and templates are obtained
+ * @returns - The `Field` component that is used to render the actual field data
+ */
+function getFieldComponent<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  schema: S,
+  uiOptions: UIOptionsType<T, S, F>,
+  idSchema: IdSchema<T>,
+  registry: Registry<T, S, F>
+) {
+  const field = uiOptions.field;
+  const { fields, translateString } = registry;
+  if (typeof field === 'function') {
+    return field;
+  }
+  if (typeof field === 'string' && field in fields) {
+    return fields[field];
+  }
+
+  const schemaType = getSchemaType(schema);
+  const type: string = Array.isArray(schemaType) ? schemaType[0] : schemaType || '';
+
+  const schemaId = schema.$id;
+
+  let componentName = COMPONENT_TYPES[type];
+  if (schemaId && schemaId in fields) {
+    componentName = schemaId;
+  }
+
+  // If the type is not defined and the schema uses 'anyOf' or 'oneOf', don't
+  // render a field and let the MultiSchemaField component handle the form display
+  if (!componentName && (schema.anyOf || schema.oneOf)) {
+    return () => null;
+  }
+
+  return componentName in fields
+    ? fields[componentName]
+    : () => {
+        const UnsupportedFieldTemplate = getTemplate<'UnsupportedFieldTemplate', T, S, F>(
+          'UnsupportedFieldTemplate',
+          registry,
+          uiOptions
+        );
+
+        return (
+          <UnsupportedFieldTemplate
+            schema={schema}
+            idSchema={idSchema}
+            reason={translateString(TranslatableString.UnknownFieldType, [String(schema.type)])}
+            registry={registry}
+          />
+        );
+      };
+}
+
+/** The `SchemaFieldRender` component is the work-horse of react-jsonschema-form, determining what kind of real field to
+ * render based on the `schema`, `uiSchema` and all the other props. It also deals with rendering the `anyOf` and
+ * `oneOf` fields.
+ *
+ * @param props - The `FieldProps` for this component
+ */
+function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: FieldProps<T, S, F>
+) {
+  const {
+    schema: _schema,
+    idSchema: _idSchema,
+    uiSchema,
+    formData,
+    errorSchema,
+    idPrefix,
+    idSeparator,
+    name,
+    onChange,
+    onKeyChange,
+    onDropPropertyClick,
+    required,
+    registry,
+    wasPropertyKeyModified = false,
+  } = props;
+  const { formContext, schemaUtils, globalUiOptions } = registry;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema, globalUiOptions);
+  const FieldTemplate = getTemplate<'FieldTemplate', T, S, F>('FieldTemplate', registry, uiOptions);
+  const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
+    'DescriptionFieldTemplate',
+    registry,
+    uiOptions
+  );
+  const FieldHelpTemplate = getTemplate<'FieldHelpTemplate', T, S, F>('FieldHelpTemplate', registry, uiOptions);
+  const FieldErrorTemplate = getTemplate<'FieldErrorTemplate', T, S, F>('FieldErrorTemplate', registry, uiOptions);
+  const schema = schemaUtils.retrieveSchema(_schema, formData);
+  const fieldId = _idSchema[ID_KEY];
+  const idSchema = mergeObjects(
+    schemaUtils.toIdSchema(schema, fieldId, formData, idPrefix, idSeparator),
+    _idSchema
+  ) as IdSchema<T>;
+
+  /** Intermediary `onChange` handler for field components that will inject the `id` of the current field into the
+   * `onChange` chain if it is not already being provided from a deeper level in the hierarchy
+   */
+  const handleFieldComponentChange = useCallback(
+    (formData: T | undefined, newErrorSchema?: ErrorSchema<T>, id?: string) => {
+      const theId = id || fieldId;
+      return onChange(formData, newErrorSchema, theId);
+    },
+    [fieldId, onChange]
+  );
+
+  const FieldComponent = getFieldComponent<T, S, F>(schema, uiOptions, idSchema, registry);
+  const disabled = Boolean(props.disabled || uiOptions.disabled);
+  const readonly = Boolean(props.readonly || uiOptions.readonly || props.schema.readOnly || schema.readOnly);
+  const uiSchemaHideError = uiOptions.hideError;
+  // Set hideError to the value provided in the uiSchema, otherwise stick with the prop to propagate to children
+  const hideError = uiSchemaHideError === undefined ? props.hideError : Boolean(uiSchemaHideError);
+  const autofocus = Boolean(props.autofocus || uiOptions.autofocus);
+  if (Object.keys(schema).length === 0) {
+    return null;
+  }
+
+  const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
+
+  const { __errors, ...fieldErrorSchema } = errorSchema || {};
+  // See #439: uiSchema: Don't pass consumed class names or style to child components
+  const fieldUiSchema = omit(uiSchema, ['ui:classNames', 'classNames', 'ui:style']);
+  if (UI_OPTIONS_KEY in fieldUiSchema) {
+    fieldUiSchema[UI_OPTIONS_KEY] = omit(fieldUiSchema[UI_OPTIONS_KEY], ['classNames', 'style']);
+  }
+
+  const field = (
+    <FieldComponent
+      {...props}
+      onChange={handleFieldComponentChange}
+      idSchema={idSchema}
+      schema={schema}
+      uiSchema={fieldUiSchema}
+      disabled={disabled}
+      readonly={readonly}
+      hideError={hideError}
+      autofocus={autofocus}
+      errorSchema={fieldErrorSchema}
+      formContext={formContext}
+      rawErrors={__errors}
+    />
+  );
+
+  const id = idSchema[ID_KEY];
+
+  // If this schema has a title defined, but the user has set a new key/label, retain their input.
+  let label;
+  if (wasPropertyKeyModified) {
+    label = name;
+  } else {
+    label = ADDITIONAL_PROPERTY_FLAG in schema ? name : uiOptions.title || props.schema.title || schema.title || name;
+  }
+
+  const description = uiOptions.description || props.schema.description || schema.description || '';
+
+  const richDescription = uiOptions.enableMarkdownInDescription ? <Markdown>{description}</Markdown> : description;
+
+  const help = uiOptions.help;
+  const hidden = uiOptions.widget === 'hidden';
+
+  const classNames = ['form-group', 'field', `field-${getSchemaType(schema)}`];
+  if (!hideError && __errors && __errors.length > 0) {
+    classNames.push('field-error has-error has-danger');
+  }
+  if (uiSchema?.classNames) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(
+        "'uiSchema.classNames' is deprecated and may be removed in a major release; Use 'ui:classNames' instead."
+      );
+    }
+    classNames.push(uiSchema.classNames);
+  }
+  if (uiOptions.classNames) {
+    classNames.push(uiOptions.classNames);
+  }
+
+  const helpComponent = (
+    <FieldHelpTemplate
+      help={help}
+      idSchema={idSchema}
+      schema={schema}
+      uiSchema={uiSchema}
+      hasErrors={!hideError && __errors && __errors.length > 0}
+      registry={registry}
+    />
+  );
+  /*
+   * AnyOf/OneOf errors handled by child schema
+   */
+  const errorsComponent =
+    hideError || schema.anyOf || schema.oneOf ? undefined : (
+      <FieldErrorTemplate
+        errors={__errors}
+        errorSchema={errorSchema}
+        idSchema={idSchema}
+        schema={schema}
+        uiSchema={uiSchema}
+        registry={registry}
+      />
+    );
+  const fieldProps: Omit<FieldTemplateProps<T, S, F>, 'children'> = {
+    description: (
+      <DescriptionFieldTemplate
+        id={descriptionId<T>(id)}
+        description={richDescription}
+        schema={schema}
+        uiSchema={uiSchema}
+        registry={registry}
+      />
+    ),
+    rawDescription: description,
+    help: helpComponent,
+    rawHelp: typeof help === 'string' ? help : undefined,
+    errors: errorsComponent,
+    rawErrors: hideError ? undefined : __errors,
+    id,
+    label,
+    hidden,
+    onChange,
+    onKeyChange,
+    onDropPropertyClick,
+    required,
+    disabled,
+    readonly,
+    hideError,
+    displayLabel,
+    classNames: classNames.join(' ').trim(),
+    style: uiOptions.style,
+    formContext,
+    formData,
+    schema,
+    uiSchema,
+    registry,
+  };
+
+  const _AnyOfField = registry.fields.AnyOfField;
+  const _OneOfField = registry.fields.OneOfField;
+  const isReplacingAnyOrOneOf = uiSchema?.['ui:field'] && uiSchema?.['ui:fieldReplacesAnyOrOneOf'] === true;
+
+  return (
+    <FieldTemplate {...fieldProps}>
+      <>
+        {field}
+        {/*
+        If the schema `anyOf` or 'oneOf' can be rendered as a select control, don't
+        render the selection and let `StringField` component handle
+        rendering
+      */}
+        {schema.anyOf && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema) && (
+          <_AnyOfField
+            name={name}
+            disabled={disabled}
+            readonly={readonly}
+            hideError={hideError}
+            errorSchema={errorSchema}
+            formData={formData}
+            formContext={formContext}
+            idPrefix={idPrefix}
+            idSchema={idSchema}
+            idSeparator={idSeparator}
+            onBlur={props.onBlur}
+            onChange={props.onChange}
+            onFocus={props.onFocus}
+            options={schema.anyOf.map((_schema) =>
+              schemaUtils.retrieveSchema(isObject(_schema) ? (_schema as S) : ({} as S), formData)
+            )}
+            registry={registry}
+            schema={schema}
+            uiSchema={uiSchema}
+          />
+        )}
+        {schema.oneOf && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema) && (
+          <_OneOfField
+            name={name}
+            disabled={disabled}
+            readonly={readonly}
+            hideError={hideError}
+            errorSchema={errorSchema}
+            formData={formData}
+            formContext={formContext}
+            idPrefix={idPrefix}
+            idSchema={idSchema}
+            idSeparator={idSeparator}
+            onBlur={props.onBlur}
+            onChange={props.onChange}
+            onFocus={props.onFocus}
+            options={schema.oneOf.map((_schema) =>
+              schemaUtils.retrieveSchema(isObject(_schema) ? (_schema as S) : ({} as S), formData)
+            )}
+            registry={registry}
+            schema={schema}
+            uiSchema={uiSchema}
+          />
+        )}
+      </>
+    </FieldTemplate>
+  );
+}
+
+/** The `SchemaField` component determines whether it is necessary to rerender the component based on any props changes
+ * and if so, calls the `SchemaFieldRender` component with the props.
+ */
+class SchemaField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> extends Component<
+  FieldProps<T, S, F>
+> {
+  shouldComponentUpdate(nextProps: Readonly<FieldProps<T, S, F>>) {
+    return !deepEquals(this.props, nextProps);
+  }
+
+  render() {
+    return <SchemaFieldRender<T, S, F> {...this.props} />;
+  }
+}
+
+export default SchemaField;