less movement in list selector

2025-10-28 15:47:48 +01:00 · 2018-09-25 23:33:49 +03:00
parent a23153d4e9
commit 28fd0ea2ae
7 changed files with 86 additions and 133 deletions
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -59,9 +59,9 @@
      }
    },
    "@material-ui/core": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.0.3.tgz",
-      "integrity": "sha512-xWeqqfAg8YAhEZvQhMefPvUSrVhe0RqzbOjFDbp6DELzs+88lrJP2lrsBPTuy/5+O6L+oeNyHy2XwI9C77R2dw==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.1.1.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/@types/jss/-/jss-9.5.5.tgz",
-      "integrity": "sha512-SvxziE0TAoyYst/bzqdReNLIymrZ4jlgc3ux0qnjeS38jAUXVbD/c8gg58QLVOIb0djRBELIBuywRKtJe+iLtg==",
+      "version": "9.5.6",
+      "resolved": "https://registry.npmjs.org/@types/jss/-/jss-9.5.6.tgz",
+      "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,
-          "optional": true
+          "bundled": 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,
-          "optional": true
+          "bundled": true
        },
        "concat-map": {
          "version": "0.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
        },
        "console-control-strings": {
          "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
        },
        "core-util-is": {
          "version": "1.0.2",
@@ -4544,8 +4539,7 @@
        },
        "inherits": {
          "version": "2.0.3",
-          "bundled": true,
-          "optional": true
+          "bundled": 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,
-          "optional": true
+          "bundled": 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,
-          "optional": true
+          "bundled": 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",
-      "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.6.3.tgz",
-      "integrity": "sha512-21ubz0vpzPL/8YPGkcDs/LFIemxMFPhpXnFKvrm15IA7x/kYzh1Bru3ww/lsZJJ0hCqyhJGjv7Txl/U00Je5SA==",
+      "version": "0.6.4",
+      "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.6.4.tgz",
+      "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": {
--- a/client/package.json
+++ b/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",
--- a/client/src/components/App.css
+++ b/client/src/components/App.css
@@ -10,6 +10,7 @@
  flex-grow: 1;
  width: 80%;
  margin-right: 1rem;
+  height: 100px;
 }

 .loading {
--- a/client/src/components/lists/ListActions.js
+++ b/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.stiff}
+        config={{
+          ...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 }}
--- a/client/src/components/lists/ListInput.js
+++ b/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,
+};
--- a/client/src/components/lists/Lists.js
+++ b/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>
  );
 }
--- a/client/src/components/lists/Selector.js
+++ b/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">
-        <Transition
-          native
-          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>
+      <ListInput onClick={addList}>
+        <AddIcon style={icon} />
+      </ListInput>
    );
  }
  if (editing) {
-    let input = null;
    return (
-      <div id="listselector" className="list--input">
-        <Transition
-          config={config.stiff}
-          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>
+      <ListInput onClick={editList} defaultValue={lists.lists[list].name}>
+        <CheckIcon style={icon} />
+      </ListInput>
    );
  }
  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)}
        >