less movement in list selector

client/package-lock.json

@@ -59,9 +59,9 @@
       }
     },
     "@material-ui/core": {
-      "version": "3.0.3",
+      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.1.1.tgz",
-      "integrity": "sha512-xWeqqfAg8YAhEZvQhMefPvUSrVhe0RqzbOjFDbp6DELzs+88lrJP2lrsBPTuy/5+O6L+oeNyHy2XwI9C77R2dw==",
+      "integrity": "sha512-AFAKrldoG8GrP6w+9uzHdbm9GQC+cuggKhv8yG2FcUcXoyAzyLZQww1tgTj+hXNMEuOs2l55oFBo2RNNFoGwWQ==",
       "requires": {
         "@babel/runtime": "7.0.0",
         "@types/jss": "^9.5.3",
@@ -126,9 +126,9 @@
       }
     },
     "@types/jss": {
-      "version": "9.5.5",
+      "version": "9.5.6",
-      "resolved": "https://registry.npmjs.org/@types/jss/-/jss-9.5.5.tgz",
+      "resolved": "https://registry.npmjs.org/@types/jss/-/jss-9.5.6.tgz",
-      "integrity": "sha512-SvxziE0TAoyYst/bzqdReNLIymrZ4jlgc3ux0qnjeS38jAUXVbD/c8gg58QLVOIb0djRBELIBuywRKtJe+iLtg==",
+      "integrity": "sha512-7TWmR5y1jYG4ka4wTZt65RR0kw4WgALFUWktQIWbLnDd6/z/0SQZ/4+UeH0rhdp+HEdIfmzPBH0VwE/4Z9Evzw==",
       "requires": {
         "csstype": "^2.0.0",
         "indefinite-observable": "^1.0.1"
@@ -4411,13 +4411,11 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4430,18 +4428,15 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4544,8 +4539,7 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4555,7 +4549,6 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4568,20 +4561,17 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -4598,7 +4588,6 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4671,8 +4660,7 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4682,7 +4670,6 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4788,7 +4775,6 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -9761,28 +9747,13 @@
       "integrity": "sha512-xXUbDAZkU08aAkjtUvldqbvI04ogv+a1XdHxvYuHPYKIVk/42BIOD0zSKTHAWV4+gDy3yGm283z2072rA2gdtw=="
     },
     "react-event-listener": {
-      "version": "0.6.3",
+      "version": "0.6.4",
-      "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.6.3.tgz",
+      "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.6.4.tgz",
-      "integrity": "sha512-21ubz0vpzPL/8YPGkcDs/LFIemxMFPhpXnFKvrm15IA7x/kYzh1Bru3ww/lsZJJ0hCqyhJGjv7Txl/U00Je5SA==",
+      "integrity": "sha512-t7VSjIuUFmN+GeyKb+wm025YLeojVB85kJL6sSs0wEBJddfmKBEQz+CNBZ2zBLKVWkPy/fZXM6U5yvojjYBVYQ==",
       "requires": {
-        "@babel/runtime": "7.0.0-rc.1",
+        "@babel/runtime": "7.0.0",
         "prop-types": "^15.6.0",
         "warning": "^4.0.1"
-      },
-      "dependencies": {
-        "@babel/runtime": {
-          "version": "7.0.0-rc.1",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0-rc.1.tgz",
-          "integrity": "sha512-Nifv2kwP/nwR39cAOasNxzjYfpeuf/ZbZNtQz5eYxWTC9yHARU9wItFnAwz1GTZ62MU+AtSjzZPMbLK5Q9hmbg==",
-          "requires": {
-            "regenerator-runtime": "^0.12.0"
-          }
-        },
-        "regenerator-runtime": {
-          "version": "0.12.1",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
-          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
-        }
       }
     },
     "react-jss": {

client/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^3.0.3",
+    "@material-ui/core": "^3.1.1",
     "@material-ui/icons": "^3.0.1",
     "@redux-offline/redux-offline": "^2.4.0",
     "localforage": "^1.7.2",

client/src/components/App.css

@@ -10,6 +10,7 @@
   flex-grow: 1;
   width: 80%;
   margin-right: 1rem;
+  height: 100px;
 }
 
 .loading {

client/src/components/lists/ListActions.js

@@ -2,9 +2,10 @@ 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 { IconButton } from '@material-ui/core';
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Transition, config, animated } from 'react-spring';
+import { Transition, config } from 'react-spring';
 
 const button = {
   width: 30,
@@ -37,54 +38,58 @@ export default function ListActions({
   const actions = [];
   if (!creating && !editing) {
     actions.push(styles => (
-      <animated.button
+      <IconButton
         key="create"
         style={{ ...button, ...styles }}
         onClick={() => startCreateList()}
       >
         <AddIcon style={icon} />
-      </animated.button>
+      </IconButton>
     ));
   }
   if (list && !creating && !editing) {
     actions.push(styles => (
-      <animated.button
+      <IconButton
         key="remove"
         style={{ ...button, ...styles }}
         onClick={() => removeList()}
       >
         <DeleteIcon style={icon} />
-      </animated.button>
+      </IconButton>
     ));
   }
   if (list && !creating && !editing) {
     actions.push(styles => (
-      <animated.button
+      <IconButton
         key="edit"
         style={{ ...button, ...styles }}
         onClick={() => startEditList()}
       >
         <EditIcon style={icon} />
-      </animated.button>
+      </IconButton>
     ));
   }
   if (creating || editing) {
     actions.push(styles => (
-      <animated.button
+      <IconButton
         key="back"
         style={{ ...button, ...styles }}
         className="backbutton"
         onClick={() => back()}
       >
         <BackButton style={icon} />
-      </animated.button>
+      </IconButton>
     ));
   }
   return (
     <div id="listactions">
       <Transition
-        native
+        config={{
-        config={config.stiff}
+          ...config.stiff,
+          overshootClamping: true,
+          restSpeedThreshold: 0.5,
+          restDisplacementThreshold: 0.5,
+        }}
         keys={actions.map(action => action({}).key)}
         from={{ opacity: 0, height: 0, margin: 0, padding: 0 }}
         enter={{ opacity: 1, height: 30, margin: 0, padding: 0 }}

client/src/components/lists/ListInput.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { IconButton } from '@material-ui/core';
+
+const button = {
+  width: 36,
+  height: 36,
+};
+
+export default function ListInput({ onClick, children, defaultValue }) {
+  let input;
+  return (
+    <div id="listselector" className="list--input">
+      <input
+        ref={node => {
+          input = node;
+        }}
+        defaultValue={defaultValue}
+        style={{ height: 40 }}
+        id="input"
+        type="text"
+        onKeyPress={e => {
+          if (e.key === 'Enter') {
+            onClick(input.value);
+          }
+        }}
+      />
+      <IconButton
+        style={button}
+        type="submit"
+        onClick={() => input.value.trim() && onClick(input.value)}
+      >
+        {children}
+      </IconButton>
+    </div>
+  );
+}
+
+ListInput.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  children: PropTypes.element.isRequired,
+  defaultValue: PropTypes.string,
+};

client/src/components/lists/Lists.js

@@ -15,8 +15,6 @@ function Lists({ userLoaded, listsLoaded }) {
             <SelectorContainer />
           </div>
         )}
-      {!userLoaded && <span className="loading">loading.</span>}
-      {userLoaded && !listsLoaded && <span className="loading">loading..</span>}
     </div>
   );
 }

client/src/components/lists/Selector.js

@@ -3,15 +3,10 @@ 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, config } from 'react-spring';
 
