-
Notifications
You must be signed in to change notification settings - Fork 1.9k
/
Transition.tsx
98 lines (80 loc) · 2.42 KB
/
Transition.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import { getTransitionStyles } from './get-transition-styles/get-transition-styles';
import { MantineTransition } from './transitions';
import { useTransition } from './use-transition';
export interface TransitionProps {
/** If set element will not be unmounted from the DOM when it is hidden, `display: none` styles will be applied instead */
keepMounted?: boolean;
/** Transition name or object */
transition?: MantineTransition;
/** Transition duration in ms, `250` by default */
duration?: number;
/** Exit transition duration in ms, `250` by default */
exitDuration?: number;
/** Transition timing function, `theme.transitionTimingFunction` by default */
timingFunction?: string;
/** Determines whether component should be mounted to the DOM */
mounted: boolean;
/** Render function with transition styles argument */
children: (styles: React.CSSProperties) => JSX.Element;
/** Called when exit transition ends */
onExited?: () => void;
/** Called when exit transition starts */
onExit?: () => void;
/** Called when enter transition starts */
onEnter?: () => void;
/** Called when enter transition ends */
onEntered?: () => void;
/** Delay in ms before enter transition starts */
enterDelay?: number;
/** Delay in ms before exit transition starts */
exitDelay?: number;
}
export type TransitionOverride = Partial<Omit<TransitionProps, 'mounted'>>;
export function Transition({
keepMounted,
transition = 'fade',
duration = 250,
exitDuration = duration,
mounted,
children,
timingFunction = 'ease',
onExit,
onEntered,
onEnter,
onExited,
enterDelay,
exitDelay,
}: TransitionProps) {
const { transitionDuration, transitionStatus, transitionTimingFunction } = useTransition({
mounted,
exitDuration,
duration,
timingFunction,
onExit,
onEntered,
onEnter,
onExited,
enterDelay,
exitDelay,
});
if (transitionDuration === 0) {
return mounted ? <>{children({})}</> : keepMounted ? children({ display: 'none' }) : null;
}
return transitionStatus === 'exited' ? (
keepMounted ? (
children({ display: 'none' })
) : null
) : (
<>
{children(
getTransitionStyles({
transition,
duration: transitionDuration,
state: transitionStatus,
timingFunction: transitionTimingFunction,
})
)}
</>
);
}
Transition.displayName = '@mantine/core/Transition';