1 | "use strict";
|
2 |
|
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4 |
|
5 | Object.defineProperty(exports, "__esModule", {
|
6 | value: true
|
7 | });
|
8 | exports.setTranslateValue = setTranslateValue;
|
9 | exports.default = void 0;
|
10 |
|
11 | var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
12 |
|
13 | var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
14 |
|
15 | var _react = _interopRequireDefault(require("react"));
|
16 |
|
17 | var _propTypes = _interopRequireDefault(require("prop-types"));
|
18 |
|
19 | var _reactDom = _interopRequireDefault(require("react-dom"));
|
20 |
|
21 | var _debounce = _interopRequireDefault(require("../utils/debounce"));
|
22 |
|
23 | var _reactTransitionGroup = require("react-transition-group");
|
24 |
|
25 | var _utils = require("@material-ui/utils");
|
26 |
|
27 | var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
|
28 |
|
29 | var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
|
30 |
|
31 | var _transitions = require("../styles/transitions");
|
32 |
|
33 | var _utils2 = require("../transitions/utils");
|
34 |
|
35 |
|
36 |
|
37 |
|
38 | function getTranslateValue(direction, node) {
|
39 | var rect = node.getBoundingClientRect();
|
40 | var transform;
|
41 |
|
42 | if (node.fakeTransform) {
|
43 | transform = node.fakeTransform;
|
44 | } else {
|
45 | var computedStyle = window.getComputedStyle(node);
|
46 | transform = computedStyle.getPropertyValue('-webkit-transform') || computedStyle.getPropertyValue('transform');
|
47 | }
|
48 |
|
49 | var offsetX = 0;
|
50 | var offsetY = 0;
|
51 |
|
52 | if (transform && transform !== 'none' && typeof transform === 'string') {
|
53 | var transformValues = transform.split('(')[1].split(')')[0].split(',');
|
54 | offsetX = parseInt(transformValues[4], 10);
|
55 | offsetY = parseInt(transformValues[5], 10);
|
56 | }
|
57 |
|
58 | if (direction === 'left') {
|
59 | return "translateX(".concat(window.innerWidth, "px) translateX(-").concat(rect.left - offsetX, "px)");
|
60 | }
|
61 |
|
62 | if (direction === 'right') {
|
63 | return "translateX(-".concat(rect.left + rect.width - offsetX, "px)");
|
64 | }
|
65 |
|
66 | if (direction === 'up') {
|
67 | return "translateY(".concat(window.innerHeight, "px) translateY(-").concat(rect.top - offsetY, "px)");
|
68 | }
|
69 |
|
70 |
|
71 | return "translateY(-".concat(rect.top + rect.height - offsetY, "px)");
|
72 | }
|
73 |
|
74 | function setTranslateValue(direction, node) {
|
75 | var transform = getTranslateValue(direction, node);
|
76 |
|
77 | if (transform) {
|
78 | node.style.webkitTransform = transform;
|
79 | node.style.transform = transform;
|
80 | }
|
81 | }
|
82 |
|
83 | var defaultTimeout = {
|
84 | enter: _transitions.duration.enteringScreen,
|
85 | exit: _transitions.duration.leavingScreen
|
86 | };
|
87 |
|
88 |
|
89 |
|
90 |
|
91 |
|
92 | var Slide = _react.default.forwardRef(function Slide(props, ref) {
|
93 | var children = props.children,
|
94 | _props$direction = props.direction,
|
95 | direction = _props$direction === void 0 ? 'down' : _props$direction,
|
96 | inProp = props.in,
|
97 | onEnter = props.onEnter,
|
98 | onEntering = props.onEntering,
|
99 | onExit = props.onExit,
|
100 | onExited = props.onExited,
|
101 | style = props.style,
|
102 | _props$timeout = props.timeout,
|
103 | timeout = _props$timeout === void 0 ? defaultTimeout : _props$timeout,
|
104 | other = (0, _objectWithoutProperties2.default)(props, ["children", "direction", "in", "onEnter", "onEntering", "onExit", "onExited", "style", "timeout"]);
|
105 | var theme = (0, _useTheme.default)();
|
106 |
|
107 | var childrenRef = _react.default.useRef(null);
|
108 | |
109 |
|
110 |
|
111 |
|
112 |
|
113 | var handleOwnRef = _react.default.useCallback(function (instance) {
|
114 |
|
115 | childrenRef.current = _reactDom.default.findDOMNode(instance);
|
116 | }, []);
|
117 |
|
118 | var handleRefIntermediary = (0, _useForkRef.default)(children.ref, handleOwnRef);
|
119 | var handleRef = (0, _useForkRef.default)(handleRefIntermediary, ref);
|
120 |
|
121 | var handleEnter = function handleEnter(_, isAppearing) {
|
122 | var node = childrenRef.current;
|
123 | setTranslateValue(direction, node);
|
124 | (0, _utils2.reflow)(node);
|
125 |
|
126 | if (onEnter) {
|
127 | onEnter(node, isAppearing);
|
128 | }
|
129 | };
|
130 |
|
131 | var handleEntering = function handleEntering(_, isAppearing) {
|
132 | var node = childrenRef.current;
|
133 | var transitionProps = (0, _utils2.getTransitionProps)({
|
134 | timeout: timeout,
|
135 | style: style
|
136 | }, {
|
137 | mode: 'enter'
|
138 | });
|
139 | node.style.webkitTransition = theme.transitions.create('-webkit-transform', (0, _extends2.default)({}, transitionProps, {
|
140 | easing: theme.transitions.easing.easeOut
|
141 | }));
|
142 | node.style.transition = theme.transitions.create('transform', (0, _extends2.default)({}, transitionProps, {
|
143 | easing: theme.transitions.easing.easeOut
|
144 | }));
|
145 | node.style.webkitTransform = 'none';
|
146 | node.style.transform = 'none';
|
147 |
|
148 | if (onEntering) {
|
149 | onEntering(node, isAppearing);
|
150 | }
|
151 | };
|
152 |
|
153 | var handleExit = function handleExit() {
|
154 | var node = childrenRef.current;
|
155 | var transitionProps = (0, _utils2.getTransitionProps)({
|
156 | timeout: timeout,
|
157 | style: style
|
158 | }, {
|
159 | mode: 'exit'
|
160 | });
|
161 | node.style.webkitTransition = theme.transitions.create('-webkit-transform', (0, _extends2.default)({}, transitionProps, {
|
162 | easing: theme.transitions.easing.sharp
|
163 | }));
|
164 | node.style.transition = theme.transitions.create('transform', (0, _extends2.default)({}, transitionProps, {
|
165 | easing: theme.transitions.easing.sharp
|
166 | }));
|
167 | setTranslateValue(direction, node);
|
168 |
|
169 | if (onExit) {
|
170 | onExit(node);
|
171 | }
|
172 | };
|
173 |
|
174 | var handleExited = function handleExited() {
|
175 | var node = childrenRef.current;
|
176 |
|
177 | node.style.webkitTransition = '';
|
178 | node.style.transition = '';
|
179 |
|
180 | if (onExited) {
|
181 | onExited(node);
|
182 | }
|
183 | };
|
184 |
|
185 | var updatePosition = _react.default.useCallback(function () {
|
186 | if (childrenRef.current) {
|
187 | setTranslateValue(direction, childrenRef.current);
|
188 | }
|
189 | }, [direction]);
|
190 |
|
191 | _react.default.useEffect(function () {
|
192 |
|
193 | if (!inProp && direction !== 'down' && direction !== 'right') {
|
194 | var handleResize = (0, _debounce.default)(function () {
|
195 | if (childrenRef.current) {
|
196 | setTranslateValue(direction, childrenRef.current);
|
197 | }
|
198 | });
|
199 | window.addEventListener('resize', handleResize);
|
200 | return function () {
|
201 | handleResize.clear();
|
202 | window.removeEventListener('resize', handleResize);
|
203 | };
|
204 | }
|
205 |
|
206 | return undefined;
|
207 | }, [direction, inProp]);
|
208 |
|
209 | _react.default.useEffect(function () {
|
210 | if (!inProp) {
|
211 |
|
212 |
|
213 | updatePosition();
|
214 | }
|
215 | }, [inProp, updatePosition]);
|
216 |
|
217 | return _react.default.createElement(_reactTransitionGroup.Transition, (0, _extends2.default)({
|
218 | onEnter: handleEnter,
|
219 | onEntering: handleEntering,
|
220 | onExit: handleExit,
|
221 | onExited: handleExited,
|
222 | appear: true,
|
223 | in: inProp,
|
224 | timeout: timeout
|
225 | }, other), function (state, childProps) {
|
226 | return _react.default.cloneElement(children, (0, _extends2.default)({
|
227 | ref: handleRef,
|
228 | style: (0, _extends2.default)({
|
229 | visibility: state === 'exited' && !inProp ? 'hidden' : undefined
|
230 | }, style, {}, children.props.style)
|
231 | }, childProps));
|
232 | });
|
233 | });
|
234 |
|
235 | process.env.NODE_ENV !== "production" ? Slide.propTypes = {
|
236 | |
237 |
|
238 |
|
239 | children: _utils.elementAcceptingRef,
|
240 |
|
241 | |
242 |
|
243 |
|
244 | direction: _propTypes.default.oneOf(['left', 'right', 'up', 'down']),
|
245 |
|
246 | |
247 |
|
248 |
|
249 | in: _propTypes.default.bool,
|
250 |
|
251 | |
252 |
|
253 |
|
254 | onEnter: _propTypes.default.func,
|
255 |
|
256 | |
257 |
|
258 |
|
259 | onEntering: _propTypes.default.func,
|
260 |
|
261 | |
262 |
|
263 |
|
264 | onExit: _propTypes.default.func,
|
265 |
|
266 | |
267 |
|
268 |
|
269 | onExited: _propTypes.default.func,
|
270 |
|
271 | |
272 |
|
273 |
|
274 | style: _propTypes.default.object,
|
275 |
|
276 | |
277 |
|
278 |
|
279 |
|
280 | timeout: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
|
281 | enter: _propTypes.default.number,
|
282 | exit: _propTypes.default.number
|
283 | })])
|
284 | } : void 0;
|
285 | var _default = Slide;
|
286 | exports.default = _default; |
\ | No newline at end of file |