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 actions

Browse Source
This commit is contained in:
Stepan Usatiuk
2018-06-06 23:19:32 +03:00
parent dac4c29b2b
commit 6f34bd1cab
3 changed files with 79 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
react/src/components/App.css
View File

@@ -36,11 +36,6 @@
margin: 1rem 0;
}
#listactions button:hover {
transition: 0.1s ease-in-out;
color: #222222;
}
#filters {
margin-right: 0.75rem;
align-self: center;

89
react/src/components/ListActions.js
View File

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

35
react/src/components/Selector.js
View File

@@ -1,8 +1,9 @@
import React from 'react';
import PropTypes from 'prop-types';
import { IconButton, Select, MenuItem } from '@material-ui/core';
import { Select, MenuItem } from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add';
import CheckIcon from '@material-ui/icons/Check';
import { Spring, animated } from 'react-spring';
import './Selector.css';
@@ -40,12 +41,16 @@ export default function Selector({
}
}}
/>
<IconButton
style={button}
onClick={() => input.value.trim() && addList(input.value)}
>
<AddIcon style={icon} />
</IconButton>
<Spring from={{ opacity: 0 }} to={{ opacity: 1 }}>
{styles => (
<animated.button
style={{ ...button, ...styles }}
onClick={() => input.value.trim() && addList(input.value)}
>
<AddIcon style={icon} />
</animated.button>
)}
</Spring>
</div>
);
}
@@ -66,12 +71,16 @@ export default function Selector({
}
}}
/>
<IconButton
style={button}
onClick={() => input.value.trim() && editList(input.value)}
>
<CheckIcon style={icon} />
</IconButton>
<Spring from={{ opacity: 0 }} to={{ opacity: 1 }}>
{styles => (
<animated.button
style={{ ...button, ...styles }}
onClick={() => input.value.trim() && editList(input.value)}
>
<CheckIcon style={icon} />
</animated.button>
)}
</Spring>
</div>
);
}