OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

oops, fix item/itemgroup transition!

Browse source 
It broke because I refactored the CSSTransition into a wrapper component, which doesn't actually work for the react-transition-group API!
This commit is contained in:
Matt Dunn-Rankin 2020-04-27 10:14:13 -07:00
parent 7d4cedb146
commit 08aef8d863
1 changed files with 30 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
src/app/ItemsPanel.js
View file

@ -50,14 +50,14 @@ function ItemsPanel({ outfitState, loading, dispatchToOutfit }) {
) : ( ) : (
<TransitionGroup component={null}> <TransitionGroup component={null}>
{zonesAndItems.map(({ zoneLabel, items }) => ( {zonesAndItems.map(({ zoneLabel, items }) => (
<ItemZoneGroupTransitioner key={zoneLabel}> <CSSTransition key={zoneLabel} {...fadeOutAndRollUpTransition}>
<ItemZoneGroup <ItemZoneGroup
zoneLabel={zoneLabel} zoneLabel={zoneLabel}
items={items} items={items}
outfitState={outfitState} outfitState={outfitState}
dispatchToOutfit={dispatchToOutfit} dispatchToOutfit={dispatchToOutfit}
/> />
</ItemZoneGroupTransitioner> </CSSTransition>
))} ))}
</TransitionGroup> </TransitionGroup>
)} )}
@ -101,7 +101,7 @@ function ItemZoneGroup({ zoneLabel, items, outfitState, dispatchToOutfit }) {
<ItemListContainer> <ItemListContainer>
<TransitionGroup component={null}> <TransitionGroup component={null}>
{items.map((item) => ( {items.map((item) => (
<ItemTransitioner key={item.id}> <CSSTransition key={item.id} {...fadeOutAndRollUpTransition}>
<label> <label>
<VisuallyHidden <VisuallyHidden
as="input" as="input"
@ -125,7 +125,7 @@ function ItemZoneGroup({ zoneLabel, items, outfitState, dispatchToOutfit }) {
dispatchToOutfit={dispatchToOutfit} dispatchToOutfit={dispatchToOutfit}
/> />
</label> </label>
</ItemTransitioner> </CSSTransition>
))} ))}
</TransitionGroup> </TransitionGroup>
</ItemListContainer> </ItemListContainer>
@ -192,65 +192,34 @@ function OutfitHeading({ outfitState, dispatchToOutfit }) {
} }
/** /**
* ItemZoneGroupTransitioner manages the fade-out transition when an * fadeOutAndRollUpTransition is the props for a CSSTransition, to manage the
* ItemZoneGroup is removed. See react-transition-group docs for more info! * fade-out and height decrease when an Item or ItemZoneGroup is removed.
*/ *
function ItemZoneGroupTransitioner({ children }) { * Note that this _cannot_ be implemented as a wrapper component that returns a
return ( * CSSTransition. This is because the CSSTransition must be the direct child of
<CSSTransition * the TransitionGroup, and a wrapper breaks the parent-child relationship.
classNames={css` *
&-exit {
opacity: 1;
height: auto;
}
&-exit-active {
opacity: 0;
height: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
transition: all 0.5s;
}
`}
timeout={500}
onExit={(e) => {
e.style.height = e.offsetHeight + "px";
}}
>
{children}
</CSSTransition>
);
}
/**
* ItemTransitioner manages the fade-out transition when an Item is removed.
* See react-transition-group docs for more info! * See react-transition-group docs for more info!
*/ */
function ItemTransitioner({ children }) { const fadeOutAndRollUpTransition = {
return ( classNames: css`
<CSSTransition &-exit {
classNames={css` opacity: 1;
&-exit { height: auto;
opacity: 1; }
height: auto;
}
&-exit-active { &-exit-active {
opacity: 0; opacity: 0;
height: 0 !important; height: 0 !important;
margin-top: 0 !important; margin-top: 0 !important;
margin-bottom: 0 !important; margin-bottom: 0 !important;
transition: all 0.5s; transition: all 0.5s;
} }
`} `,
timeout={500} timeout: 500,
onExit={(e) => { onExit: (e) => {
e.style.height = e.offsetHeight + "px"; e.style.height = e.offsetHeight + "px";
}} },
> };
{children}
</CSSTransition>
);
}
export default ItemsPanel; export default ItemsPanel;