+import ListInput from './ListInput';
 import './Selector.css';
 
-const button = {
-  width: 36,
-  height: 36,
-};
-
 const icon = {
   fontSize: 24,
 };
@@ -26,84 +21,24 @@ export default function Selector({
   editList,
 }) {
   if (creating) {
-    let input = null;
     return (
-      <div id="listselector" className="list--input">
+      <ListInput onClick={addList}>
-        <Transition
+        <AddIcon style={icon} />
-          native
+      </ListInput>
-          config={config.stiff}
-          from={{ paddingBottom: 18 }}
-          enter={{ paddingBottom: 0 }}
-          leave={{ paddingBottom: 18 }}
-        >
-          {styles => (
-            <input
-              ref={node => {
-                input = node;
-              }}
-              style={styles}
-              id="input"
-              type="text"
-              onKeyPress={e => {
-                if (e.key === 'Enter') {
-                  addList(input.value);
-                }
-              }}
-            />
-          )}
-        </Transition>
-        <button
-          style={button}
-          type="submit"
-          onClick={() => input.value.trim() && addList(input.value)}
-        >
-          <AddIcon style={icon} />
-        </button>
-      </div>
     );
   }
   if (editing) {
-    let input = null;
     return (
-      <div id="listselector" className="list--input">
+      <ListInput onClick={editList} defaultValue={lists.lists[list].name}>
-        <Transition
+        <CheckIcon style={icon} />
-          config={config.stiff}
+      </ListInput>
-          from={{ paddingBottom: 18 }}
-          enter={{ paddingBottom: 0 }}
-          leave={{ paddingBottom: 18 }}
-        >
-          {styles => (
-            <input
-              ref={node => {
-                input = node;
-              }}
-              style={styles}
-              defaultValue={lists.lists[list].name}
-              id="input"
-              type="text"
-              onKeyPress={e => {
-                if (e.key === 'Enter') {
-                  editList(input.value);
-                }
-              }}
-            />
-          )}
-        </Transition>
-        <button
-          style={button}
-          type="submit"
-          onClick={() => input.value.trim() && editList(input.value)}
-        >
-          <CheckIcon style={icon} />
-        </button>
-      </div>
     );
   }
   if (list) {
     return (
       <div id="listselector">
         <Select
-          style={{ fontSize: '1.5rem', width: '100%' }}
+          style={{ fontSize: '1.5rem', width: '100%', height: 40 }}
           value={list}
           onChange={e => onChange(e.target.value)}
         >