stepus53/ustk-todolist
1
0
Fork 0
mirror of https://github.com/usatiuk/ustk-todolist.git synced 2025-10-28 15:47:48 +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 AddIcon from '@material-ui/icons/Add';
import CheckIcon from '@material-ui/icons/Check';
import { animated } from 'react-spring';
import { animated, Transition } from 'react-spring';
import './Selector.css';
@@ -29,18 +29,28 @@ export default function Selector({
let input = null;
return (
<div id="listselector" className="list--input">
<input
ref={node => {
input = node;
}}
id="input"
type="text"
onKeyPress={e => {
if (e.key === 'Enter') {
addList(input.value);
}
}}
/>
<Transition
native
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>
<animated.button
style={button}
onClick={() => input.value.trim() && addList(input.value)}
@@ -54,19 +64,29 @@ export default function Selector({
let input = null;
return (
<div id="listselector" className="list--input">
<input
ref={node => {
input = node;
}}
defaultValue={lists.lists[list].name}
id="input"
type="text"
onKeyPress={e => {
if (e.key === 'Enter') {
editList(input.value);
}
}}
/>
<Transition
native
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>
<animated.button
style={button}
onClick={() => input.value.trim() && editList(input.value)}