MrUnknownDE/panel
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/panel.git synced 2026-04-19 06:43:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

ui: I HATE STYLED-COMPONENTS WITH TYPESCRIPT

Browse Source
This commit is contained in:
Matthew Penner
2021-07-22 11:15:27 -06:00
parent 23de3d68f3
commit 361596e051
40 changed files with 180 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
resources/scripts/components/elements/Fade.tsx
View File

@@ -1,6 +1,5 @@
import React from 'react';
import tw from 'twin.macro';
import styled from 'styled-components/macro';
import tw, { styled } from 'twin.macro';
import CSSTransition, { CSSTransitionProps } from 'react-transition-group/CSSTransition';
interface Props extends Omit<CSSTransitionProps, 'timeout' | 'classNames'> {
@@ -11,19 +10,19 @@ const Container = styled.div<{ timeout: number }>`
.fade-enter, .fade-exit, .fade-appear {
will-change: opacity;
}
.fade-enter, .fade-appear {
${tw`opacity-0`};
&.fade-enter-active, &.fade-appear-active {
${tw`opacity-100 transition-opacity ease-in`};
transition-duration: ${props => props.timeout}ms;
}
}
.fade-exit {
${tw`opacity-100`};
&.fade-exit-active {
${tw`opacity-0 transition-opacity ease-in`};
transition-duration: ${props => props.timeout}ms;