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

Make modals programatically controllable via a HOC

Browse Source 
This allows entire components to be unmounted when the modal is hidden without affecting the fade in/out of the modal itself.

This also makes it easier to programatically dismiss a modal without having to copy the visibility all over the place, and makes working with props much simpler in those modal components
This commit is contained in:
Dane Everitt
2020-08-17 21:35:11 -07:00
parent d41b86f0ea
commit c28cba92e2
14 changed files with 192 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,14 +8,14 @@ interface Props extends Omit<CSSTransitionProps, 'timeout' | 'classNames'> {
}
const Container = styled.div<{ timeout: number }>`
.fade-enter, .fade-exit {
.fade-enter, .fade-exit, .fade-appear {
will-change: opacity;
}
.fade-enter {
.fade-enter, .fade-appear {
${tw`opacity-0`};
&.fade-enter-active {
&.fade-enter-active, &.fade-appear-active {
${tw`opacity-100 transition-opacity ease-in`};
transition-duration: ${props => props.timeout}ms;
}