1 | import _extends from "@babel/runtime/helpers/esm/extends";
|
2 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
3 | const _excluded = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
|
4 | import * as React from 'react';
|
5 | import PropTypes from 'prop-types';
|
6 | import { Transition } from 'react-transition-group';
|
7 | import { elementAcceptingRef } from '@mui/utils';
|
8 | import useTheme from '../styles/useTheme';
|
9 | import { reflow, getTransitionProps } from '../transitions/utils';
|
10 | import useForkRef from '../utils/useForkRef';
|
11 | import { jsx as _jsx } from "react/jsx-runtime";
|
12 | const styles = {
|
13 | entering: {
|
14 | opacity: 1
|
15 | },
|
16 | entered: {
|
17 | opacity: 1
|
18 | }
|
19 | };
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 | const Fade = React.forwardRef(function Fade(props, ref) {
|
26 | const theme = useTheme();
|
27 | const defaultTimeout = {
|
28 | enter: theme.transitions.duration.enteringScreen,
|
29 | exit: theme.transitions.duration.leavingScreen
|
30 | };
|
31 |
|
32 | const {
|
33 | addEndListener,
|
34 | appear = true,
|
35 | children,
|
36 | easing,
|
37 | in: inProp,
|
38 | onEnter,
|
39 | onEntered,
|
40 | onEntering,
|
41 | onExit,
|
42 | onExited,
|
43 | onExiting,
|
44 | style,
|
45 | timeout = defaultTimeout,
|
46 |
|
47 | TransitionComponent = Transition
|
48 | } = props,
|
49 | other = _objectWithoutPropertiesLoose(props, _excluded);
|
50 |
|
51 | const enableStrictModeCompat = true;
|
52 | const nodeRef = React.useRef(null);
|
53 | const foreignRef = useForkRef(children.ref, ref);
|
54 | const handleRef = useForkRef(nodeRef, foreignRef);
|
55 |
|
56 | const normalizedTransitionCallback = callback => maybeIsAppearing => {
|
57 | if (callback) {
|
58 | const node = nodeRef.current;
|
59 |
|
60 | if (maybeIsAppearing === undefined) {
|
61 | callback(node);
|
62 | } else {
|
63 | callback(node, maybeIsAppearing);
|
64 | }
|
65 | }
|
66 | };
|
67 |
|
68 | const handleEntering = normalizedTransitionCallback(onEntering);
|
69 | const handleEnter = normalizedTransitionCallback((node, isAppearing) => {
|
70 | reflow(node);
|
71 |
|
72 | const transitionProps = getTransitionProps({
|
73 | style,
|
74 | timeout,
|
75 | easing
|
76 | }, {
|
77 | mode: 'enter'
|
78 | });
|
79 | node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);
|
80 | node.style.transition = theme.transitions.create('opacity', transitionProps);
|
81 |
|
82 | if (onEnter) {
|
83 | onEnter(node, isAppearing);
|
84 | }
|
85 | });
|
86 | const handleEntered = normalizedTransitionCallback(onEntered);
|
87 | const handleExiting = normalizedTransitionCallback(onExiting);
|
88 | const handleExit = normalizedTransitionCallback(node => {
|
89 | const transitionProps = getTransitionProps({
|
90 | style,
|
91 | timeout,
|
92 | easing
|
93 | }, {
|
94 | mode: 'exit'
|
95 | });
|
96 | node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);
|
97 | node.style.transition = theme.transitions.create('opacity', transitionProps);
|
98 |
|
99 | if (onExit) {
|
100 | onExit(node);
|
101 | }
|
102 | });
|
103 | const handleExited = normalizedTransitionCallback(onExited);
|
104 |
|
105 | const handleAddEndListener = next => {
|
106 | if (addEndListener) {
|
107 |
|
108 | addEndListener(nodeRef.current, next);
|
109 | }
|
110 | };
|
111 |
|
112 | return _jsx(TransitionComponent, _extends({
|
113 | appear: appear,
|
114 | in: inProp,
|
115 | nodeRef: enableStrictModeCompat ? nodeRef : undefined,
|
116 | onEnter: handleEnter,
|
117 | onEntered: handleEntered,
|
118 | onEntering: handleEntering,
|
119 | onExit: handleExit,
|
120 | onExited: handleExited,
|
121 | onExiting: handleExiting,
|
122 | addEndListener: handleAddEndListener,
|
123 | timeout: timeout
|
124 | }, other, {
|
125 | children: (state, childProps) => {
|
126 | return React.cloneElement(children, _extends({
|
127 | style: _extends({
|
128 | opacity: 0,
|
129 | visibility: state === 'exited' && !inProp ? 'hidden' : undefined
|
130 | }, styles[state], style, children.props.style),
|
131 | ref: handleRef
|
132 | }, childProps));
|
133 | }
|
134 | }));
|
135 | });
|
136 | process.env.NODE_ENV !== "production" ? Fade.propTypes
|
137 |
|
138 | = {
|
139 |
|
140 |
|
141 |
|
142 |
|
143 |
|
144 | |
145 |
|
146 |
|
147 |
|
148 |
|
149 | addEndListener: PropTypes.func,
|
150 |
|
151 | |
152 |
|
153 |
|
154 |
|
155 |
|
156 | appear: PropTypes.bool,
|
157 |
|
158 | |
159 |
|
160 |
|
161 | children: elementAcceptingRef.isRequired,
|
162 |
|
163 | |
164 |
|
165 |
|
166 |
|
167 | easing: PropTypes.oneOfType([PropTypes.shape({
|
168 | enter: PropTypes.string,
|
169 | exit: PropTypes.string
|
170 | }), PropTypes.string]),
|
171 |
|
172 | |
173 |
|
174 |
|
175 | in: PropTypes.bool,
|
176 |
|
177 | |
178 |
|
179 |
|
180 | onEnter: PropTypes.func,
|
181 |
|
182 | |
183 |
|
184 |
|
185 | onEntered: PropTypes.func,
|
186 |
|
187 | |
188 |
|
189 |
|
190 | onEntering: PropTypes.func,
|
191 |
|
192 | |
193 |
|
194 |
|
195 | onExit: PropTypes.func,
|
196 |
|
197 | |
198 |
|
199 |
|
200 | onExited: PropTypes.func,
|
201 |
|
202 | |
203 |
|
204 |
|
205 | onExiting: PropTypes.func,
|
206 |
|
207 | |
208 |
|
209 |
|
210 | style: PropTypes.object,
|
211 |
|
212 | |
213 |
|
214 |
|
215 |
|
216 |
|
217 |
|
218 |
|
219 |
|
220 | timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
|
221 | appear: PropTypes.number,
|
222 | enter: PropTypes.number,
|
223 | exit: PropTypes.number
|
224 | })])
|
225 | } : void 0;
|
226 | export default Fade; |
\ | No newline at end of file |