From 6f34bd1cab22a1e54cf7c45ee4fc1cbdedb609fd Mon Sep 17 00:00:00 2001
From: Stepan Usatiuk <stepanusatiuk@gmail.com>
Date: Wed, 6 Jun 2018 23:19:32 +0300
Subject: [PATCH] animate actions

---
 react/src/components/App.css        |  5 --
 react/src/components/ListActions.js | 89 ++++++++++++++++++-----------
 react/src/components/Selector.js    | 35 +++++++-----
 3 files changed, 79 insertions(+), 50 deletions(-)

diff --git a/react/src/components/App.css b/react/src/components/App.css
index 1b94344..18f087c 100644
--- a/react/src/components/App.css
+++ b/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;
diff --git a/react/src/components/ListActions.js b/react/src/components/ListActions.js
index 1aadbbc..d003de1 100644
--- a/react/src/components/ListActions.js
+++ b/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 &&
-        !editing && (
-          <IconButton style={button} onClick={() => startCreateList()}>
-            <AddIcon style={icon} />
-          </IconButton>
-        )}
-      {!list && !creating ? 'add list' : null}
-      {list &&
-        !creating &&
-        !editing && (
-          <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>
-      )}
+      <Transition
+        native
+        config={config.stiff}
+        keys={actions.map(action => action({}).key)}
+        from={{ opacity: 0, height: 0, margin: 0, padding: 0 }}
+        enter={{ opacity: 1, height: 30 }}
+        leave={{ opacity: 0, height: 0, margin: 0, padding: 0 }}
+      >
+        {actions}
+      </Transition>
     </div>
   );
 }
diff --git a/react/src/components/Selector.js b/react/src/components/Selector.js
index a019666..4d53eae 100644
--- a/react/src/components/Selector.js
+++ b/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
-          style={button}
-          onClick={() => input.value.trim() && addList(input.value)}
-        >
-          <AddIcon style={icon} />
-        </IconButton>
+        <Spring from={{ opacity: 0 }} to={{ opacity: 1 }}>
+          {styles => (
+            <animated.button
+              style={{ ...button, ...styles }}
+              onClick={() => input.value.trim() && addList(input.value)}
+            >
+              <AddIcon style={icon} />
+            </animated.button>
+          )}
+        </Spring>
       </div>
     );
   }
@@ -66,12 +71,16 @@ export default function Selector({
             }
           }}
         />
-        <IconButton
-          style={button}
-          onClick={() => input.value.trim() && editList(input.value)}
-        >
-          <CheckIcon style={icon} />
-        </IconButton>
+        <Spring from={{ opacity: 0 }} to={{ opacity: 1 }}>
+          {styles => (
+            <animated.button
+              style={{ ...button, ...styles }}
+              onClick={() => input.value.trim() && editList(input.value)}
+            >
+              <CheckIcon style={icon} />
+            </animated.button>
+          )}
+        </Spring>
       </div>
     );
   }