From 28fd0ea2ae6bdfd474b2058bba5de27683783090 Mon Sep 17 00:00:00 2001 From: Stepan Usatiuk Date: Tue, 25 Sep 2018 23:33:49 +0300 Subject: [PATCH] less movement in list selector --- client/package-lock.json | 63 +++++------------ client/package.json | 2 +- client/src/components/App.css | 1 + client/src/components/lists/ListActions.js | 27 +++++--- client/src/components/lists/ListInput.js | 43 ++++++++++++ client/src/components/lists/Lists.js | 2 - client/src/components/lists/Selector.js | 81 +++------------------- 7 files changed, 86 insertions(+), 133 deletions(-) create mode 100644 client/src/components/lists/ListInput.js diff --git a/client/package-lock.json b/client/package-lock.json index b93fdc8..7868f4b 100644 --- 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": { diff --git a/client/package.json b/client/package.json index f3ade39..7ab3f5c 100644 --- 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", diff --git a/client/src/components/App.css b/client/src/components/App.css index b8091d5..2e0d618 100644 --- 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 { diff --git a/client/src/components/lists/ListActions.js b/client/src/components/lists/ListActions.js index 9449021..6b00812 100644 --- 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 => ( - startCreateList()} > - + )); } if (list && !creating && !editing) { actions.push(styles => ( - removeList()} > - + )); } if (list && !creating && !editing) { actions.push(styles => ( - startEditList()} > - + )); } if (creating || editing) { actions.push(styles => ( - back()} > - + )); } return (
action({}).key)} from={{ opacity: 0, height: 0, margin: 0, padding: 0 }} enter={{ opacity: 1, height: 30, margin: 0, padding: 0 }} diff --git a/client/src/components/lists/ListInput.js b/client/src/components/lists/ListInput.js new file mode 100644 index 0000000..6340ab9 --- /dev/null +++ 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 ( +
+ { + input = node; + }} + defaultValue={defaultValue} + style={{ height: 40 }} + id="input" + type="text" + onKeyPress={e => { + if (e.key === 'Enter') { + onClick(input.value); + } + }} + /> + input.value.trim() && onClick(input.value)} + > + {children} + +
+ ); +} + +ListInput.propTypes = { + onClick: PropTypes.func.isRequired, + children: PropTypes.element.isRequired, + defaultValue: PropTypes.string, +}; diff --git a/client/src/components/lists/Lists.js b/client/src/components/lists/Lists.js index 1d545bb..6398b3c 100644 --- a/client/src/components/lists/Lists.js +++ b/client/src/components/lists/Lists.js @@ -15,8 +15,6 @@ function Lists({ userLoaded, listsLoaded }) {
)} - {!userLoaded && loading.} - {userLoaded && !listsLoaded && loading..} ); } diff --git a/client/src/components/lists/Selector.js b/client/src/components/lists/Selector.js index 6a26348..8311847 100644 --- 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 ( -
- - {styles => ( - { - input = node; - }} - style={styles} - id="input" - type="text" - onKeyPress={e => { - if (e.key === 'Enter') { - addList(input.value); - } - }} - /> - )} - - -
+ + + ); } if (editing) { - let input = null; return ( -
- - {styles => ( - { - input = node; - }} - style={styles} - defaultValue={lists.lists[list].name} - id="input" - type="text" - onKeyPress={e => { - if (e.key === 'Enter') { - editList(input.value); - } - }} - /> - )} - - -
+ + + ); } if (list) { return (