@springmicro/forms 0.1.3

package/src/fields/BooleanField.tsx

@@ -0,0 +1,110 @@
+import React from "react";
+import type {
+  FieldProps,
+  EnumOptionsType,
+  RJSFSchema,
+  GenericObjectType,
+} from "@rjsf/utils";
+import { getWidget, getUiOptions, optionsList } 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, F extends GenericObjectType = any>(
+  props: FieldProps<T, F>
+) {
+  const {
+    schema,
+    name,
+    uiSchema,
+    idSchema,
+    formData,
+    registry,
+    required,
+    disabled,
+    readonly,
+    autofocus,
+    onChange,
+    onFocus,
+    onBlur,
+    rawErrors,
+  } = props;
+  const { title } = schema;
+  const { widgets, formContext } = registry;
+  const { widget = "checkbox", ...options } = getUiOptions<T, F>(uiSchema);
+  const Widget = getWidget(schema, widget, widgets);
+
+  let enumOptions: EnumOptionsType<any>[] | undefined;
+
+  if (Array.isArray(schema.oneOf)) {
+    enumOptions = optionsList({
+      oneOf: schema.oneOf
+        .map((option) => {
+          if (isObject(option)) {
+            return {
+              ...option,
+              // @ts-ignore
+              title: option.title || (option.const === true ? "Yes" : "No"),
+            };
+          }
+          return undefined;
+        })
+        .filter((o) => o) as any[], // cast away the error that typescript can't grok is fixed
+    }) as EnumOptionsType<any>[] | undefined;
+  } else {
+    // We deprecated enumNames in v5. It's intentionally omitted from RSJFSchema type, so we need to cast here.
+    const schemaWithEnumNames = schema as RJSFSchema & { enumNames?: string[] };
+    // @ts-ignore
+    schema.enum = schema.enum ?? [true, false];
+    if (
+      !schemaWithEnumNames.enumNames &&
+      schema.enum &&
+      schema.enum.length === 2 &&
+      schema.enum.every((v: any) => typeof v === "boolean")
+    ) {
+      enumOptions = [
+        {
+          value: schema.enum[0],
+          label: schema.enum[0] ? "Yes" : "No",
+        },
+        {
+          value: schema.enum[1],
+          label: schema.enum[1] ? "Yes" : "No",
+        },
+      ];
+    } else {
+      enumOptions = optionsList({
+        enum: schema.enum,
+        // NOTE: enumNames is deprecated, but still supported for now.
+        enumNames: schemaWithEnumNames.enumNames,
+      }) as EnumOptionsType<any>[] | undefined;
+    }
+  }
+
+  return (
+    <Widget
+      name={name}
+      options={{ ...options, enumOptions }}
+      schema={schema}
+      uiSchema={uiSchema}
+      id={idSchema && idSchema.$id}
+      onChange={onChange}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      label={title === undefined ? name : title}
+      value={formData}
+      required={required}
+      disabled={disabled}
+      readonly={readonly}
+      registry={registry}
+      formContext={formContext}
+      autofocus={autofocus}
+      rawErrors={rawErrors}
+    />
+  );
+}
+
+export default BooleanField;

package/src/fields/MultiSchemaField.tsx

