animate actions

react/src/components/App.css

@@ -36,11 +36,6 @@
   margin: 1rem 0;
 }
 
-#listactions button:hover {
-  transition: 0.1s ease-in-out;
-  color: #222222;
-}
-
 #filters {
   margin-right: 0.75rem;
   align-self: center;

react/src/components/ListActions.js

@@ -1,10 +1,10 @@
-import { IconButton } from '@material-ui/core';
 import DeleteIcon from '@material-ui/icons/Delete';
 import AddIcon from '@material-ui/icons/Add';
 import EditIcon from '@material-ui/icons/Edit';
 import BackButton from '@material-ui/icons/ArrowBack';
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Transition, config, animated } from 'react-spring';
 
 const button = {
   width: 30,
@@ -34,39 +34,64 @@ export default function ListActions({
       stopCreateList();
     }
   }
+  const actions = [];
+  if (!creating && !editing) {
+    actions.push(styles => (
+      <animated.button
+        key="create"
+        style={{ ...button, ...styles }}
+        onClick={() => startCreateList()}
+      >
+        <AddIcon style={icon} />
+      </animated.button>
+    ));
+  }
+  if (list && !creating && !editing) {
+    actions.push(styles => (
+      <animated.button
+        key="remove"
+        style={{ ...button, ...styles }}
+        onClick={() => removeList()}
+      >
+        <DeleteIcon style={icon} />
+      </animated.button>
+    ));
+  }
+  if (list && !creating && !editing) {
+    actions.push(styles => (
+      <animated.button
+        key="edit"
+        style={{ ...button, ...styles }}
+        onClick={() => startEditList()}
+      >
+        <EditIcon style={icon} />
+      </animated.button>
+    ));
+  }
+  if (creating || editing) {
+    actions.push(styles => (
+      <animated.button
+        key="back"
+        style={{ ...button, ...styles }}
+        className="backbutton"
+        onClick={() => back()}
+      >
+        <BackButton style={icon} />
+      </animated.button>
+    ));
+  }
   return (
     <div id="listactions">
-      {!creating &&
+      <Transition
-        !editing && (
+        native
-          <IconButton style={button} onClick={() => startCreateList()}>
+        config={config.stiff}
-            <AddIcon style={icon} />
+        keys={actions.map(action => action({}).key)}
-          </IconButton>
+        from={{ opacity: 0, height: 0, margin: 0, padding: 0 }}
-        )}
+        enter={{ opacity: 1, height: 30 }}
-      {!list && !creating ? 'add list' : null}
+        leave={{ opacity: 0, height: 0, margin: 0, padding: 0 }}
-      {list &&
+      >
-        !creating &&
+        {actions}
-        !editing && (
+      </Transition>
-          <IconButton style={button} onClick={() => removeList()}>
-            <DeleteIcon style={icon} />
-          </IconButton>
-        )}
-      {list &&
-        !creating &&
-        !editing && (
-          <IconButton style={button} onClick={() => startEditList()}>
-            <EditIcon style={icon} />
-          </IconButton>
-        )}
-
-      {(creating || editing) && (
-        <IconButton
-          style={button}
-          className="backbutton"
-          onClick={() => back()}
-        >
-          <BackButton style={icon} />
-        </IconButton>
-      )}
     </div>
   );
 }

react/src/components/Selector.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { IconButton, Select, MenuItem } from '@material-ui/core';
+import { Select, MenuItem } from '@material-ui/core';
 import AddIcon from '@material-ui/icons/Add';
 import CheckIcon from '@material-ui/icons/Check';
+import { Spring, animated } from 'react-spring';
 
 import './Selector.css';
 
@@ -40,12 +41,16 @@ export default function Selector({
             }
           }}
         />
-        <IconButton
+        <Spring from={{ opacity: 0 }} to={{ opacity: 1 }}>
-          style={button}
+          {styles => (
-          onClick={() => input.value.trim() && addList(input.value)}
+            <animated.button
-        >
+              style={{ ...button, ...styles }}
-          <AddIcon style={icon} />
+              onClick={() => input.value.trim() && addList(input.value)}
-        </IconButton>
+            >
+              <AddIcon style={icon} />
+            </animated.button>
+          )}
+        </Spring>
       </div>
     );
   }
@@ -66,12 +71,16 @@ export default function Selector({
             }
           }}
         />
-        <IconButton
+        <Spring from={{ opacity: 0 }} to={{ opacity: 1 }}>
-          style={button}
+          {styles => (
-          onClick={() => input.value.trim() && editList(input.value)}
+            <animated.button
-        >
+              style={{ ...button, ...styles }}
-          <CheckIcon style={icon} />
+              onClick={() => input.value.trim() && editList(input.value)}
-        </IconButton>
+            >
+              <CheckIcon style={icon} />
+            </animated.button>
+          )}
+        </Spring>
       </div>
     );
   }