Animate list items on name change (#1008)

* animate list items

* fix comment

client/src/components/categorical/category.js

@@ -2,6 +2,7 @@ import React from "react";
 import _ from "lodash";
 import { connect } from "react-redux";
 import { FaChevronRight, FaChevronDown } from "react-icons/fa";
+import { Flipper, Flipped, Spring } from "react-flip-toolkit";
 import {
   Button,
   Tooltip,
@@ -172,21 +173,26 @@ class Category extends React.Component {
     }
   }
 
-  renderCategoryItems() {
-    const { categoricalSelection, metadataField, isUserAnno } = this.props;
+  renderCategoryItems(optTuples) {
+    const { metadataField, isUserAnno } = this.props;
 
-    const cat = categoricalSelection[metadataField];
-    const optTuples = sortedCategoryValues([...cat.categoryValueIndices]);
-    return _.map(optTuples, (tuple, i) => (
-      <Value
-        isUserAnno={isUserAnno}
-        optTuples={optTuples}
-        key={tuple[1]}
-        metadataField={metadataField}
-        categoryIndex={tuple[1]}
-        i={i}
-      />
-    ));
+    return _.map(optTuples, (tuple, i) => {
+      return (
+        <Flipped key={tuple[1]} flipId={tuple[1]}>
+          {flippedProps => (
+            <Value
+              isUserAnno={isUserAnno}
+              optTuples={optTuples}
+              key={tuple[1]}
+              metadataField={metadataField}
+              categoryIndex={tuple[1]}
+              i={i}
+              flippedProps={flippedProps}
+            />
+          )}
+        </Flipped>
+      );
+    });
   }
 
   render() {
@@ -201,6 +207,10 @@ class Category extends React.Component {
     } = this.props;
     const { isTruncated } = categoricalSelection[metadataField];
 
+    const cat = categoricalSelection[metadataField];
+    const optTuples = sortedCategoryValues([...cat.categoryValueIndices]);
+    const optTuplesAsKey = _.map(optTuples, t => t[0]).join(""); // animation
+
     return (
       <div
         style={{
@@ -423,7 +433,9 @@ class Category extends React.Component {
           </div>
         </div>
         <div style={{ marginLeft: 26 }}>
-          {isExpanded ? this.renderCategoryItems() : null}
+          <Flipper spring="veryGentle" flipKey={optTuplesAsKey}>
+            {isExpanded ? this.renderCategoryItems(optTuples) : null}
+          </Flipper>
         </div>
         <div>
           {isExpanded && isTruncated ? (

client/src/components/categorical/value.js

@@ -183,7 +183,10 @@ class CategoryValue extends React.Component {
       i,
       schema,
       isUserAnno,
-      annotations
+      annotations,
+      // flippedProps is potentially brittle, their docs want {...flippedProps} on our div,
+      // our lint doesn't like jsx spread, we are version pinned to prevent api change on their part
+      flippedProps
     } = this.props;
 
     if (!categoricalSelection) return null;
@@ -231,6 +234,9 @@ class CategoryValue extends React.Component {
     return (
       <div
         key={i}
+        data-flip-config={flippedProps["data-flip-config"]}
+        data-flip-id={flippedProps["data-flip-id"]}
+        data-portal-key={flippedProps["data-portal-key"]}
         className={styles.value}
         data-testclass="categorical-row"
         style={{