stepus53/ustk-todolist
1
0
Fork 0
mirror of https://github.com/usatiuk/ustk-todolist.git synced 2025-10-28 23:57:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

animate input padding

Browse Source
This commit is contained in:
Stepan Usatiuk
2018-08-25 19:07:22 +03:00
parent 6fea8998a0
commit 74a5a66fa7
1 changed files with 46 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
react/src/components/lists/Selector.js
View File

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { Select, MenuItem } from '@material-ui/core'; import { Select, MenuItem } from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add'; import AddIcon from '@material-ui/icons/Add';
import CheckIcon from '@material-ui/icons/Check'; import CheckIcon from '@material-ui/icons/Check';
import { animated } from 'react-spring'; import { animated, Transition } from 'react-spring';
import './Selector.css'; import './Selector.css';
@@ -29,18 +29,28 @@ export default function Selector({
let input = null; let input = null;
return ( return (
<div id="listselector" className="list--input"> <div id="listselector" className="list--input">
<input <Transition
ref={node => { native
input = node; from={{ paddingBottom: 18 }}
}} enter={{ paddingBottom: 0 }}
id="input" leave={{ paddingBottom: 18 }}
type="text" >
onKeyPress={e => { {styles => (
if (e.key === 'Enter') { <input
addList(input.value); ref={node => {
} input = node;
}} }}
/> style={styles}
id="input"
type="text"
onKeyPress={e => {
if (e.key === 'Enter') {
addList(input.value);
}
}}
/>
)}
</Transition>
<animated.button <animated.button
style={button} style={button}
onClick={() => input.value.trim() && addList(input.value)} onClick={() => input.value.trim() && addList(input.value)}
@@ -54,19 +64,29 @@ export default function Selector({
let input = null; let input = null;
return ( return (
<div id="listselector" className="list--input"> <div id="listselector" className="list--input">
<input <Transition
ref={node => { native
input = node; from={{ paddingBottom: 18 }}
}} enter={{ paddingBottom: 0 }}
defaultValue={lists.lists[list].name} leave={{ paddingBottom: 18 }}
id="input" >
type="text" {styles => (
onKeyPress={e => { <input
if (e.key === 'Enter') { ref={node => {
editList(input.value); input = node;
} }}
}} style={styles}
/> defaultValue={lists.lists[list].name}
id="input"
type="text"
onKeyPress={e => {
if (e.key === 'Enter') {
editList(input.value);
}
}}
/>
)}
</Transition>
<animated.button <animated.button
style={button} style={button}
onClick={() => input.value.trim() && editList(input.value)} onClick={() => input.value.trim() && editList(input.value)}