Commit 87cd1a0e authored by Martin Fahl's avatar Martin Fahl

adds animation

parent 6cf4330c
......@@ -3,6 +3,8 @@ import PropTypes from 'prop-types'
import Item from "../../container/ItemContainer/ItemContainer";
import { Filter } from "../Filter/Filter";
import { Container, Row, Col, Card, CardBody, ListGroup } from "mdbreact";
import { CSSTransitionGroup } from 'react-transition-group' // ES6
import '../../css/animations.css'
const InventoryList = ({ items, filterTerm, updateFilter, deleteItem }) => (
<Container>
......@@ -13,12 +15,20 @@ const InventoryList = ({ items, filterTerm, updateFilter, deleteItem }) => (
<CardBody>
<Filter filterTerm={filterTerm} updateFilter={updateFilter} />
<ListGroup>
<CSSTransitionGroup
transitionName="example"
transitionAppear={true}
transitionAppearTimeout={600}
transitionEnterTimeout={450}
transitionLeaveTimeout={350}>
{items.map(item =>
<Item
key={item.id}
{...item}
/>
)}
</CSSTransitionGroup>
</ListGroup>
</CardBody>
</Card>
......
......@@ -21,7 +21,9 @@ exports[`InventoryList should render as expected 1`] = `
/>
<ul
className="list-group"
/>
>
<span />
</ul>
</div>
</div>
</div>
......
......@@ -7,7 +7,7 @@ const getItem = (state, props) => state.items.find(item => item.id === props.id)
const getItemQuantity = createSelector(
[getItem],
(item) => item.quantity
(item) => item !== undefined ? item.quantity : 0
)
const mapStateToProps = (state, props) => ({
......
.example-enter {
opacity: 0.01;
}
.example-enter.example-enter-active {
opacity: 1;
transition: opacity 450ms ease-in;
}
.example-leave {
opacity: 1;
}
.example-leave.example-leave-active {
opacity: 0.01;
transition: opacity 350ms ease-in;
}
.example-appear {
opacity: 0.01;
}
.example-appear.example-appear-active {
opacity: 1;
transition: opacity 600ms ease-in;
}
\ No newline at end of file
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
......@@ -6529,7 +6529,7 @@ react-toastify@^3.2.2:
prop-types "^15.6.0"
react-transition-group "^2.2.1"
react-transition-group@^1.2.0, react-transition-group@^1.2.1:
react-transition-group@1.x, react-transition-group@^1.2.0, react-transition-group@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.2.1.tgz#e11f72b257f921b213229a774df46612346c7ca6"
dependencies:
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment