@douyinfe/semi-animation-react 2.36.0-beta.0 → 2.36.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/index.js +0 -7
- package/lib/cjs/src/Animation.js +5 -41
- package/lib/cjs/src/KeyFrames.js +3 -25
- package/lib/cjs/src/StyledAnimation.js +1 -33
- package/lib/cjs/src/StyledTransition.js +5 -40
- package/lib/cjs/src/Transition.js +12 -46
- package/lib/cjs/src/utils/invokeFns.js +0 -2
- package/lib/cjs/src/utils/noop.js +0 -1
- package/lib/cjs/src/utils/string.js +4 -6
- package/lib/es/src/Animation.js +4 -32
- package/lib/es/src/KeyFrames.js +2 -16
- package/lib/es/src/StyledAnimation.js +0 -23
- package/lib/es/src/StyledTransition.js +5 -32
- package/lib/es/src/Transition.js +12 -38
- package/lib/es/src/utils/invokeFns.js +0 -1
- package/lib/es/src/utils/string.js +4 -4
- package/package.json +2 -2
|
@@ -4,26 +4,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _Animation = _interopRequireDefault(require("./Animation"));
|
|
9
|
-
|
|
10
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
-
|
|
14
10
|
var _noop = _interopRequireDefault(require("./utils/noop"));
|
|
15
|
-
|
|
16
11
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
17
|
-
|
|
18
12
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
19
|
-
|
|
20
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
|
-
|
|
22
14
|
var __rest = void 0 && (void 0).__rest || function (s, e) {
|
|
23
15
|
var t = {};
|
|
24
|
-
|
|
25
16
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
26
|
-
|
|
27
17
|
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
28
18
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
29
19
|
}
|
|
@@ -31,23 +21,18 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
|
|
|
31
21
|
};
|
|
32
22
|
/* eslint-disable eqeqeq */
|
|
33
23
|
|
|
34
|
-
|
|
35
24
|
class Transition extends _react.Component {
|
|
36
25
|
constructor() {
|
|
37
26
|
let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
38
27
|
super(props);
|
|
39
|
-
|
|
40
28
|
this._isControlled = () => [true, false, 'enter', 'leave'].includes(this.props.state);
|
|
41
|
-
|
|
42
29
|
this.forwardInstance = instance => {
|
|
43
30
|
this.instance = instance;
|
|
44
31
|
};
|
|
45
|
-
|
|
46
32
|
this.onRest = props => {
|
|
47
33
|
const {
|
|
48
34
|
state
|
|
49
35
|
} = this.state;
|
|
50
|
-
|
|
51
36
|
if (state === 'enter') {
|
|
52
37
|
this.props.didEnter(props);
|
|
53
38
|
} else if (state === 'leave') {
|
|
@@ -57,71 +42,59 @@ class Transition extends _react.Component {
|
|
|
57
42
|
});
|
|
58
43
|
this.props.didLeave(props);
|
|
59
44
|
}
|
|
60
|
-
|
|
61
45
|
this.props.onRest(props);
|
|
62
46
|
};
|
|
63
|
-
|
|
64
47
|
this.onStart = props => {
|
|
65
48
|
const {
|
|
66
49
|
state
|
|
67
50
|
} = this.state;
|
|
68
|
-
|
|
69
51
|
if (state === 'enter') {
|
|
70
52
|
this.props.willEnter(props);
|
|
71
53
|
} else if (state === 'leave') {
|
|
72
54
|
this.props.willLeave(props);
|
|
73
55
|
}
|
|
74
|
-
|
|
75
56
|
this.props.onStart(props);
|
|
76
57
|
};
|
|
77
|
-
|
|
78
58
|
this.state = {
|
|
79
59
|
state: '',
|
|
80
60
|
lastChildren: null,
|
|
81
61
|
currentChildren: null
|
|
82
62
|
};
|
|
83
63
|
}
|
|
84
|
-
|
|
85
64
|
static getDerivedStateFromProps(props, state) {
|
|
86
65
|
const willUpdateStates = {};
|
|
87
|
-
|
|
88
|
-
|
|
66
|
+
if (props.children !== state.currentChildren
|
|
67
|
+
// && (props.children == null || state.currentChildren == null)
|
|
89
68
|
) {
|
|
90
69
|
willUpdateStates.lastChildren = state.currentChildren;
|
|
91
70
|
willUpdateStates.currentChildren = props.children;
|
|
92
|
-
|
|
93
71
|
if (props.children == null) {
|
|
94
72
|
willUpdateStates.state = 'leave';
|
|
95
73
|
} else {
|
|
96
74
|
willUpdateStates.state = 'enter';
|
|
97
75
|
}
|
|
98
76
|
}
|
|
99
|
-
|
|
100
77
|
if (props.state != null) {
|
|
101
78
|
willUpdateStates.state = props.state;
|
|
102
79
|
}
|
|
103
|
-
|
|
104
80
|
return willUpdateStates;
|
|
105
81
|
}
|
|
106
|
-
|
|
107
82
|
componentWillUnmount() {
|
|
108
83
|
if (this.instance) {
|
|
109
84
|
this.instance.destroy();
|
|
110
85
|
this.instance = null;
|
|
111
86
|
}
|
|
112
87
|
}
|
|
113
|
-
|
|
114
88
|
render() {
|
|
115
89
|
const _a = this.props,
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
90
|
+
{
|
|
91
|
+
from: propsFrom,
|
|
92
|
+
enter,
|
|
93
|
+
leave
|
|
94
|
+
} = _a,
|
|
95
|
+
restProps = __rest(_a, ["from", "enter", "leave"]);
|
|
96
|
+
let children;
|
|
97
|
+
// eslint-disable-next-line prefer-const
|
|
125
98
|
let {
|
|
126
99
|
currentChildren,
|
|
127
100
|
lastChildren,
|
|
@@ -129,44 +102,37 @@ class Transition extends _react.Component {
|
|
|
129
102
|
} = this.state;
|
|
130
103
|
let from = {};
|
|
131
104
|
let to = {};
|
|
132
|
-
|
|
133
105
|
const isControlled = this._isControlled();
|
|
134
|
-
|
|
135
106
|
if (isControlled) {
|
|
136
107
|
children = this.props.children;
|
|
137
108
|
state = this.props.state;
|
|
138
109
|
} else if (currentChildren == null && lastChildren == null) {
|
|
139
110
|
return null;
|
|
140
111
|
}
|
|
141
|
-
|
|
142
112
|
if (state === 'enter') {
|
|
143
113
|
from = propsFrom;
|
|
144
114
|
to = enter;
|
|
145
|
-
|
|
146
115
|
if (!isControlled) {
|
|
147
116
|
children = currentChildren;
|
|
148
117
|
}
|
|
149
118
|
} else if (state === 'leave') {
|
|
150
119
|
from = enter;
|
|
151
120
|
to = leave;
|
|
152
|
-
|
|
153
121
|
if (!isControlled) {
|
|
154
122
|
children = lastChildren;
|
|
155
123
|
}
|
|
156
124
|
}
|
|
157
|
-
|
|
158
125
|
return /*#__PURE__*/_react.default.createElement(_Animation.default, Object.assign({}, restProps, {
|
|
159
126
|
force: true,
|
|
160
127
|
from: from,
|
|
161
128
|
to: to,
|
|
162
129
|
onRest: this.onRest,
|
|
163
130
|
onStart: this.onStart
|
|
164
|
-
}), props =>
|
|
131
|
+
}), props =>
|
|
132
|
+
// eslint-disable-next-line no-nested-ternary
|
|
165
133
|
typeof children === 'function' ? children(props) : /*#__PURE__*/(0, _react.isValidElement)(children) ? children : null);
|
|
166
134
|
}
|
|
167
|
-
|
|
168
135
|
}
|
|
169
|
-
|
|
170
136
|
exports.default = Transition;
|
|
171
137
|
Transition.propTypes = {
|
|
172
138
|
children: _propTypes.default.any,
|
|
@@ -4,10 +4,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = invokeFns;
|
|
7
|
-
|
|
8
7
|
function invokeFns(fns) {
|
|
9
8
|
let args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
10
|
-
|
|
11
9
|
if (Array.isArray(fns) && fns.length) {
|
|
12
10
|
fns.forEach(fn => {
|
|
13
11
|
if (typeof fn === 'function') {
|
|
@@ -5,24 +5,22 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.lowerCase = lowerCase;
|
|
7
7
|
exports.upperCase = upperCase;
|
|
8
|
-
|
|
9
8
|
/* eslint-disable eqeqeq */
|
|
10
9
|
function upperCase(str, pos) {
|
|
11
10
|
if (typeof str === 'string') {
|
|
12
|
-
return str
|
|
11
|
+
return str
|
|
12
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
13
13
|
// @ts-ignore
|
|
14
14
|
.split().reduce((total, cur, index) => pos == null || pos === index ? total + cur.toUpperCase() : total + cur, '');
|
|
15
15
|
}
|
|
16
|
-
|
|
17
16
|
return str;
|
|
18
17
|
}
|
|
19
|
-
|
|
20
18
|
function lowerCase(str, pos) {
|
|
21
19
|
if (typeof str === 'string') {
|
|
22
|
-
return str
|
|
20
|
+
return str
|
|
21
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
23
22
|
// @ts-ignore
|
|
24
23
|
.split().reduce((total, cur, index) => pos == null || pos === index ? total + cur.toLowerCase() : total + cur, '');
|
|
25
24
|
}
|
|
26
|
-
|
|
27
25
|
return str;
|
|
28
26
|
}
|
package/lib/es/src/Animation.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/* eslint-disable @typescript-eslint/ban-types */
|
|
2
|
-
|
|
3
2
|
/* eslint-disable react/destructuring-assignment */
|
|
4
3
|
import { PureComponent, isValidElement } from 'react';
|
|
5
4
|
import PropTypes from 'prop-types';
|
|
@@ -9,29 +8,26 @@ export default class Animation extends PureComponent {
|
|
|
9
8
|
constructor() {
|
|
10
9
|
let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
11
10
|
super(props);
|
|
12
|
-
|
|
13
11
|
this.initAnimation = props => {
|
|
14
12
|
// eslint-disable-next-line eqeqeq
|
|
15
|
-
props = props == null ? this.props : props;
|
|
16
|
-
|
|
13
|
+
props = props == null ? this.props : props;
|
|
14
|
+
// eslint-disable-next-line prefer-const
|
|
17
15
|
let {
|
|
18
16
|
from,
|
|
19
17
|
to,
|
|
20
18
|
config,
|
|
21
19
|
reverse
|
|
22
20
|
} = props;
|
|
23
|
-
|
|
24
21
|
if (reverse) {
|
|
25
22
|
[from, to] = [to, from];
|
|
26
23
|
}
|
|
27
|
-
|
|
28
24
|
this.animation = new SemiAnimation({
|
|
29
25
|
from: Object.assign({}, from),
|
|
30
26
|
to: Object.assign({}, to)
|
|
31
27
|
}, Object.assign({}, config));
|
|
32
28
|
events.forEach(event => {
|
|
33
|
-
const propName = `on${event[0].toUpperCase() + event.slice(1)}`;
|
|
34
|
-
|
|
29
|
+
const propName = `on${event[0].toUpperCase() + event.slice(1)}`;
|
|
30
|
+
// eslint-disable-next-line @typescript-eslint/no-shadow
|
|
35
31
|
this.animation.on(event, props => {
|
|
36
32
|
// avoid memory leak
|
|
37
33
|
if (this._mounted && !this._destroyed) {
|
|
@@ -44,61 +40,50 @@ export default class Animation extends PureComponent {
|
|
|
44
40
|
});
|
|
45
41
|
this._destroyed = false;
|
|
46
42
|
};
|
|
47
|
-
|
|
48
43
|
this.bindEvents = () => {
|
|
49
44
|
this.startOrNot = () => {
|
|
50
45
|
const {
|
|
51
46
|
immediate,
|
|
52
47
|
autoStart
|
|
53
48
|
} = this.props;
|
|
54
|
-
|
|
55
49
|
if (immediate) {
|
|
56
50
|
this.end();
|
|
57
51
|
} else if (autoStart) {
|
|
58
52
|
this.start();
|
|
59
53
|
}
|
|
60
54
|
};
|
|
61
|
-
|
|
62
55
|
this.start = () => {
|
|
63
56
|
this.animation && this.animation.start();
|
|
64
57
|
};
|
|
65
|
-
|
|
66
58
|
this.pause = () => {
|
|
67
59
|
this.animation && this.animation.pause();
|
|
68
60
|
};
|
|
69
|
-
|
|
70
61
|
this.stop = () => {
|
|
71
62
|
this.animation && this.animation.stop();
|
|
72
63
|
};
|
|
73
|
-
|
|
74
64
|
this.end = () => {
|
|
75
65
|
this.animation && this.animation.end();
|
|
76
66
|
};
|
|
77
|
-
|
|
78
67
|
this.resume = () => {
|
|
79
68
|
this.animation && this.animation.resume();
|
|
80
69
|
};
|
|
81
|
-
|
|
82
70
|
this.reset = () => {
|
|
83
71
|
if (this.animation) {
|
|
84
72
|
this.animation.reset();
|
|
85
73
|
this.startOrNot();
|
|
86
74
|
}
|
|
87
75
|
};
|
|
88
|
-
|
|
89
76
|
this.reverse = () => {
|
|
90
77
|
if (this.animation) {
|
|
91
78
|
this.animation.reverse();
|
|
92
79
|
this.startOrNot();
|
|
93
80
|
}
|
|
94
81
|
};
|
|
95
|
-
|
|
96
82
|
this.destroy = () => {
|
|
97
83
|
this._destroyed = true;
|
|
98
84
|
this.animation && this.animation.destroy();
|
|
99
85
|
};
|
|
100
86
|
};
|
|
101
|
-
|
|
102
87
|
this.state = {
|
|
103
88
|
currentStyle: {}
|
|
104
89
|
};
|
|
@@ -107,42 +92,33 @@ export default class Animation extends PureComponent {
|
|
|
107
92
|
this.initAnimation();
|
|
108
93
|
this.bindEvents();
|
|
109
94
|
}
|
|
110
|
-
|
|
111
95
|
startOrNot() {
|
|
112
96
|
throw new Error('Method not implemented.');
|
|
113
97
|
}
|
|
114
|
-
|
|
115
98
|
componentDidMount() {
|
|
116
99
|
this._mounted = true;
|
|
117
100
|
const {
|
|
118
101
|
forwardInstance
|
|
119
102
|
} = this.props;
|
|
120
|
-
|
|
121
103
|
if (this.animation === null) {
|
|
122
104
|
// didmount/willUnmount may be called twice when React.StrictMode is true in React 18, we need to ensure that this.animation is correct
|
|
123
105
|
this.initAnimation();
|
|
124
106
|
this.bindEvents();
|
|
125
107
|
}
|
|
126
|
-
|
|
127
108
|
if (typeof forwardInstance === 'function') {
|
|
128
109
|
forwardInstance(this.animation);
|
|
129
110
|
}
|
|
130
|
-
|
|
131
111
|
this.startOrNot();
|
|
132
112
|
}
|
|
133
|
-
|
|
134
113
|
componentWillUnmount() {
|
|
135
114
|
this._mounted = false;
|
|
136
|
-
|
|
137
115
|
if (this.animation) {
|
|
138
116
|
this.animation.destroy();
|
|
139
117
|
this.animation = null;
|
|
140
118
|
}
|
|
141
119
|
}
|
|
142
|
-
|
|
143
120
|
componentDidUpdate() {
|
|
144
121
|
let prevProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
145
|
-
|
|
146
122
|
if (this.props.reset) {
|
|
147
123
|
if (this.props.from !== prevProps.from || this.props.to !== prevProps.to) {
|
|
148
124
|
this.destroy();
|
|
@@ -150,7 +126,6 @@ export default class Animation extends PureComponent {
|
|
|
150
126
|
this.startOrNot();
|
|
151
127
|
}
|
|
152
128
|
}
|
|
153
|
-
|
|
154
129
|
if (this.props.force) {
|
|
155
130
|
if (this.props.to !== prevProps.to) {
|
|
156
131
|
this.initAnimation(Object.assign(Object.assign({}, this.props), {
|
|
@@ -160,12 +135,10 @@ export default class Animation extends PureComponent {
|
|
|
160
135
|
}
|
|
161
136
|
}
|
|
162
137
|
}
|
|
163
|
-
|
|
164
138
|
render() {
|
|
165
139
|
const {
|
|
166
140
|
children
|
|
167
141
|
} = this.props;
|
|
168
|
-
|
|
169
142
|
if (typeof children === 'function') {
|
|
170
143
|
return children(this.animation.getCurrentStates());
|
|
171
144
|
} else if ( /*#__PURE__*/isValidElement(children)) {
|
|
@@ -174,7 +147,6 @@ export default class Animation extends PureComponent {
|
|
|
174
147
|
return null;
|
|
175
148
|
}
|
|
176
149
|
}
|
|
177
|
-
|
|
178
150
|
}
|
|
179
151
|
Animation.propTypes = {
|
|
180
152
|
onStart: PropTypes.func,
|
package/lib/es/src/KeyFrames.js
CHANGED
|
@@ -6,22 +6,17 @@ import Animation from './Animation';
|
|
|
6
6
|
export default class KeyFrames extends Component {
|
|
7
7
|
constructor() {
|
|
8
8
|
var _this;
|
|
9
|
-
|
|
10
9
|
let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
11
10
|
super(props);
|
|
12
11
|
_this = this;
|
|
13
|
-
|
|
14
12
|
this.onFrame = function () {
|
|
15
13
|
let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
16
14
|
const currentStyle = Object.assign({}, props);
|
|
17
|
-
|
|
18
15
|
_this.props.onFrame(currentStyle);
|
|
19
|
-
|
|
20
16
|
_this.setState({
|
|
21
17
|
currentStyle
|
|
22
18
|
});
|
|
23
19
|
};
|
|
24
|
-
|
|
25
20
|
this.next = () => {
|
|
26
21
|
let {
|
|
27
22
|
frameIndex
|
|
@@ -31,7 +26,6 @@ export default class KeyFrames extends Component {
|
|
|
31
26
|
loop
|
|
32
27
|
} = this.props;
|
|
33
28
|
frameIndex++;
|
|
34
|
-
|
|
35
29
|
if (frameIndex < frames.length - 1) {
|
|
36
30
|
this.setState({
|
|
37
31
|
frameIndex
|
|
@@ -39,38 +33,31 @@ export default class KeyFrames extends Component {
|
|
|
39
33
|
} else {
|
|
40
34
|
frameIndex = 0;
|
|
41
35
|
this.props.onRest(this.state.currentStyle);
|
|
42
|
-
|
|
43
36
|
if (loop) {
|
|
44
37
|
this.setState({
|
|
45
38
|
frameIndex
|
|
46
39
|
});
|
|
47
40
|
}
|
|
48
41
|
}
|
|
49
|
-
|
|
50
42
|
this.props.onKeyRest(this.state.currentStyle);
|
|
51
43
|
};
|
|
52
|
-
|
|
53
44
|
this.forwardInstance = instance => {
|
|
54
45
|
this.instance = instance;
|
|
55
|
-
|
|
56
46
|
if (typeof this.props.forwardInstance === 'function') {
|
|
57
47
|
this.props.forwardInstance(this.instance);
|
|
58
48
|
}
|
|
59
49
|
};
|
|
60
|
-
|
|
61
50
|
this.state = {
|
|
62
51
|
currentStyle: {},
|
|
63
52
|
frameIndex: 0
|
|
64
53
|
};
|
|
65
54
|
}
|
|
66
|
-
|
|
67
|
-
|
|
55
|
+
componentDidMount() {
|
|
56
|
+
// this.props.forwardInstance(this.instance);
|
|
68
57
|
}
|
|
69
|
-
|
|
70
58
|
componentWillUnmount() {
|
|
71
59
|
this.instance && this.instance.destroy();
|
|
72
60
|
}
|
|
73
|
-
|
|
74
61
|
render() {
|
|
75
62
|
const {
|
|
76
63
|
children,
|
|
@@ -90,7 +77,6 @@ export default class KeyFrames extends Component {
|
|
|
90
77
|
onRest: this.next
|
|
91
78
|
}), typeof children === 'function' ? children(currentStyle) : children);
|
|
92
79
|
}
|
|
93
|
-
|
|
94
80
|
}
|
|
95
81
|
KeyFrames.propTypes = {
|
|
96
82
|
frames: PropTypes.array,
|
|
@@ -1,11 +1,7 @@
|
|
|
1
1
|
/* eslint-disable react/destructuring-assignment */
|
|
2
|
-
|
|
3
2
|
/* eslint-disable prefer-const */
|
|
4
|
-
|
|
5
3
|
/* eslint-disable eqeqeq */
|
|
6
|
-
|
|
7
4
|
/* eslint-disable import/no-duplicates */
|
|
8
|
-
|
|
9
5
|
/* eslint-disable no-duplicate-imports */
|
|
10
6
|
import { PureComponent, isValidElement, cloneElement, Children } from 'react';
|
|
11
7
|
import PropTypes from 'prop-types';
|
|
@@ -17,11 +13,9 @@ const types = Object.values(styledTypes).reduce((arr, cur) => [...arr, ...cur],
|
|
|
17
13
|
export default class StyledAnimation extends PureComponent {
|
|
18
14
|
constructor() {
|
|
19
15
|
var _this;
|
|
20
|
-
|
|
21
16
|
let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
22
17
|
super(props);
|
|
23
18
|
_this = this;
|
|
24
|
-
|
|
25
19
|
this._generateAnimateEvents = function (child) {
|
|
26
20
|
let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
27
21
|
return {
|
|
@@ -29,47 +23,39 @@ export default class StyledAnimation extends PureComponent {
|
|
|
29
23
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
30
24
|
args[_key] = arguments[_key];
|
|
31
25
|
}
|
|
32
|
-
|
|
33
26
|
return invokeFns([child && child.props && child.props.onAnimationIteration, props.onFrame], args);
|
|
34
27
|
},
|
|
35
28
|
onAnimationStart: function () {
|
|
36
29
|
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
37
30
|
args[_key2] = arguments[_key2];
|
|
38
31
|
}
|
|
39
|
-
|
|
40
32
|
return invokeFns([child && child.props && child.props.onAnimationStart, props.onStart], args);
|
|
41
33
|
},
|
|
42
34
|
onAnimationEnd: function () {
|
|
43
35
|
for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
|
|
44
36
|
args[_key3] = arguments[_key3];
|
|
45
37
|
}
|
|
46
|
-
|
|
47
38
|
return invokeFns([child && child.props && child.props.onAnimationEnd, props.onRest], args);
|
|
48
39
|
}
|
|
49
40
|
};
|
|
50
41
|
};
|
|
51
|
-
|
|
52
42
|
this._hasSpeedClass = function () {
|
|
53
43
|
let speed = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.speed;
|
|
54
44
|
return speed != null && speeds.includes(speed);
|
|
55
45
|
};
|
|
56
|
-
|
|
57
46
|
this._hasTypeClass = function () {
|
|
58
47
|
let type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.type;
|
|
59
48
|
return type != null && types.includes(type);
|
|
60
49
|
};
|
|
61
|
-
|
|
62
50
|
this._hasDelayClass = function () {
|
|
63
51
|
let delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.delay;
|
|
64
52
|
return delay != null && delays.includes(delay);
|
|
65
53
|
};
|
|
66
|
-
|
|
67
54
|
this._hasLoopClass = function () {
|
|
68
55
|
let loop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.loop;
|
|
69
56
|
return loop != null && loops.includes(loop);
|
|
70
57
|
};
|
|
71
58
|
}
|
|
72
|
-
|
|
73
59
|
render() {
|
|
74
60
|
let {
|
|
75
61
|
type,
|
|
@@ -84,15 +70,10 @@ export default class StyledAnimation extends PureComponent {
|
|
|
84
70
|
className,
|
|
85
71
|
fillMode
|
|
86
72
|
} = this.props;
|
|
87
|
-
|
|
88
73
|
const hasTypeClass = this._hasTypeClass();
|
|
89
|
-
|
|
90
74
|
const hasSpeedClass = this._hasSpeedClass();
|
|
91
|
-
|
|
92
75
|
const hasDelayClass = this._hasDelayClass();
|
|
93
|
-
|
|
94
76
|
const hasLoopClass = this._hasLoopClass();
|
|
95
|
-
|
|
96
77
|
const animateCls = className || classnames(`${prefixCls}-animated`, {
|
|
97
78
|
[`${prefixCls}-${type}`]: Boolean(type),
|
|
98
79
|
[`${prefixCls}-speed-${speed}`]: hasSpeedClass,
|
|
@@ -108,25 +89,21 @@ export default class StyledAnimation extends PureComponent {
|
|
|
108
89
|
animationDirection: reverse ? 'alternate' : 'normal',
|
|
109
90
|
animationFillMode: fillMode
|
|
110
91
|
};
|
|
111
|
-
|
|
112
92
|
if ( /*#__PURE__*/isValidElement(children)) {
|
|
113
93
|
children = Children.map(children, child => {
|
|
114
94
|
const animateEvents = this._generateAnimateEvents(child, this.props);
|
|
115
|
-
|
|
116
95
|
return /*#__PURE__*/cloneElement(child, Object.assign({
|
|
117
96
|
className: classnames(child.props.className, animateCls),
|
|
118
97
|
style: Object.assign(Object.assign({}, child.props.style), this.props.style)
|
|
119
98
|
}, animateEvents));
|
|
120
99
|
});
|
|
121
100
|
}
|
|
122
|
-
|
|
123
101
|
return typeof children === 'function' ? children({
|
|
124
102
|
animateCls,
|
|
125
103
|
animateStyle,
|
|
126
104
|
animateEvents: this._generateAnimateEvents(null, this.props)
|
|
127
105
|
}) : children;
|
|
128
106
|
}
|
|
129
|
-
|
|
130
107
|
}
|
|
131
108
|
StyledAnimation.propTypes = {
|
|
132
109
|
className: PropTypes.string,
|