Merge pull request #3548 from marmelab/array-input-typescript

[RFR] Convert ArrayInput to TypeScript

packages/ra-core/package.json

@@ -53,7 +53,7 @@
         "connected-react-router": "^6.4.0",
         "date-fns": "^1.29.0",
         "eventemitter3": "^3.0.0",
-        "final-form": "^4.18.2",
+        "final-form": "^4.18.5",
         "inflection": "~1.12.0",
         "lodash": "~4.17.5",
         "node-polyglot": "^2.2.2",

packages/ra-ui-materialui/package.json

@@ -49,7 +49,7 @@
         "autosuggest-highlight": "^3.1.1",
         "classnames": "~2.2.5",
         "connected-react-router": "^6.4.0",
-        "final-form": "^4.18.2",
+        "final-form": "^4.18.5",
         "final-form-arrays": "^3.0.1",
         "inflection": "~1.12.0",
         "jsonexport": "^2.4.1",
@@ -60,7 +60,7 @@
         "react-autosuggest": "^9.4.2",
         "react-dropzone": "~4.0.1",
         "react-final-form": "^6.3.0",
-        "react-final-form-arrays": "^3.1.0",
+        "react-final-form-arrays": "^3.1.1",
         "react-redux": "^7.1.0",
         "react-router": "^5.0.1",
         "react-router-dom": "^5.0.1",

packages/ra-ui-materialui/src/input/ArrayInput.js → packages/ra-ui-materialui/src/input/ArrayInput.tsx

@@ -1,13 +1,10 @@
-import React, { cloneElement, Children, useEffect } from 'react';
+import React, { cloneElement, Children } from 'react';
 import PropTypes from 'prop-types';
 import { isRequired, FieldTitle } from 'ra-core';
 import { useFieldArray } from 'react-final-form-arrays';
-import lodashIsEqual from 'lodash/isEqual';
-import FormControl from '@material-ui/core/FormControl';
-import InputLabel from '@material-ui/core/InputLabel';
+import { InputLabel, FormControl } from '@material-ui/core';
 
 import sanitizeRestProps from './sanitizeRestProps';
-import { useForm } from 'react-final-form';
 
 /**
  * To edit arrays of data embedded inside a record, <ArrayInput> creates a list of sub-forms.
@@ -61,32 +58,11 @@ export const ArrayInput = ({
     validate,
     ...rest
 }) => {
-    const form = useForm();
-    const fieldProps = useFieldArray(source);
-
-    // HACK: This useEffect runs only once and will emulate defaultValue support on the ArrayInput
-    // This is needed because defaultValue is not supported on FieldArray in react-final-form
-    // NOTE: This can probably be better implemented with a mutator
-    useEffect(() => {
-        if (
-            fieldProps.meta.pristine &&
-            defaultValue &&
-            !lodashIsEqual(fieldProps.fields.value, defaultValue)
-        ) {
-            if (
-                !Array.isArray(defaultValue) &&
-                process.env.NODE_ENV !== 'production'
-            ) {
-                console.warn('<ArrayInput> defaultValue must be an array');
-                return;
-            }
-
-            // As we may have multiple items in the defaultValue, we batch the form changes for better performances
-            form.batch(() => {
-                defaultValue.forEach(value => fieldProps.fields.push(value));
-            });
-        }
-    }, []); // eslint-disable-line
+    const fieldProps = useFieldArray(source, {
+        initialValue: defaultValue,
+        validate,
+        ...rest,
+    });
 
     return (
         <FormControl

yarn.lock

@@ -6618,20 +6618,20 @@ final-form-arrays@^3.0.1:
   resolved "https://registry.yarnpkg.com/final-form-arrays/-/final-form-arrays-3.0.1.tgz#862e5e946d391039ebcdfadbe55fc3a63849e559"
   integrity sha512-GKXecufCNCjDcz1+3peL21LuuTlApoxCcnpOnmfeJfC3xAlFKGdytYMfifP7W1IEWTGC8twTv3zItESkej8qpg==
 
-final-form@^4.18.2:
-  version "4.18.2"
-  resolved "https://registry.yarnpkg.com/final-form/-/final-form-4.18.2.tgz#3e7447ba36049a747d4becc61eb35e65a90f22a1"
-  integrity sha512-VQx/5x9M4CiC8fG678Dm1IS3mXvBl7ZNIUx5tUZCk00lFImJzQix4KO0+eGtl49sha2bYOxuYn8jRJiq6sazXA==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-
 final-form@^4.18.4:
   version "4.18.4"
   resolved "https://registry.yarnpkg.com/final-form/-/final-form-4.18.4.tgz#55f6dfb1463045a6e9248d928e573459a8cd97f3"
   integrity sha512-UUymL6UykjwO2yUN3EhBdw8ajaa448/CczgXvLcyXwbHRjWbA3Yjdxm6WSHQBx4pLv4iEqkvmPRnQ+xmS9GUcA==
   dependencies:
     "@babel/runtime" "^7.3.1"
 
+final-form@^4.18.5:
+  version "4.18.5"
+  resolved "https://registry.yarnpkg.com/final-form/-/final-form-4.18.5.tgz#e359cfaf2892ef135d92fcf22e06b475dda3a885"
+  integrity sha512-DH/I2W7fWxU8J8ZsbYJ5jLvUbhbatCvLhIKlsU17MvY6W3QnetPEyuX5mcxXgIGFNFKxfvqsG3pDy/1/VwOiTw==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+
 [email protected]:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.1.tgz#eebf4ed840079c83f4249038c9d703008301b105"
@@ -12785,10 +12785,10 @@ react-error-overlay@^5.1.6:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-5.1.6.tgz#0cd73407c5d141f9638ae1e0c63e7b2bf7e9929d"
   integrity sha512-X1Y+0jR47ImDVr54Ab6V9eGk0Hnu7fVWGeHQSOXHf/C2pF9c6uy3gef8QUeuUiWlNb0i08InPSE5a/KJzNzw1Q==
 
-react-final-form-arrays@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/react-final-form-arrays/-/react-final-form-arrays-3.1.0.tgz#8ebaab391a665e7e17e463b88cdf3b1078e3f4f0"
-  integrity sha512-eJdAlhTKzlDD/d1wedD592a99eJNGO0e9GzY++RLN99P23cMGKSzCmsiGWLPwpY0H/C/LmNSL4XzWyH/aZembA==
+react-final-form-arrays@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/react-final-form-arrays/-/react-final-form-arrays-3.1.1.tgz#39d23e7ede966e418cad209e8fde46da1d603e99"
+  integrity sha512-e6S1x9597cvI4QPniOPmllXXandDAqCCuBo4AvXstZYgcV8whsqzk8aCrmQEy6eEfy2tEhvn6f4VI1GY+JBRsg==
   dependencies:
     "@babel/runtime" "^7.4.5"