Array items now have unique, stable keys (#1046) (#1335)

* Array items now have unique, stable keys (#1046) * update package-lock.json * update package-lock.json * fix: ensure state has been updated before calling onChange * Add tests for array item keys. Include item key for fixed item arrays. * Update ArrayField to use getDerivedStateFromProps via polyfill * fix: remove id; use custom array template for tests. * fix: use custom arraytemplate for key test.
rjsf-team · Jul 9, 2019 · 20796c2 · 20796c2
1 parent 07b07b1
commit 20796c2
Show file tree

Hide file tree

Showing 6 changed files with 344 additions and 20 deletions.
diff --git a/docs/advanced-customization.md b/docs/advanced-customization.md
@@ -112,6 +112,7 @@ The following props are part of each element in `items`:
 - `hasRemove`: A boolean value stating whether the array item can be removed.
 - `hasToolbar`: A boolean value stating whether the array item has a toolbar.
 - `index`: A number stating the index the array item occurs in `items`.
+- `key`: A stable, unique key for the array item.
 - `onDropIndexClick: (index) => (event) => void`: Returns a function that removes the item at `index`.
 - `onReorderClick: (index, newIndex) => (event) => void`: Returns a function that swaps the items at `index` with `newIndex`.
 - `readonly`: A boolean value stating if the array item is read-only.

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -50,7 +50,9 @@
     "lodash.pick": "^4.4.0",
     "lodash.topath": "^4.5.2",
     "prop-types": "^15.5.8",
-    "react-is": "^16.8.4"
+    "react-is": "^16.8.4",
+    "react-lifecycles-compat": "^3.0.4",
+    "shortid": "^2.2.14"
   },
   "devDependencies": {
     "@babel/cli": "^7.4.4",

diff --git a/playground/samples/customArray.js b/playground/samples/customArray.js
@@ -5,7 +5,7 @@ function ArrayFieldTemplate(props) {
     <div className={props.className}>
       {props.items &&
         props.items.map(element => (
-          <div key={element.index}>
+          <div key={element.key} className={element.className}>
             <div>{element.children}</div>
             {element.hasMoveDown && (
               <button

diff --git a/src/components/fields/ArrayField.js b/src/components/fields/ArrayField.js
@@ -1,6 +1,7 @@
 import AddButton from "../AddButton";
 import IconButton from "../IconButton";
 import React, { Component } from "react";
+import { polyfill } from "react-lifecycles-compat";
 import includes from "core-js/library/fn/array/includes";
 import * as types from "../../types";
 
@@ -18,6 +19,7 @@ import {
   toIdSchema,
   getDefaultRegistry,
 } from "../../utils";
+import shortid from "shortid";
 
 function ArrayFieldTitle({ TitleField, idSchema, title, required }) {
   if (!title) {
@@ -44,7 +46,7 @@ function DefaultArrayItem(props) {
     fontWeight: "bold",
   };
   return (
-    <div key={props.index} className={props.className}>
+    <div key={props.key} className={props.className}>
       <div className={props.hasToolbar ? "col-xs-9" : "col-xs-12"}>
         {props.children}
       </div>
@@ -174,6 +176,25 @@ function DefaultNormalArrayFieldTemplate(props) {
   );
 }
 
+function generateRowId() {
+  return shortid.generate();
+}
+
+function generateKeyedFormData(formData) {
+  return !Array.isArray(formData)
+    ? []
+    : formData.map(item => {
+        return {
+          key: generateRowId(),
+          item,
+        };
+      });
+}
+
+function keyedToPlainFormData(keyedFormData) {
+  return keyedFormData.map(keyedItem => keyedItem.item);
+}
+
 class ArrayField extends Component {
   static defaultProps = {
     uiSchema: {},
@@ -185,6 +206,32 @@ class ArrayField extends Component {
     autofocus: false,
   };
 
+  constructor(props) {
+    super(props);
+    const { formData } = props;
+    const keyedFormData = generateKeyedFormData(formData);
+    this.state = {
+      keyedFormData,
+    };
+  }
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    const nextFormData = nextProps.formData;
+    const previousKeyedFormData = prevState.keyedFormData;
+    const newKeyedFormData =
+      nextFormData.length === previousKeyedFormData.length
+        ? previousKeyedFormData.map((previousKeyedFormDatum, index) => {
+            return {
+              key: previousKeyedFormDatum.key,
+              item: nextFormData[index],
+            };
+          })
+        : generateKeyedFormData(nextFormData);
+    return {
+      keyedFormData: newKeyedFormData,
+    };
+  }
+
   get itemTitle() {
     const { schema } = this.props;
     return schema.items.title || schema.items.description || "Item";
@@ -217,24 +264,40 @@ class ArrayField extends Component {
 
   onAddClick = event => {
     event.preventDefault();
-    const { schema, formData, registry = getDefaultRegistry() } = this.props;
+    const { schema, registry = getDefaultRegistry(), onChange } = this.props;
     const { definitions } = registry;
     let itemSchema = schema.items;
     if (isFixedItems(schema) && allowAdditionalItems(schema)) {
       itemSchema = schema.additionalItems;
     }
-    this.props.onChange([
-      ...formData,
-      getDefaultFormState(itemSchema, undefined, definitions),
-    ]);
+    const newFormDataRow = getDefaultFormState(
+      itemSchema,
+      undefined,
+      definitions
+    );
+    const newKeyedFormData = [
+      ...this.state.keyedFormData,
+      {
+        key: generateRowId(),
+        item: newFormDataRow,
+      },
+    ];
+
+    this.setState(
+      {
+        keyedFormData: newKeyedFormData,
+      },
+      () => onChange(keyedToPlainFormData(newKeyedFormData))
+    );
   };
 
   onDropIndexClick = index => {
     return event => {
       if (event) {
         event.preventDefault();
       }
-      const { formData, onChange } = this.props;
+      const { onChange } = this.props;
+      const { keyedFormData } = this.state;
       // refs #195: revalidate to ensure properly reindexing errors
       let newErrorSchema;
       if (this.props.errorSchema) {
@@ -249,7 +312,13 @@ class ArrayField extends Component {
           }
         }
       }
-      onChange(formData.filter((_, i) => i !== index), newErrorSchema);
+      const newKeyedFormData = keyedFormData.filter((_, i) => i !== index);
+      this.setState(
+        {
+          keyedFormData: newKeyedFormData,
+        },
+        () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
+      );
     };
   };
 
@@ -259,7 +328,7 @@ class ArrayField extends Component {
         event.preventDefault();
         event.target.blur();
       }
-      const { formData, onChange } = this.props;
+      const { onChange } = this.props;
       let newErrorSchema;
       if (this.props.errorSchema) {
         newErrorSchema = {};
@@ -275,18 +344,24 @@ class ArrayField extends Component {
         }
       }
 
+      const { keyedFormData } = this.state;
       function reOrderArray() {
         // Copy item
-        let newFormData = formData.slice();
+        let _newKeyedFormData = keyedFormData.slice();
 
         // Moves item from index to newIndex
-        newFormData.splice(index, 1);
-        newFormData.splice(newIndex, 0, formData[index]);
+        _newKeyedFormData.splice(index, 1);
+        _newKeyedFormData.splice(newIndex, 0, keyedFormData[index]);
 
-        return newFormData;
+        return _newKeyedFormData;
       }
-
-      onChange(reOrderArray(), newErrorSchema);
+      const newKeyedFormData = reOrderArray();
+      this.setState(
+        {
+          keyedFormData: newKeyedFormData,
+        },
+        () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
+      );
     };
   };
 
@@ -367,7 +442,8 @@ class ArrayField extends Component {
     const itemsSchema = retrieveSchema(schema.items, definitions);
     const arrayProps = {
       canAdd: this.canAddItem(formData),
-      items: formData.map((item, index) => {
+      items: this.state.keyedFormData.map((keyedItem, index) => {
+        const { key, item } = keyedItem;
         const itemSchema = retrieveSchema(schema.items, definitions, item);
         const itemErrorSchema = errorSchema ? errorSchema[index] : undefined;
         const itemIdPrefix = idSchema.$id + "_" + index;
@@ -379,6 +455,7 @@ class ArrayField extends Component {
           idPrefix
         );
         return this.renderArrayFieldItem({
+          key,
           index,
           canMoveUp: index > 0,
           canMoveDown: index < formData.length - 1,
@@ -544,7 +621,8 @@ class ArrayField extends Component {
       disabled,
       idSchema,
       formData,
-      items: items.map((item, index) => {
+      items: this.state.keyedFormData.map((keyedItem, index) => {
+        const { key, item } = keyedItem;
         const additional = index >= itemSchemas.length;
         const itemSchema = additional
           ? retrieveSchema(schema.additionalItems, definitions, item)
@@ -565,6 +643,7 @@ class ArrayField extends Component {
         const itemErrorSchema = errorSchema ? errorSchema[index] : undefined;
 
         return this.renderArrayFieldItem({
+          key,
           index,
           canRemove: additional,
           canMoveUp: index >= itemSchemas.length + 1,
@@ -597,6 +676,7 @@ class ArrayField extends Component {
 
   renderArrayFieldItem(props) {
     const {
+      key,
       index,
       canRemove = true,
       canMoveUp = true,
@@ -658,6 +738,7 @@ class ArrayField extends Component {
       hasMoveDown: has.moveDown,
       hasRemove: has.remove,
       index,
+      key,
       onDropIndexClick: this.onDropIndexClick,
       onReorderClick: this.onReorderClick,
       readonly,
@@ -669,4 +750,6 @@ if (process.env.NODE_ENV !== "production") {
   ArrayField.propTypes = types.fieldProps;
 }
 
+polyfill(ArrayField);
+
 export default ArrayField;