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
+      <div id="listselector" className="list--input">
-        native
+        <input
-        from={{ opacity: 0, maxHeight: 0 }}
+          ref={node => {
-        enter={{ opacity: 1, maxHeight: 64 }}
+            input = node;
-        leave={{ opacity: 0, maxHeight: 0 }}
+          }}
-      >
+          id="input"
-        {styles => (
+          type="text"
-          <animated.div
+          onKeyPress={e => {
-            style={styles}
+            if (e.key === 'Enter') {
-            id="listselector"
+              addList(input.value);
-            className="list--input"
+            }
-          >
+          }}
-            <input
+        />
-              ref={node => {
+        <animated.button
-                input = node;
+          style={button}
-              }}
+          onClick={() => input.value.trim() && addList(input.value)}
-              id="input"
+        >
-              type="text"
+          <AddIcon style={icon} />
-              onKeyPress={e => {
+        </animated.button>
-                if (e.key === 'Enter') {
+      </div>
-                  addList(input.value);
-                }
-              }}
-            />
-            <animated.button
-              style={{ ...button, ...styles }}
-              onClick={() => input.value.trim() && addList(input.value)}
-            >
-              <AddIcon style={icon} />
-            </animated.button>
-          </animated.div>
-        )}
-      </Transition>
     );
   }
   if (editing) {
     let input = null;
     return (
-      <Transition
+      <div id="listselector" className="list--input">
-        native
+        <input
-        from={{ opacity: 0, maxHeight: 0 }}
+          ref={node => {
-        enter={{ opacity: 1, maxHeight: 64 }}
+            input = node;
-        leave={{ opacity: 0, maxHeight: 0 }}
+          }}
-      >
+          defaultValue={lists.lists[list].name}
-        {styles => (
+          id="input"
-          <animated.div
+          type="text"
-            style={styles}
+          onKeyPress={e => {
-            id="listselector"
+            if (e.key === 'Enter') {
-            className="list--input"
+              editList(input.value);
-          >
+            }
-            <input
+          }}
-              ref={node => {
+        />
-                input = node;
+        <animated.button
-              }}
+          style={button}
-              defaultValue={lists.lists[list].name}
+          onClick={() => input.value.trim() && editList(input.value)}
-              id="input"
+        >
-              type="text"
+          <CheckIcon style={icon} />
-              onKeyPress={e => {
+        </animated.button>
-                if (e.key === 'Enter') {
+      </div>
-                  editList(input.value);
-                }
-              }}
-            />
-            <animated.button
-              style={{ ...button }}
-              onClick={() => input.value.trim() && editList(input.value)}
-            >
-              <CheckIcon style={icon} />
-            </animated.button>
-          </animated.div>
-        )}
-      </Transition>
     );
   }
   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) {