Revert unecessary change

Author: Travis CI

packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.tsx

@@ -7,13 +7,16 @@ import {
     ReactNode,
     useCallback,
     useMemo,
+    useRef,
 } from 'react';
 import { FormHelperText } from '@material-ui/core';
 import classNames from 'classnames';
 import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import { Record, ValidationError } from 'ra-core';
 import { FieldArrayRenderProps } from 'react-final-form-arrays';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
 
 import { ClassesOverride } from '../../types';
 import { useArrayInput } from './useArrayInput';
@@ -51,16 +54,37 @@ export const SimpleFormIterator = (props: SimpleFormIteratorProps) => {
     const classes = useSimpleFormIteratorStyles(props);
     const { fields, meta } = useArrayInput(props);
     const { error, submitFailed } = meta;
+    const nodeRef = useRef(null);
+
+    // We need a unique id for each field for a proper enter/exit animation
+    // so we keep an internal map between the field position and an auto-increment id
+    const nextId = useRef(
+        fields && fields.length
+            ? fields.length
+            : defaultValue
+            ? defaultValue.length
+            : 0
+    );
+
+    // We check whether we have a defaultValue (which must be an array) before checking
+    // the fields prop which will always be empty for a new record.
+    // Without it, our ids wouldn't match the default value and we would get key warnings
+    // on the CssTransition element inside our render method
+    const ids = useRef(
+        nextId.current > 0 ? Array.from(Array(nextId.current).keys()) : []
+    );
 
     const removeField = useCallback(
         (index: number) => {
+            ids.current.splice(index, 1);
             fields.remove(index);
         },
         [fields]
     );
 
     const addField = useCallback(
         (item: any = undefined) => {
+            ids.current.push(nextId.current++);
             fields.push(item);
         },
         [fields]
@@ -78,6 +102,9 @@ export const SimpleFormIterator = (props: SimpleFormIteratorProps) => {
 
     const handleReorder = useCallback(
         (origin: number, destination: number) => {
+            const item = ids.current[origin];
+            ids.current[origin] = ids.current[destination];
+            ids.current[destination] = item;
             fields.move(origin, destination);
         },
         [fields]
@@ -102,32 +129,41 @@ export const SimpleFormIterator = (props: SimpleFormIteratorProps) => {
                         <ValidationError error={error as string} />
                     </FormHelperText>
                 )}
-                {fields.map((member, index) => (
-                    <SimpleFormIteratorItem
-                        key={member}
-                        basePath={basePath}
-                        classes={classes}
-                        disabled={disabled}
-                        disableRemove={disableRemove}
-                        disableReordering={disableReordering}
-                        fields={fields}
-                        getItemLabel={getItemLabel}
-                        index={index}
-                        margin={margin}
-                        member={member}
-                        meta={meta}
-                        onRemoveField={removeField}
-                        onReorder={handleReorder}
-                        record={(records && records[index]) || {}}
-                        removeButton={removeButton}
-                        reOrderButtons={reOrderButtons}
-                        resource={resource}
-                        source={source}
-                        variant={variant}
-                    >
-                        {children}
-                    </SimpleFormIteratorItem>
-                ))}
+                <TransitionGroup component={null}>
+                    {fields.map((member, index) => (
+                        <CSSTransition
+                            nodeRef={nodeRef}
+                            key={ids.current[index]}
+                            timeout={500}
+                            classNames="fade"
+                            {...TransitionProps}
+                        >
+                            <SimpleFormIteratorItem
+                                basePath={basePath}
+                                classes={classes}
+                                disabled={disabled}
+                                disableRemove={disableRemove}
+                                disableReordering={disableReordering}
+                                fields={fields}
+                                getItemLabel={getItemLabel}
+                                index={index}
+                                margin={margin}
+                                member={member}
+                                meta={meta}
+                                onRemoveField={removeField}
+                                onReorder={handleReorder}
+                                record={(records && records[index]) || {}}
+                                removeButton={removeButton}
+                                reOrderButtons={reOrderButtons}
+                                resource={resource}
+                                source={source}
+                                variant={variant}
+                            >
+                                {children}
+                            </SimpleFormIteratorItem>
+                        </CSSTransition>
+                    ))}
+                </TransitionGroup>
                 {!disabled && !disableAdd && (
                     <li className={classes.line}>
                         <span className={classes.action}>
@@ -198,6 +234,7 @@ export interface SimpleFormIteratorProps
     reOrderButtons?: ReactElement;
     resource?: string;
     source?: string;
+    TransitionProps?: CSSTransitionProps;
     variant?: 'standard' | 'outlined' | 'filled';
 }