Closed DariuszMusielak closed 7 years ago
Could you provide a little more context around the ProdGridApp component please? I see you are calling Object.keys(this.state.filterResults)
, so this.state.filterResults
is an object? What are the values?
Stonecutter should use the key
property to differentiate between entering and exiting items, in fact CSSGrid
uses ReactTransitionGroup
under the hood.
You mention it's not working with makeResponsive
, does it work without that? Hopefully we can find the issue.
Ok, I found above issue on stackoverflow without any answer - at the beginning it seems to be similar to my problem.
In my case, enter and exit animations work correctly without makeResponsive. With makeResponsive sadly animations are not working.
Code:
renderGrid = (groups) => {
const { quartInOut } = easings;
const { enter, entered, exit } = enterExitStyle.fromLeftToRight;
const Grid = makeResponsive(measureItems(CSSGrid), {
maxWidth: 1920,
minPadding: 100
});
return (
<Grid
component="ul"
columns={3}
columnWidth={374}
gutterWidth={5}
gutterHeight={5}
layout={layout.pinterest}
duration={800}
easing={quartInOut}
enter={enter}
entered={entered}
exit={exit}
>
{Object.keys(groups).map(roleName => {
return (
<li key={roleName} >
<MembershipList memberships={groups[roleName]} roleName={roleName} />
</li>
)
})}
</Grid>
)
}
const groups = {};
const { memberships } = this.props;
memberships.forEach(membership => {
groups[membership.user_role] = groups[membership.user_role] || []
groups[membership.user_role].push(membership)
});
function mapStateToProps(state, ownProps) {
const { user_email, f2f_date } = ownProps.match.params
const activeProjects = state.projects.filter(project => project.visible).map(project => project.name);
return {
memberships: state.memberships.filter(membership => activeProjects.includes(membership.project_name)),
user_email: user_email,
f2f_date: f2f_date
};
}
export default connect(mapStateToProps, { loadMemberships: membershipActions.loadMemberships })(MembershipsPage);
Apologies, I'm having trouble reproducing. Could you try moving this code:
const Grid = makeResponsive(measureItems(CSSGrid), {
maxWidth: 1920,
minPadding: 100
});
into a higher scope? This only needs to happen once rather than every time renderGrid
is run with new groups
.
Hey @dantrain I wrote the stackoverflow question @DariuszMusielak referenced. I'd given up on using stonecutter in my project because the animations weren't working.. I just tested your answer above and it solves my issue. Luckily my project is still in dev so I'm switching back to stone-cutter.
Cheers :)
Oh wonderful! Sorry for missing this on stackoverflow. I will try and improve the readme to make this clearer.
The description is here: http://stackoverflow.com/questions/41926765/react-stone-cutter-component-enter-and-exit-animations.
I have the same issue for
CSSGrid
.