1 | import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
2 | import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
3 | import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
4 | var _excluded = ["component", "componentProps", "animation", "attr", "paused", "reverse", "repeat", "repeatDelay", "yoyo", "moment", "onChange", "onChangeTimeline", "resetStyle", "killPrevAnim"];
|
5 | import React, { useRef, createElement, useEffect } from 'react';
|
6 | import { findDOMNode } from 'react-dom';
|
7 | import TweenOneJS from 'tween-one';
|
8 | import { toStyleUpperCase, stylesToCss } from 'style-utils';
|
9 | import { objectEqual, dataToArray } from './utils';
|
10 | import { useIsomorphicLayoutEffect } from './utils/common';
|
11 | var TweenOne = React.forwardRef(function (_ref, ref) {
|
12 | var _ref$component = _ref.component,
|
13 | component = _ref$component === void 0 ? 'div' : _ref$component,
|
14 | componentProps = _ref.componentProps,
|
15 | animation = _ref.animation,
|
16 | attr = _ref.attr,
|
17 | paused = _ref.paused,
|
18 | reverse = _ref.reverse,
|
19 | repeat = _ref.repeat,
|
20 | repeatDelay = _ref.repeatDelay,
|
21 | yoyo = _ref.yoyo,
|
22 | moment = _ref.moment,
|
23 | onChange = _ref.onChange,
|
24 | onChangeTimeline = _ref.onChangeTimeline,
|
25 | resetStyle = _ref.resetStyle,
|
26 | _ref$killPrevAnim = _ref.killPrevAnim,
|
27 | killPrevAnim = _ref$killPrevAnim === void 0 ? true : _ref$killPrevAnim,
|
28 | props = _objectWithoutProperties(_ref, _excluded);
|
29 |
|
30 | var _ref2 = props || {},
|
31 | children = _ref2.children,
|
32 | className = _ref2.className,
|
33 | _ref2$style = _ref2.style,
|
34 | style = _ref2$style === void 0 ? {} : _ref2$style;
|
35 |
|
36 | var domRef = useRef();
|
37 | var prevAnim = useRef();
|
38 | var animRef = useRef();
|
39 |
|
40 | var commonFunc = function commonFunc(key, value) {
|
41 | var tween = animRef.current;
|
42 |
|
43 | if (tween) {
|
44 | if (key === 'moment') {
|
45 | if (typeof value === 'number') {
|
46 | tween.goto(value, paused);
|
47 | }
|
48 |
|
49 | return;
|
50 | }
|
51 |
|
52 | tween[key] = !!value;
|
53 | }
|
54 | };
|
55 |
|
56 | useIsomorphicLayoutEffect(function () {
|
57 | commonFunc('paused', paused);
|
58 | }, [paused]);
|
59 |
|
60 | useIsomorphicLayoutEffect(function () {
|
61 | commonFunc('moment', moment);
|
62 | }, [moment]);
|
63 | useIsomorphicLayoutEffect(function () {
|
64 | commonFunc('reverse', reverse);
|
65 | }, [reverse]);
|
66 | useIsomorphicLayoutEffect(function () {
|
67 | if (!domRef.current) {
|
68 | return console.warn('Warning: TweenOne domRef is error.');
|
69 | }
|
70 |
|
71 |
|
72 | if (!objectEqual(animation, prevAnim.current)) {
|
73 | var doms = dataToArray(domRef.current).map(function (item) {
|
74 | return item instanceof Element || !(item instanceof React.Component) ? item : findDOMNode(item);
|
75 | }).filter(function (item, i) {
|
76 | if (!(item instanceof Element)) {
|
77 | console.warn("Warning: TweenOne tag[".concat(i, "] is not dom."));
|
78 | return false;
|
79 | }
|
80 |
|
81 | return item;
|
82 | });
|
83 |
|
84 | if (animRef.current && killPrevAnim) {
|
85 | animRef.current.kill();
|
86 | }
|
87 |
|
88 | if (resetStyle && animRef.current) {
|
89 | var s = !component ? _objectSpread(_objectSpread({}, style), children.props.style) : style;
|
90 | var styleStr = Object.keys(s).map(function (key) {
|
91 | return "".concat(toStyleUpperCase(key), ":").concat(stylesToCss(key, s[key]));
|
92 | }).join(';');
|
93 | doms.forEach(function (item) {
|
94 | item.setAttribute('style', styleStr);
|
95 |
|
96 | delete item._tweenOneVars;
|
97 | });
|
98 | }
|
99 |
|
100 | animRef.current = animation && TweenOneJS(doms, {
|
101 | animation: animation,
|
102 | attr: attr,
|
103 | yoyo: yoyo,
|
104 | moment: moment,
|
105 | repeat: repeat,
|
106 | reverse: reverse,
|
107 | paused: paused,
|
108 | repeatDelay: repeatDelay,
|
109 | onChange: onChange,
|
110 | onChangeTimeline: onChangeTimeline
|
111 | });
|
112 | prevAnim.current = animation;
|
113 | }
|
114 | }, [animation]);
|
115 | useEffect(function () {
|
116 | return function () {
|
117 | if (animRef.current && animRef.current.kill) {
|
118 | animRef.current.kill();
|
119 | }
|
120 | };
|
121 | }, []);
|
122 |
|
123 | var refFunc = function refFunc(c) {
|
124 | domRef.current = c;
|
125 |
|
126 | if (ref && 'current' in ref) {
|
127 | ref.current = c;
|
128 | } else if (typeof ref === 'function') {
|
129 | ref(c);
|
130 | }
|
131 | };
|
132 |
|
133 | if (!component && children && typeof children !== 'string' && typeof children !== 'boolean' && typeof children !== 'number') {
|
134 | var childrenProps = children.props;
|
135 |
|
136 | var _ref3 = childrenProps || {},
|
137 | childStyle = _ref3.style,
|
138 | _ref3$className = _ref3.className,
|
139 | childClass = _ref3$className === void 0 ? '' : _ref3$className;
|
140 |
|
141 |
|
142 | var newStyle = _objectSpread(_objectSpread({}, childStyle), style);
|
143 |
|
144 | var newClassName = className ? "".concat(className, " ").concat(childClass).trim() : childClass;
|
145 | return React.cloneElement(children, {
|
146 | style: newStyle,
|
147 | ref: refFunc,
|
148 | className: _toConsumableArray(new Set(newClassName.split(/\s+/))).join(' ').trim() || undefined
|
149 | });
|
150 | }
|
151 |
|
152 | if (!component) {
|
153 | console.warn('Warning: component is null, children must be ReactElement.');
|
154 | return children;
|
155 | }
|
156 |
|
157 | return createElement(component, _objectSpread(_objectSpread({
|
158 | ref: refFunc
|
159 | }, props), componentProps));
|
160 | });
|
161 | TweenOne.isTweenOne = true;
|
162 | TweenOne.displayName = 'TweenOne';
|
163 | export default TweenOne; |
\ | No newline at end of file |