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 { elementAcceptingRef } from '@mui/utils';
|
6 | import { Transition } from 'react-transition-group';
|
7 | import useTheme from '../styles/useTheme';
|
8 | import { getTransitionProps, reflow } from '../transitions/utils';
|
9 | import useForkRef from '../utils/useForkRef';
|
10 | import { jsx as _jsx } from "react/jsx-runtime";
|
11 |
|
12 | function getScale(value) {
|
13 | return "scale(".concat(value, ", ").concat(Math.pow(value, 2), ")");
|
14 | }
|
15 |
|
16 | var styles = {
|
17 | entering: {
|
18 | opacity: 1,
|
19 | transform: getScale(1)
|
20 | },
|
21 | entered: {
|
22 | opacity: 1,
|
23 | transform: 'none'
|
24 | }
|
25 | };
|
26 |
|
27 |
|
28 |
|
29 |
|
30 |
|
31 | var isWebKit154 = typeof navigator !== 'undefined' && /^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent) && /(os |version\/)15(.|_)4/i.test(navigator.userAgent);
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 | var Grow = React.forwardRef(function Grow(props, ref) {
|
39 | var addEndListener = props.addEndListener,
|
40 | _props$appear = props.appear,
|
41 | appear = _props$appear === void 0 ? true : _props$appear,
|
42 | _children = props.children,
|
43 | easing = props.easing,
|
44 | inProp = props.in,
|
45 | onEnter = props.onEnter,
|
46 | onEntered = props.onEntered,
|
47 | onEntering = props.onEntering,
|
48 | onExit = props.onExit,
|
49 | onExited = props.onExited,
|
50 | onExiting = props.onExiting,
|
51 | style = props.style,
|
52 | _props$timeout = props.timeout,
|
53 | timeout = _props$timeout === void 0 ? 'auto' : _props$timeout,
|
54 | _props$TransitionComp = props.TransitionComponent,
|
55 | TransitionComponent = _props$TransitionComp === void 0 ? Transition : _props$TransitionComp,
|
56 | other = _objectWithoutProperties(props, ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);
|
57 |
|
58 | var timer = React.useRef();
|
59 | var autoTimeout = React.useRef();
|
60 | var theme = useTheme();
|
61 | var nodeRef = React.useRef(null);
|
62 | var foreignRef = useForkRef(_children.ref, ref);
|
63 | var handleRef = useForkRef(nodeRef, foreignRef);
|
64 |
|
65 | var normalizedTransitionCallback = function normalizedTransitionCallback(callback) {
|
66 | return function (maybeIsAppearing) {
|
67 | if (callback) {
|
68 | var node = nodeRef.current;
|
69 |
|
70 | if (maybeIsAppearing === undefined) {
|
71 | callback(node);
|
72 | } else {
|
73 | callback(node, maybeIsAppearing);
|
74 | }
|
75 | }
|
76 | };
|
77 | };
|
78 |
|
79 | var handleEntering = normalizedTransitionCallback(onEntering);
|
80 | var handleEnter = normalizedTransitionCallback(function (node, isAppearing) {
|
81 | reflow(node);
|
82 |
|
83 | var _getTransitionProps = getTransitionProps({
|
84 | style: style,
|
85 | timeout: timeout,
|
86 | easing: easing
|
87 | }, {
|
88 | mode: 'enter'
|
89 | }),
|
90 | transitionDuration = _getTransitionProps.duration,
|
91 | delay = _getTransitionProps.delay,
|
92 | transitionTimingFunction = _getTransitionProps.easing;
|
93 |
|
94 | var duration;
|
95 |
|
96 | if (timeout === 'auto') {
|
97 | duration = theme.transitions.getAutoHeightDuration(node.clientHeight);
|
98 | autoTimeout.current = duration;
|
99 | } else {
|
100 | duration = transitionDuration;
|
101 | }
|
102 |
|
103 | node.style.transition = [theme.transitions.create('opacity', {
|
104 | duration: duration,
|
105 | delay: delay
|
106 | }), theme.transitions.create('transform', {
|
107 | duration: isWebKit154 ? duration : duration * 0.666,
|
108 | delay: delay,
|
109 | easing: transitionTimingFunction
|
110 | })].join(',');
|
111 |
|
112 | if (onEnter) {
|
113 | onEnter(node, isAppearing);
|
114 | }
|
115 | });
|
116 | var handleEntered = normalizedTransitionCallback(onEntered);
|
117 | var handleExiting = normalizedTransitionCallback(onExiting);
|
118 | var handleExit = normalizedTransitionCallback(function (node) {
|
119 | var _getTransitionProps2 = getTransitionProps({
|
120 | style: style,
|
121 | timeout: timeout,
|
122 | easing: easing
|
123 | }, {
|
124 | mode: 'exit'
|
125 | }),
|
126 | transitionDuration = _getTransitionProps2.duration,
|
127 | delay = _getTransitionProps2.delay,
|
128 | transitionTimingFunction = _getTransitionProps2.easing;
|
129 |
|
130 | var duration;
|
131 |
|
132 | if (timeout === 'auto') {
|
133 | duration = theme.transitions.getAutoHeightDuration(node.clientHeight);
|
134 | autoTimeout.current = duration;
|
135 | } else {
|
136 | duration = transitionDuration;
|
137 | }
|
138 |
|
139 | node.style.transition = [theme.transitions.create('opacity', {
|
140 | duration: duration,
|
141 | delay: delay
|
142 | }), theme.transitions.create('transform', {
|
143 | duration: isWebKit154 ? duration : duration * 0.666,
|
144 | delay: isWebKit154 ? delay : delay || duration * 0.333,
|
145 | easing: transitionTimingFunction
|
146 | })].join(',');
|
147 | node.style.opacity = 0;
|
148 | node.style.transform = getScale(0.75);
|
149 |
|
150 | if (onExit) {
|
151 | onExit(node);
|
152 | }
|
153 | });
|
154 | var handleExited = normalizedTransitionCallback(onExited);
|
155 |
|
156 | var handleAddEndListener = function handleAddEndListener(next) {
|
157 | if (timeout === 'auto') {
|
158 | timer.current = setTimeout(next, autoTimeout.current || 0);
|
159 | }
|
160 |
|
161 | if (addEndListener) {
|
162 |
|
163 | addEndListener(nodeRef.current, next);
|
164 | }
|
165 | };
|
166 |
|
167 | React.useEffect(function () {
|
168 | return function () {
|
169 | clearTimeout(timer.current);
|
170 | };
|
171 | }, []);
|
172 | return _jsx(TransitionComponent, _extends({
|
173 | appear: appear,
|
174 | in: inProp,
|
175 | nodeRef: nodeRef,
|
176 | onEnter: handleEnter,
|
177 | onEntered: handleEntered,
|
178 | onEntering: handleEntering,
|
179 | onExit: handleExit,
|
180 | onExited: handleExited,
|
181 | onExiting: handleExiting,
|
182 | addEndListener: handleAddEndListener,
|
183 | timeout: timeout === 'auto' ? null : timeout
|
184 | }, other, {
|
185 | children: function children(state, childProps) {
|
186 | return React.cloneElement(_children, _extends({
|
187 | style: _extends({
|
188 | opacity: 0,
|
189 | transform: getScale(0.75),
|
190 | visibility: state === 'exited' && !inProp ? 'hidden' : undefined
|
191 | }, styles[state], style, _children.props.style),
|
192 | ref: handleRef
|
193 | }, childProps));
|
194 | }
|
195 | }));
|
196 | });
|
197 | process.env.NODE_ENV !== "production" ? Grow.propTypes
|
198 |
|
199 | = {
|
200 |
|
201 |
|
202 |
|
203 |
|
204 |
|
205 | |
206 |
|
207 |
|
208 |
|
209 |
|
210 | addEndListener: PropTypes.func,
|
211 |
|
212 | |
213 |
|
214 |
|
215 |
|
216 |
|
217 | appear: PropTypes.bool,
|
218 |
|
219 | |
220 |
|
221 |
|
222 | children: elementAcceptingRef.isRequired,
|
223 |
|
224 | |
225 |
|
226 |
|
227 |
|
228 | easing: PropTypes.oneOfType([PropTypes.shape({
|
229 | enter: PropTypes.string,
|
230 | exit: PropTypes.string
|
231 | }), PropTypes.string]),
|
232 |
|
233 | |
234 |
|
235 |
|
236 | in: PropTypes.bool,
|
237 |
|
238 | |
239 |
|
240 |
|
241 | onEnter: PropTypes.func,
|
242 |
|
243 | |
244 |
|
245 |
|
246 | onEntered: PropTypes.func,
|
247 |
|
248 | |
249 |
|
250 |
|
251 | onEntering: PropTypes.func,
|
252 |
|
253 | |
254 |
|
255 |
|
256 | onExit: PropTypes.func,
|
257 |
|
258 | |
259 |
|
260 |
|
261 | onExited: PropTypes.func,
|
262 |
|
263 | |
264 |
|
265 |
|
266 | onExiting: PropTypes.func,
|
267 |
|
268 | |
269 |
|
270 |
|
271 | style: PropTypes.object,
|
272 |
|
273 | |
274 |
|
275 |
|
276 |
|
277 |
|
278 |
|
279 |
|
280 | timeout: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.shape({
|
281 | appear: PropTypes.number,
|
282 | enter: PropTypes.number,
|
283 | exit: PropTypes.number
|
284 | })])
|
285 | } : void 0;
|
286 | Grow.muiSupportAuto = true;
|
287 | export default Grow; |
\ | No newline at end of file |