@rjsf/core 5.11.2 → 5.12.0

package/src/components/fields/BooleanField.tsx

@@ -0,0 +1,114 @@
+import {
+  getWidget,
+  getUiOptions,
+  optionsList,
+  FieldProps,
+  FormContextType,
+  EnumOptionsType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  TranslatableString,
+} from '@rjsf/utils';
+import isObject from 'lodash/isObject';
+
+/** The `BooleanField` component is used to render a field in the schema is boolean. It constructs `enumOptions` for the
+ * two boolean values based on the various alternatives in the schema.
+ *
+ * @param props - The `FieldProps` for this template
+ */
+function BooleanField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: FieldProps<T, S, F>
+) {
+  const {
+    schema,
+    name,
+    uiSchema,
+    idSchema,
+    formData,
+    registry,
+    required,
+    disabled,
+    readonly,
+    autofocus,
+    onChange,
+    onFocus,
+    onBlur,
+    rawErrors,
+  } = props;
+  const { title } = schema;
+  const { widgets, formContext, translateString, globalUiOptions } = registry;
+  const {
+    widget = 'checkbox',
+    title: uiTitle,
+    // Unlike the other fields, don't use `getDisplayLabel()` since it always returns false for the boolean type
+    label: displayLabel = true,
+    ...options
+  } = getUiOptions<T, S, F>(uiSchema, globalUiOptions);
+  const Widget = getWidget(schema, widget, widgets);
+  const yes = translateString(TranslatableString.YesLabel);
+  const no = translateString(TranslatableString.NoLabel);
+  let enumOptions: EnumOptionsType<S>[] | undefined;
+  const label = uiTitle ?? title ?? name;
+  if (Array.isArray(schema.oneOf)) {
+    enumOptions = optionsList<S>({
+      oneOf: schema.oneOf
+        .map((option) => {
+          if (isObject(option)) {
+            return {
+              ...option,
+              title: option.title || (option.const === true ? yes : no),
+            };
+          }
+          return undefined;
+        })
+        .filter((o: any) => o) as S[], // cast away the error that typescript can't grok is fixed
+    } as unknown as S);
+  } else {
+    // We deprecated enumNames in v5. It's intentionally omitted from RSJFSchema type, so we need to cast here.
+    const schemaWithEnumNames = schema as S & { enumNames?: string[] };
+    const enums = schema.enum ?? [true, false];
+    if (!schemaWithEnumNames.enumNames && enums.length === 2 && enums.every((v: any) => typeof v === 'boolean')) {
+      enumOptions = [
+        {
+          value: enums[0],
+          label: enums[0] ? yes : no,
+        },
+        {
+          value: enums[1],
+          label: enums[1] ? yes : no,
+        },
+      ];
+    } else {
+      enumOptions = optionsList<S>({
+        enum: enums,
+        // NOTE: enumNames is deprecated, but still supported for now.
+        enumNames: schemaWithEnumNames.enumNames,
+      } as unknown as S);
+    }
+  }
+
+  return (
+    <Widget
+      options={{ ...options, enumOptions }}
+      schema={schema}
+      uiSchema={uiSchema}
+      id={idSchema.$id}
+      name={name}
+      onChange={onChange}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      label={label}
+      hideLabel={!displayLabel}
+      value={formData}
+      required={required}
+      disabled={disabled}
+      readonly={readonly}
+      registry={registry}
+      formContext={formContext}
+      autofocus={autofocus}
+      rawErrors={rawErrors}
+    />
+  );
+}
+
+export default BooleanField;

package/src/components/fields/MultiSchemaField.tsx

