Closed piemasters closed 4 years ago
🤔 weird! any chance you could share a repro so I could check it out? That would be super helpful!
Cheers for the reply! I managed to get it working, it seems to be down to some kind of conflict with emotion. In my layout file I moved from using styled components to using the css prop and it suddenly works.
I changed:
import styled from '@emotion/styled';
...
const Content = styled.div`
flex-grow: 1;
`;
...
return (
<Content>
<Header />
{children}
</Content>
)
to:
import { css } from '@emotion/core';
...
const contentStyle = css`
flex-grow: 1;
`;
...
return (
<div css={contentStyle}>
<Header />
{children}
</div>
)
My repos a bit of a mess for debugging atm but I'll try and clean it up a bit and point you to the relevant files if that helps. There seems to be another issue with TransitionLink failing unit tests and not building in Storybook, throwing Cannot read property 'disableAnimation' of undefined - ..gatsby-plugin-transition-link/components/TransitionLink.js:60:34
that I want to fix before pushing changes.
Thanks for the additional info! 🙈 that last error could be a TL bug though!
The repo: https://github.com/piemasters/MiniToTheMax/tree/transition-link
make sure to checkout the transition-link
branch!
The header file: https://github.com/piemasters/MiniToTheMax/blob/transition-link/src/components/header.tsx I've updated this so it has 3 links:
The test that fails: https://github.com/piemasters/MiniToTheMax/blob/transition-link/src/tests/components/header.test.tsx As you can see I've commented out the main test and am just testing the AniLink component mounts, which fails. I'm guessing I need to add something to my jest config?
I've just updated the codebase (and the message above) with clear examples of:
Cannot read property 'disableAnimation' of undefined
when testing with jest & react-testing-library (the same error is thrown in Storybook)Hi! I'm getting the same issue where using the cover does not work, but using anything else (like swipe does):
not working:
export default ({ title, description, path, style }) => (
<AniLink
to={path}
direction="left"
cover
duration={1.25}
bg={`linear-gradient(rgb(101, 84, 192), rgb(64, 50, 148))`}
style={{ width: `100%`, textDecoration: `none` }}
>
<EventStick style={style}>
<EventTitle>{title}</EventTitle>
{description && description.length && (
<EventDescription>{description.toUpperCase()}</EventDescription>
)}
</EventStick>
</AniLink>
)
working:
export default ({ title, description, path, style }) => (
<AniLink
to={path}
direction="left"
swipe
duration={1.25}
style={{width: `100%`, textDecoration: `none`, marginBottom: `10px`}}
>
<EventStick style={style}>
<EventTitle>{title}</EventTitle>
{description && description.length && (
<EventDescription>{description.toUpperCase()}</EventDescription>
)}
</EventStick>
</AniLink>
)
The EventStick is called in a function Row
const Row = ({ index, style }) => {
if(events){
return <EventStick style={style} {...events[index]} />
}
}
which is within an Autosizer (react-virtualized-auto-sizer
) component and List from react-window
<AutoSizer>
{({ height, width }) => (
<List
height={height}
width={width}
itemSize={() => 90}
itemCount={events.length}
>
{Row}
</List>
)}
</AutoSizer>
Let me know if more context is needed!
Hey everyone! Apologies on the super delayed response here. I haven't had any time to work on this package lately :(
This is fixed in gatsby-plugin-transition-link@1.19.2
though!
When using the AniLink
paintDrip
,fade
andswipe
animations they all work fine. However when usingcover
the animation doesn't run and I get the following console warning:Dep versions:
I wondered if you had any idea what the cause could be? I'm sure I've used the above before and it's worked fine and downgrading versions hasn't seemed to have made a difference. Thanks!