@@ -0,0 +1,236 @@
+import React, { Component } from "react";
+import type { FieldProps, RJSFSchema, GenericObjectType } from "@rjsf/utils";
+import { getUiOptions, getWidget, guessType, deepEquals } from "@rjsf/utils";
+import unset from "lodash/unset";
+
+/** Type used for the state of the `AnyOfField` component */
+type AnyOfFieldState = {
+  /** The currently selected option */
+  selectedOption: number;
+};
+
+/** 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, F extends GenericObjectType = any> extends Component<
+  FieldProps<T, F>
+  // AnyOfFieldState
+> {
+  /** 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, F>) {
+    super(props);
+
+    const { formData, options } = this.props;
+
+    this.state = {
+      selectedOption: this.getMatchingOption(
+        0,
+        formData as unknown as T,
+        options
+      ),
+    };
+  }
+
+  /** React lifecycle methos 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, F>>,
+    prevState: Readonly<AnyOfFieldState>
+  ) {
+    const { formData, options, idSchema } = this.props;
+    // @ts-ignore
+    const { selectedOption } = this.state;
+    if (
+      !deepEquals(formData, prevProps.formData) &&
+      idSchema.$id === prevProps.idSchema.$id
+    ) {
+      const matchingOption = this.getMatchingOption(
+        selectedOption,
+        // @ts-ignore
+        formData,
+        options
+      );
+
+      if (!prevState || matchingOption === selectedOption) {
+        return;
+      }
+
+      this.setState({
+        selectedOption: matchingOption,
+      });
+    }
+  }
+
+  /** 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,
+    options: RJSFSchema[]
+  ) {
+    const { schemaUtils } = this.props.registry;
+    // @ts-ignore
+    const option = schemaUtils.getMatchingOption(formData, options);
+    if (option !== 0) {
+      return option;
+    }
+    // If the form data matches none of the options, use the currently selected
+    // option, assuming it's available; otherwise use the first option
+    return selectedOption || 0;
+  }
+
+  /** 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 -
+   */
+  onOptionChange = (option: any) => {
+    const selectedOption = parseInt(option, 10);
+    const { formData, onChange, options, registry } = this.props;
+    const { schemaUtils } = registry;
+    const newOption = schemaUtils.retrieveSchema(
+      options[selectedOption],
+      formData
+    );
+
+    // If the new option is of type object and the current data is an object,
+    // discard properties added using the old option.
+    let newFormData: T | undefined = undefined;
+    if (
+      guessType(formData) === "object" &&
+      (newOption.type === "object" || newOption.properties)
+    ) {
+      newFormData = Object.assign({}, formData);
+
+      const optionsToDiscard = options.slice();
+      optionsToDiscard.splice(selectedOption, 1);
+
+      // Discard any data added using other options
+      for (const option of optionsToDiscard) {
+        if (option.properties) {
+          for (const key in option.properties) {
+            // @ts-ignore
+            if (key in newFormData) {
+              unset(newFormData, key);
+            }
+          }
+        }
+      }
+    }
+    // Call getDefaultFormState to make sure defaults are populated on change.
+    onChange(
+      schemaUtils.getDefaultFormState(options[selectedOption], newFormData) as T
+    );
+
+    this.setState({
+      selectedOption: parseInt(option, 10),
+    });
+  };
+
+  /** Renders the `AnyOfField` selector along with a `SchemaField` for the value of the `formData`
+   */
+  render() {
+    const {
+      name,
+      baseType,
+      disabled = false,
+      readonly = false,
+      hideError = false,
+      errorSchema = {},
+      formData,
+      formContext,
+      idPrefix,
+      idSeparator,
+      idSchema,
+      onBlur,
+      onChange,
+      onFocus,
+      options,
+      registry,
+      uiSchema,
+      schema,
+    } = this.props;
+
+    const { widgets, fields } = registry;
+    const { SchemaField: _SchemaField } = fields;
+    // @ts-ignore
+    const { selectedOption } = this.state;
+    const { widget = "select", ...uiOptions } = getUiOptions<T, F>(uiSchema);
+    const Widget = getWidget<T, F>({ type: "number" }, widget, widgets);
+
+    const option = options[selectedOption] || null;
+    let optionSchema;
+
+    if (option) {
+      // If the subschema doesn't declare a type, infer the type from the
+      // parent schema
+      optionSchema = option.type
+        ? option
+        : Object.assign({}, option, { type: baseType });
+    }
+
+    const enumOptions = options.map((option: RJSFSchema, index: number) => ({
+      label: option.title || `Option ${index + 1}`,
+      value: index,
+    }));
+
+    return (
+      <div className="panel panel-default panel-body">
+        <div className="form-group">
+          <Widget
+            id={`${idSchema.$id}${
+              schema.oneOf ? "__oneof_select" : "__anyof_select"
+            }`}
+            // @ts-ignore
+            schema={{ type: "number", default: 0 }}
+            onChange={this.onOptionChange}
+            onBlur={onBlur}
+            onFocus={onFocus}
+            value={selectedOption}
+            options={{ enumOptions }}
+            registry={registry}
+            formContext={formContext}
+            {...uiOptions}
+            label=""
+          />
+        </div>
+        {option !== null && (
+          <_SchemaField
+            name={name}
+            schema={optionSchema}
+            uiSchema={uiSchema}
+            errorSchema={errorSchema}
+            idSchema={idSchema}
+            idPrefix={idPrefix}
+            idSeparator={idSeparator}
+            formData={formData}
+            formContext={formContext}
+            onChange={onChange}
+            onBlur={onBlur}
+            onFocus={onFocus}
+            registry={registry}
+            disabled={disabled}
+            readonly={readonly}
+            hideError={hideError}
+          />
+        )}
+      </div>
+    );
+  }
+}
+
+export default AnyOfField;

package/src/fields/NullField.tsx

@@ -0,0 +1,22 @@
+import { useEffect } from "react";
+import type { FieldProps, GenericObjectType } 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, F extends GenericObjectType = any>(
+  props: FieldProps<T, F>
+) {
+  const { formData, onChange } = props;
+  useEffect(() => {
+    if (formData === undefined) {
+      onChange(null as unknown as T);
+    }
+  }, [formData, onChange]);
+
+  return null;
+}
+
+export default NullField;

package/src/fields/NumberField.tsx

@@ -0,0 +1,87 @@
+import React, { useState, useCallback } from "react";
+import type { FieldProps, GenericObjectType } from "@rjsf/utils";
+import { asNumber } 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, F extends GenericObjectType = any>(
+  props: FieldProps<T, 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, 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;