@@ -0,0 +1,221 @@
+import { Component } from 'react';
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+import omit from 'lodash/omit';
+import unset from 'lodash/unset';
+import {
+  ADDITIONAL_PROPERTY_FLAG,
+  deepEquals,
+  ERRORS_KEY,
+  FieldProps,
+  FormContextType,
+  getDiscriminatorFieldFromSchema,
+  getUiOptions,
+  getWidget,
+  mergeSchemas,
+  RJSFSchema,
+  StrictRJSFSchema,
+  TranslatableString,
+} from '@rjsf/utils';
+
+/** Type used for the state of the `AnyOfField` component */
+type AnyOfFieldState<S extends StrictRJSFSchema = RJSFSchema> = {
+  /** The currently selected option */
+  selectedOption: number;
+  /** The option schemas after retrieving all $refs */
+  retrievedOptions: S[];
+};
+
+/** The `AnyOfField` component is used to render a field in the schema that is an `anyOf`, `allOf` or `oneOf`. It tracks
+ * the currently selected option and cleans up any irrelevant data in `formData`.
+ *
+ * @param props - The `FieldProps` for this template
+ */
+class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> extends Component<
+  FieldProps<T, S, F>,
+  AnyOfFieldState<S>
+> {
+  /** Constructs an `AnyOfField` with the given `props` to initialize the initially selected option in state
+   *
+   * @param props - The `FieldProps` for this template
+   */
+  constructor(props: FieldProps<T, S, F>) {
+    super(props);
+
+    const {
+      formData,
+      options,
+      registry: { schemaUtils },
+    } = this.props;
+    // cache the retrieved options in state in case they have $refs to save doing it later
+    const retrievedOptions = options.map((opt: S) => schemaUtils.retrieveSchema(opt, formData));
+
+    this.state = {
+      retrievedOptions,
+      selectedOption: this.getMatchingOption(0, formData, retrievedOptions),
+    };
+  }
+
+  /** React lifecycle method that is called when the props and/or state for this component is updated. It recomputes the
+   * currently selected option based on the overall `formData`
+   *
+   * @param prevProps - The previous `FieldProps` for this template
+   * @param prevState - The previous `AnyOfFieldState` for this template
+   */
+  componentDidUpdate(prevProps: Readonly<FieldProps<T, S, F>>, prevState: Readonly<AnyOfFieldState>) {
+    const { formData, options, idSchema } = this.props;
+    const { selectedOption } = this.state;
+    let newState = this.state;
+    if (!deepEquals(prevProps.options, options)) {
+      const {
+        registry: { schemaUtils },
+      } = this.props;
+      // re-cache the retrieved options in state in case they have $refs to save doing it later
+      const retrievedOptions = options.map((opt: S) => schemaUtils.retrieveSchema(opt, formData));
+      newState = { selectedOption, retrievedOptions };
+    }
+    if (!deepEquals(formData, prevProps.formData) && idSchema.$id === prevProps.idSchema.$id) {
+      const { retrievedOptions } = newState;
+      const matchingOption = this.getMatchingOption(selectedOption, formData, retrievedOptions);
+
+      if (prevState && matchingOption !== selectedOption) {
+        newState = { selectedOption: matchingOption, retrievedOptions };
+      }
+    }
+    if (newState !== this.state) {
+      this.setState(newState);
+    }
+  }
+
+  /** Determines the best matching option for the given `formData` and `options`.
+   *
+   * @param formData - The new formData
+   * @param options - The list of options to choose from
+   * @return - The index of the `option` that best matches the `formData`
+   */
+  getMatchingOption(selectedOption: number, formData: T | undefined, options: S[]) {
+    const {
+      schema,
+      registry: { schemaUtils },
+    } = this.props;
+
+    const discriminator = getDiscriminatorFieldFromSchema<S>(schema);
+    const option = schemaUtils.getClosestMatchingOption(formData, options, selectedOption, discriminator);
+    return option;
+  }
+
+  /** Callback handler to remember what the currently selected option is. In addition to that the `formData` is updated
+   * to remove properties that are not part of the newly selected option schema, and then the updated data is passed to
+   * the `onChange` handler.
+   *
+   * @param option - The new option value being selected
+   */
+  onOptionChange = (option?: string) => {
+    const { selectedOption, retrievedOptions } = this.state;
+    const { formData, onChange, registry } = this.props;
+    const { schemaUtils } = registry;
+    const intOption = option !== undefined ? parseInt(option, 10) : -1;
+    if (intOption === selectedOption) {
+      return;
+    }
+    const newOption = intOption >= 0 ? retrievedOptions[intOption] : undefined;
+    const oldOption = selectedOption >= 0 ? retrievedOptions[selectedOption] : undefined;
+
+    let newFormData = schemaUtils.sanitizeDataForNewSchema(newOption, oldOption, formData);
+    if (newFormData && newOption) {
+      // Call getDefaultFormState to make sure defaults are populated on change. Pass "excludeObjectChildren"
+      // so that only the root objects themselves are created without adding undefined children properties
+      newFormData = schemaUtils.getDefaultFormState(newOption, newFormData, 'excludeObjectChildren') as T;
+    }
+    onChange(newFormData, undefined, this.getFieldId());
+
+    this.setState({ selectedOption: intOption });
+  };
+
+  getFieldId() {
+    const { idSchema, schema } = this.props;
+    return `${idSchema.$id}${schema.oneOf ? '__oneof_select' : '__anyof_select'}`;
+  }
+
+  /** Renders the `AnyOfField` selector along with a `SchemaField` for the value of the `formData`
+   */
+  render() {
+    const {
+      name,
+      disabled = false,
+      errorSchema = {},
+      formContext,
+      onBlur,
+      onFocus,
+      registry,
+      schema,
+      uiSchema,
+    } = this.props;
+
+    const { widgets, fields, translateString, globalUiOptions, schemaUtils } = registry;
+    const { SchemaField: _SchemaField } = fields;
+    const { selectedOption, retrievedOptions } = this.state;
+    const {
+      widget = 'select',
+      placeholder,
+      autofocus,
+      autocomplete,
+      title = schema.title,
+      ...uiOptions
+    } = getUiOptions<T, S, F>(uiSchema, globalUiOptions);
+    const Widget = getWidget<T, S, F>({ type: 'number' }, widget, widgets);
+    const rawErrors = get(errorSchema, ERRORS_KEY, []);
+    const fieldErrorSchema = omit(errorSchema, [ERRORS_KEY]);
+    const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
+
+    const option = selectedOption >= 0 ? retrievedOptions[selectedOption] || null : null;
+    let optionSchema: S;
+
+    if (option) {
+      const { oneOf, anyOf, ...remaining } = schema;
+      // Merge in all the non-oneOf/anyOf properties and also skip the special ADDITIONAL_PROPERTY_FLAG property
+      unset(remaining, ADDITIONAL_PROPERTY_FLAG);
+      optionSchema = !isEmpty(remaining) ? (mergeSchemas(remaining, option) as S) : option;
+    }
+
+    const translateEnum: TranslatableString = title
+      ? TranslatableString.TitleOptionPrefix
+      : TranslatableString.OptionPrefix;
+    const translateParams = title ? [title] : [];
+    const enumOptions = retrievedOptions.map((opt: { title?: string }, index: number) => ({
+      label: opt.title || translateString(translateEnum, translateParams.concat(String(index + 1))),
+      value: index,
+    }));
+
+    return (
+      <div className='panel panel-default panel-body'>
+        <div className='form-group'>
+          <Widget
+            id={this.getFieldId()}
+            name={`${name}${schema.oneOf ? '__oneof_select' : '__anyof_select'}`}
+            schema={{ type: 'number', default: 0 } as S}
+            onChange={this.onOptionChange}
+            onBlur={onBlur}
+            onFocus={onFocus}
+            disabled={disabled || isEmpty(enumOptions)}
+            multiple={false}
+            rawErrors={rawErrors}
+            errorSchema={fieldErrorSchema}
+            value={selectedOption >= 0 ? selectedOption : undefined}
+            options={{ enumOptions, ...uiOptions }}
+            registry={registry}
+            formContext={formContext}
+            placeholder={placeholder}
+            autocomplete={autocomplete}
+            autofocus={autofocus}
+            label={title ?? name}
+            hideLabel={!displayLabel}
+          />
+        </div>
+        {option !== null && <_SchemaField {...this.props} schema={optionSchema!} />}
+      </div>
+    );
+  }
+}
+
+export default AnyOfField;

