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