Inject defaults in arrays (2) (rjsf-team#1499)

* Inject defaults in arrays When using dependencies in array items, defaults are now injected. This adjusts injecting arrays into the form data from defaults to be in line with the previous behaviour. So the defaults are injected when there is either no value defined in the form data or when an array is already set in the form data, injects only into existing entries. This makes sure that we don't change any existing behaviour by creating array entries where we did not create them before. For example for following schema: { "type": "array", "minItems": 2, "items": { "title": "asd", "type": "object", "properties": { "item": { "type": "string", "default": "foo" } } } } and following form data: [{}] The result will be (note how it did not full up the array to min items) [{ "item": "foo" }] * Remove redundant comment * Add documentation and example * Merge arrays defined in parent schema by overwriting same level arrays * fix typo * fix typos * wording changes Co-Authored-By: Dominik del Bondio <dominik.del.bondio@bitextender.com>

Author: epicfaace

docs/index.md

@@ -196,6 +196,31 @@ This component follows [JSON Schema](http://json-schema.org/documentation.html)
 
 * `"additionalProperties":false` produces incorrect schemas when used with [schema dependencies](#schema-dependencies). This library does not remove extra properties, which causes validation to fail. It is recommended to avoid setting `"additionalProperties":false` when you use schema dependencies. See [#848](https://github.com/mozilla-services/react-jsonschema-form/issues/848) [#902](https://github.com/mozilla-services/react-jsonschema-form/issues/902) [#992](https://github.com/mozilla-services/react-jsonschema-form/issues/992)
 
+## Handling of schema defaults
+
+This library automatically fills default values defined the [JSON Schema](http://json-schema.org/documentation.html) as initial values in your form. This also works for complex structures in the schema. If a field has a default defined, it should always appear as default value in form. This also works when using [schema dependencies](#schema-dependencies).
+
+Since there is a complex interaction between any supplied original form data and any injected defaults, this library tries to do the injection in a way which keeps the original intention of the original form data.
+
+Check out the defaults example on the [live playground](https://mozilla-services.github.io/react-jsonschema-form/) to see this in action.
+
+### Merging of defaults into the form data
+
+There are three different cases which need to be considered for the merging. Objects, arrays and scalar values. This library always deeply merges any defaults with the existing form data for objects.
+
+This are the rules which are used when injecting the defaults: 
+
+- When the is a scalar in the form data, nothing is changed. 
+- When the value is `undefined` in the form data, the default is created in the form data.
+- When the value is an object in the form data, the defaults are deeply merged into the form data, using the rules defined here for the deep merge.
+- Then the value is an array in the form data, defaults are only injected in existing array items. No new array items will be created, even if the schema has minItems or additional items defined.
+
+### Merging of defaults within the schema
+
+In the schema itself, defaults of parent elements are propagated into children. So when you have a schema which defines a deeply nested object as default, these defaults will be applied to children of the current node. This also merges objects defined at different levels together with the "deeper" not having precedence. If the parent node defines properties, which are not defined in the child, they will be merged so that the default for the child will be the merged defaults of parent and child.
+
+For arrays this is not the case. Defining an array, when a parent also defines an array, will be overwritten. This is only true when arrays are used in the same level, for objects within these arrays, they will be deeply merged again.
+
 ## Tips and tricks
 
  - Custom field template: <https://jsfiddle.net/hdp1kgn6/1/>

playground/samples/defaults.js

@@ -0,0 +1,70 @@
+module.exports = {
+ schema: {
+ title: "Schema default properties",
+ type: "object",
+ properties: {
+ valuesInFormData: {
+ title: "Values in form data",
+ $ref: "#/definitions/defaultsExample",
+ },
+ noValuesInFormData: {
+ title: "No values in form data",
+ $ref: "#/definitions/defaultsExample",
+ },
+ },
+ definitions: {
+ defaultsExample: {
+ type: "object",
+ properties: {
+ scalar: {
+ title: "Scalar",
+ type: "string",
+ default: "scalar default",
+ },
+ array: {
+ title: "Array",
+ type: "array",
+ items: {
+ type: "object",
+ properties: {
+ nested: {
+ title: "Nested array",
+ type: "string",
+ default: "nested array default",
+ },
+ },
+ },
+ },
+ object: {
+ title: "Object",
+ type: "object",
+ properties: {
+ nested: {
+ title: "Nested object",
+ type: "string",
+ default: "nested object default",
+ },
+ },
+ },
+ },
+ },
+ },
+ },
+ uiSchema: {},
+ formData: {
+ valuesInFormData: {
+ scalar: "value",
+ array: [
+ {
+ nested: "nested array value",
+ },
+ ],
+ object: {
+ nested: "nested object value",
+ },
+ },
+ noValuesInFormData: {
+ array: [{}, {}],
+ },
+ },
+};

playground/samples/index.js

@@ -23,6 +23,7 @@ import additionalProperties from "./additionalProperties";
 import nullable from "./nullable";
 import nullField from "./null";
 import errorSchema from "./errorSchema";
+import defaults from "./defaults";
 
 export const samples = {
  Simple: simple,
@@ -50,4 +51,5 @@ export const samples = {
  "Null fields": nullField,
  Nullable: nullable,
  ErrorSchema: errorSchema,
+ Defaults: defaults,
 };

src/utils.js

@@ -187,10 +187,10 @@ function computeDefaults(
  includeUndefinedValues
  );
  } else if (isFixedItems(schema)) {
- defaults = schema.items.map(itemSchema =>
+ defaults = schema.items.map((itemSchema, idx) =>
  computeDefaults(
  itemSchema,
- undefined,
+ Array.isArray(parentDefaults) ? parentDefaults[idx] : undefined,
  definitions,
  formData,
  includeUndefinedValues
@@ -229,6 +229,28 @@ function computeDefaults(
  }, {});
 
  case "array":
+ // Inject defaults into existing array defaults
+ if (Array.isArray(defaults)) {
+ defaults = defaults.map((item, idx) => {
+ return computeDefaults(
+ schema.items[idx] || schema.additionalItems || {},
+ item,
+ definitions
+ );
+ });
+ }
+
+ // Deeply inject defaults into already existing form data
+ if (Array.isArray(rawFormData)) {
+ defaults = rawFormData.map((item, idx) => {
+ return computeDefaults(
+ schema.items,
+ (defaults || {})[idx],
+ definitions,
+ item
+ );
+ });
+ }
  if (schema.minItems) {
  if (!isMultiSelect(schema, definitions)) {
  const defaultsLength = defaults ? defaults.length : 0;
@@ -275,16 +297,49 @@ export function getDefaultFormState(
  // No form data? Use schema defaults.
  return defaults;
  }
- if (isObject(formData)) {
- // Override schema defaults with form data.
- return mergeObjects(defaults, formData);
+ if (isObject(formData) || Array.isArray(formData)) {
+ return mergeDefaultsWithFormData(defaults, formData);
  }
  if (formData === 0 || formData === false) {
  return formData;
  }
  return formData || defaults;
 }
 
+/**
+ * When merging defaults and form data, we want to merge in this specific way:
+ * - objects are deeply merged
+ * - arrays are merged in such a way that:
+ * - when the array is set in form data, only array entries set in form data
+ * are deeply merged; additional entries from the defaults are ignored
+ * - when the array is not set in form data, the default is copied over
+ * - scalars are overwritten/set by form data
+ */
+export function mergeDefaultsWithFormData(defaults, formData) {
+ if (Array.isArray(formData)) {
+ if (!Array.isArray(defaults)) {
+ defaults = [];
+ }
+ return formData.map((value, idx) => {
+ if (defaults[idx]) {
+ return mergeDefaultsWithFormData(defaults[idx], value);
+ }
+ return value;
+ });
+ } else if (isObject(formData)) {
+ const acc = Object.assign({}, defaults); // Prevent mutation of source object.
+ return Object.keys(formData).reduce((acc, key) => {
+ acc[key] = mergeDefaultsWithFormData(
+ defaults ? defaults[key] : {},
+ formData[key]
+ );
+ return acc;
+ }, acc);
+ } else {
+ return formData;
+ }
+}
+
 export function getUiOptions(uiSchema) {
  // get all passed options from ui:widget, ui:options, and ui:<optionName>
  return Object.keys(uiSchema)

test/ArrayField_test.js

@@ -405,7 +405,7 @@ describe("ArrayField", () => {
  expect(inputs[1].value).eql("bar");
  });
 
- it("should't have reorder buttons when list length <= 1", () => {
+ it("shouldn't have reorder buttons when list length <= 1", () => {
  const { node } = createFormComponent({ schema, formData: ["foo"] });
 
  expect(node.querySelector(".array-item-move-up")).eql(null);