package/src/components/fields/NullField.tsx

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+import { FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+/** The `NullField` component is used to render a field in the schema is null. It also ensures that the `formData` is
+ * also set to null if it has no value.
+ *
+ * @param props - The `FieldProps` for this template
+ */
+function NullField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: FieldProps<T, S, F>
+) {
+  const { formData, onChange } = props;
+  useEffect(() => {
+    if (formData === undefined) {
+      onChange(null as unknown as T);
+    }
+  }, [formData, onChange]);
+
+  return null;
+}
+
+export default NullField;

package/src/components/fields/NumberField.tsx

@@ -0,0 +1,86 @@
+import { useState, useCallback } from 'react';
+import { asNumber, FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+// Matches a string that ends in a . character, optionally followed by a sequence of
+// digits followed by any number of 0 characters up until the end of the line.
+// Ensuring that there is at least one prefixed character is important so that
+// you don't incorrectly match against "0".
+const trailingCharMatcherWithPrefix = /\.([0-9]*0)*$/;
+
+// This is used for trimming the trailing 0 and . characters without affecting
+// the rest of the string. Its possible to use one RegEx with groups for this
+// functionality, but it is fairly complex compared to simply defining two
+// different matchers.
+const trailingCharMatcher = /[0.]0*$/;
+
+/**
+ * The NumberField class has some special handling for dealing with trailing
+ * decimal points and/or zeroes. This logic is designed to allow trailing values
+ * to be visible in the input element, but not be represented in the
+ * corresponding form data.
+ *
+ * The algorithm is as follows:
+ *
+ * 1. When the input value changes the value is cached in the component state
+ *
+ * 2. The value is then normalized, removing trailing decimal points and zeros,
+ *    then passed to the "onChange" callback
+ *
+ * 3. When the component is rendered, the formData value is checked against the
+ *    value cached in the state. If it matches the cached value, the cached
+ *    value is passed to the input instead of the formData value
+ */
+function NumberField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: FieldProps<T, S, F>
+) {
+  const { registry, onChange, formData, value: initialValue } = props;
+  const [lastValue, setLastValue] = useState(initialValue);
+  const { StringField } = registry.fields;
+
+  let value = formData;
+
+  /** Handle the change from the `StringField` to properly convert to a number
+   *
+   * @param value - The current value for the change occurring
+   */
+  const handleChange = useCallback(
+    (value: FieldProps<T, S, F>['value']) => {
+      // Cache the original value in component state
+      setLastValue(value);
+
+      // Normalize decimals that don't start with a zero character in advance so
+      // that the rest of the normalization logic is simpler
+      if (`${value}`.charAt(0) === '.') {
+        value = `0${value}`;
+      }
+
+      // Check that the value is a string (this can happen if the widget used is a
+      // <select>, due to an enum declaration etc) then, if the value ends in a
+      // trailing decimal point or multiple zeroes, strip the trailing values
+      const processed =
+        typeof value === 'string' && value.match(trailingCharMatcherWithPrefix)
+          ? asNumber(value.replace(trailingCharMatcher, ''))
+          : asNumber(value);
+
+      onChange(processed as unknown as T);
+    },
+    [onChange]
+  );
+
+  if (typeof lastValue === 'string' && typeof value === 'number') {
+    // Construct a regular expression that checks for a string that consists
+    // of the formData value suffixed with zero or one '.' characters and zero
+    // or more '0' characters
+    const re = new RegExp(`${value}`.replace('.', '\\.') + '\\.?0*$');
+
+    // If the cached "lastValue" is a match, use that instead of the formData
+    // value to prevent the input value from changing in the UI
+    if (lastValue.match(re)) {
+      value = lastValue as unknown as T;
+    }
+  }
+
+  return <StringField {...props} formData={value} onChange={handleChange} />;
+}
+
+export default NumberField;