misc_pterodactyl-panel/resources/scripts/components/elements/Fade.tsx

43 lines
1.1 KiB
TypeScript
Raw Normal View History

2020-07-04 16:46:26 +00:00
import React from 'react';
import tw, { styled } from 'twin.macro';
2020-07-04 16:46:26 +00:00
import CSSTransition, { CSSTransitionProps } from 'react-transition-group/CSSTransition';
interface Props extends Omit<CSSTransitionProps, 'timeout' | 'classNames'> {
timeout: number;
}
const Container = styled.div<{ timeout: number }>`
.fade-enter, .fade-exit, .fade-appear {
2020-07-04 16:46:26 +00:00
will-change: opacity;
}
.fade-enter, .fade-appear {
2020-07-04 16:46:26 +00:00
${tw`opacity-0`};
&.fade-enter-active, &.fade-appear-active {
2020-07-04 16:46:26 +00:00
${tw`opacity-100 transition-opacity ease-in`};
transition-duration: ${props => props.timeout}ms;
}
}
2020-07-04 16:46:26 +00:00
.fade-exit {
${tw`opacity-100`};
2020-07-04 16:46:26 +00:00
&.fade-exit-active {
${tw`opacity-0 transition-opacity ease-in`};
transition-duration: ${props => props.timeout}ms;
}
}
`;
const Fade: React.FC<Props> = ({ timeout, children, ...props }) => (
<Container timeout={timeout}>
<CSSTransition timeout={timeout} classNames={'fade'} {...props}>
{children}
</CSSTransition>
</Container>
);
Fade.displayName = 'Fade';
export default Fade;