remove selector animation

react/src/components/lists/Lists.js

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import ListActionsContainer from './ListActionsContainer';
-import SelectorContainer from '../todolist/SelectorContainer';
+import SelectorContainer from './SelectorContainer';
 
 function Lists({ userLoaded, listsLoaded }) {
   return (

react/src/components/lists/Selector.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Select, MenuItem } from '@material-ui/core';
 import AddIcon from '@material-ui/icons/Add';
 import CheckIcon from '@material-ui/icons/Check';
-import { Transition, animated } from 'react-spring';
+import { animated } from 'react-spring';
 
 import './Selector.css';
 
@@ -28,83 +28,57 @@ export default function Selector({
   if (creating) {
     let input = null;
     return (
-      <Transition
-        native
-        from={{ opacity: 0, maxHeight: 0 }}
-        enter={{ opacity: 1, maxHeight: 64 }}
-        leave={{ opacity: 0, maxHeight: 0 }}
-      >
-        {styles => (
-          <animated.div
-            style={styles}
-            id="listselector"
-            className="list--input"
-          >
-            <input
-              ref={node => {
-                input = node;
-              }}
-              id="input"
-              type="text"
-              onKeyPress={e => {
-                if (e.key === 'Enter') {
-                  addList(input.value);
-                }
-              }}
-            />
-            <animated.button
-              style={{ ...button, ...styles }}
-              onClick={() => input.value.trim() && addList(input.value)}
-            >
-              <AddIcon style={icon} />
-            </animated.button>
-          </animated.div>
-        )}
-      </Transition>
+      <div id="listselector" className="list--input">
+        <input
+          ref={node => {
+            input = node;
+          }}
+          id="input"
+          type="text"
+          onKeyPress={e => {
+            if (e.key === 'Enter') {
+              addList(input.value);
+            }
+          }}
+        />
+        <animated.button
+          style={button}
+          onClick={() => input.value.trim() && addList(input.value)}
+        >
+          <AddIcon style={icon} />
+        </animated.button>
+      </div>
     );
   }
   if (editing) {
     let input = null;
     return (
-      <Transition
-        native
-        from={{ opacity: 0, maxHeight: 0 }}
-        enter={{ opacity: 1, maxHeight: 64 }}
-        leave={{ opacity: 0, maxHeight: 0 }}
-      >
-        {styles => (
-          <animated.div
-            style={styles}
-            id="listselector"
-            className="list--input"
-          >
-            <input
-              ref={node => {
-                input = node;
-              }}
-              defaultValue={lists.lists[list].name}
-              id="input"
-              type="text"
-              onKeyPress={e => {
-                if (e.key === 'Enter') {
-                  editList(input.value);
-                }
-              }}
-            />
-            <animated.button
-              style={{ ...button }}
-              onClick={() => input.value.trim() && editList(input.value)}
-            >
-              <CheckIcon style={icon} />
-            </animated.button>
-          </animated.div>
-        )}
-      </Transition>
+      <div id="listselector" className="list--input">
+        <input
+          ref={node => {
+            input = node;
+          }}
+          defaultValue={lists.lists[list].name}
+          id="input"
+          type="text"
+          onKeyPress={e => {
+            if (e.key === 'Enter') {
+              editList(input.value);
+            }
+          }}
+        />
+        <animated.button
+          style={button}
+          onClick={() => input.value.trim() && editList(input.value)}
+        >
+          <CheckIcon style={icon} />
+        </animated.button>
+      </div>
     );
   }
   if (list) {
     return (
-      <animated.div id="listselector">
+      <div id="listselector">
         <Select
           style={{ fontSize: '1.5rem', width: '100%' }}
           value={list}
@@ -116,7 +90,7 @@ export default function Selector({
             </MenuItem>
           ))}
         </Select>
-      </animated.div>
+      </div>
     );
   }
   return null;

react/src/components/lists/SelectorContainer.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import Selector from '../lists/Selector';
+import Selector from './Selector';
 import { changeList, addList, editList } from '../../actions/lists';
 
 function mapStateToProps(state) {