@douyinfe/semi-animation-react 2.36.0-alpha.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
|
@@ -1,16 +1,12 @@
|
|
|
1
1
|
var __rest = this && this.__rest || function (s, e) {
|
|
2
2
|
var t = {};
|
|
3
|
-
|
|
4
3
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
5
|
-
|
|
6
4
|
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
5
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
8
6
|
}
|
|
9
7
|
return t;
|
|
10
8
|
};
|
|
11
9
|
/* eslint-disable eqeqeq */
|
|
12
|
-
|
|
13
|
-
|
|
14
10
|
import React, { Component } from 'react';
|
|
15
11
|
import PropTypes from 'prop-types';
|
|
16
12
|
import StyledAnimation from './StyledAnimation';
|
|
@@ -19,14 +15,11 @@ export default class StyledTransition extends Component {
|
|
|
19
15
|
constructor() {
|
|
20
16
|
let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
21
17
|
super(props);
|
|
22
|
-
|
|
23
18
|
this._isControlled = () => [true, false, 'enter', 'leave'].includes(this.props.state);
|
|
24
|
-
|
|
25
19
|
this.onRest = props => {
|
|
26
20
|
const {
|
|
27
21
|
state
|
|
28
22
|
} = this.state;
|
|
29
|
-
|
|
30
23
|
if (state === 'enter') {
|
|
31
24
|
this.props.didEnter(props);
|
|
32
25
|
} else if (state === 'leave') {
|
|
@@ -36,100 +29,80 @@ export default class StyledTransition extends Component {
|
|
|
36
29
|
});
|
|
37
30
|
this.props.didLeave(props);
|
|
38
31
|
}
|
|
39
|
-
|
|
40
32
|
this.props.onRest(props);
|
|
41
33
|
};
|
|
42
|
-
|
|
43
34
|
this.onStart = props => {
|
|
44
35
|
const {
|
|
45
36
|
state
|
|
46
37
|
} = this.state;
|
|
47
|
-
|
|
48
38
|
if (state === 'enter') {
|
|
49
39
|
this.props.willEnter(props);
|
|
50
40
|
} else if (state === 'leave') {
|
|
51
41
|
this.props.willLeave(props);
|
|
52
42
|
}
|
|
53
|
-
|
|
54
43
|
this.props.onStart(props);
|
|
55
44
|
};
|
|
56
|
-
|
|
57
45
|
this.state = {
|
|
58
46
|
state: '',
|
|
59
47
|
lastChildren: null,
|
|
60
48
|
currentChildren: null
|
|
61
49
|
};
|
|
62
50
|
}
|
|
63
|
-
|
|
64
51
|
static getDerivedStateFromProps(props, state) {
|
|
65
52
|
const willUpdateStates = {};
|
|
66
|
-
|
|
67
53
|
if (props.children !== state.currentChildren) {
|
|
68
54
|
willUpdateStates.lastChildren = state.currentChildren;
|
|
69
55
|
willUpdateStates.currentChildren = props.children;
|
|
70
|
-
|
|
71
56
|
if (props.children == null) {
|
|
72
57
|
willUpdateStates.state = 'leave';
|
|
73
58
|
} else {
|
|
74
59
|
willUpdateStates.state = 'enter';
|
|
75
60
|
}
|
|
76
61
|
}
|
|
77
|
-
|
|
78
62
|
if (props.state != null && props.state !== state.state) {
|
|
79
63
|
willUpdateStates.state = props.state;
|
|
80
64
|
}
|
|
81
|
-
|
|
82
65
|
return willUpdateStates;
|
|
83
66
|
}
|
|
84
|
-
|
|
85
67
|
render() {
|
|
86
68
|
const _a = this.props,
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
69
|
+
{
|
|
70
|
+
enter,
|
|
71
|
+
leave
|
|
72
|
+
} = _a,
|
|
73
|
+
restProps = __rest(_a, ["enter", "leave"]);
|
|
93
74
|
const {
|
|
94
75
|
currentChildren,
|
|
95
76
|
lastChildren
|
|
96
77
|
} = this.state;
|
|
97
|
-
|
|
98
78
|
const isControlled = this._isControlled();
|
|
99
|
-
|
|
100
79
|
let children, type;
|
|
101
80
|
let {
|
|
102
81
|
state
|
|
103
82
|
} = this.state;
|
|
104
|
-
|
|
105
83
|
if (isControlled) {
|
|
106
84
|
children = this.props.children;
|
|
107
85
|
state = this.props.state;
|
|
108
86
|
} else if (currentChildren == null && lastChildren == null) {
|
|
109
87
|
return null;
|
|
110
88
|
}
|
|
111
|
-
|
|
112
89
|
if (state === 'enter') {
|
|
113
90
|
type = enter;
|
|
114
|
-
|
|
115
91
|
if (!isControlled) {
|
|
116
92
|
children = currentChildren;
|
|
117
93
|
}
|
|
118
94
|
} else if (state === 'leave') {
|
|
119
95
|
type = leave;
|
|
120
|
-
|
|
121
96
|
if (!isControlled) {
|
|
122
97
|
children = lastChildren;
|
|
123
98
|
}
|
|
124
99
|
}
|
|
125
|
-
|
|
126
100
|
return /*#__PURE__*/React.createElement(StyledAnimation, Object.assign({}, restProps, {
|
|
127
101
|
type: type,
|
|
128
102
|
onStart: this.onStart,
|
|
129
103
|
onRest: this.onRest
|
|
130
104
|
}), children);
|
|
131
105
|
}
|
|
132
|
-
|
|
133
106
|
}
|
|
134
107
|
StyledTransition.propTypes = {
|
|
135
108
|
state: PropTypes.string,
|
package/lib/es/src/Transition.js
CHANGED
|
@@ -1,16 +1,12 @@
|
|
|
1
1
|
var __rest = this && this.__rest || function (s, e) {
|
|
2
2
|
var t = {};
|
|
3
|
-
|
|
4
3
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
5
|
-
|
|
6
4
|
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
5
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
8
6
|
}
|
|
9
7
|
return t;
|
|
10
8
|
};
|
|
11
9
|
/* eslint-disable eqeqeq */
|
|
12
|
-
|
|
13
|
-
|
|
14
10
|
import Animation from './Animation';
|
|
15
11
|
import PropTypes from 'prop-types';
|
|
16
12
|
import React, { Component, isValidElement } from 'react';
|
|
@@ -19,18 +15,14 @@ export default class Transition extends Component {
|
|
|
19
15
|
constructor() {
|
|
20
16
|
let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
21
17
|
super(props);
|
|
22
|
-
|
|
23
18
|
this._isControlled = () => [true, false, 'enter', 'leave'].includes(this.props.state);
|
|
24
|
-
|
|
25
19
|
this.forwardInstance = instance => {
|
|
26
20
|
this.instance = instance;
|
|
27
21
|
};
|
|
28
|
-
|
|
29
22
|
this.onRest = props => {
|
|
30
23
|
const {
|
|
31
24
|
state
|
|
32
25
|
} = this.state;
|
|
33
|
-
|
|
34
26
|
if (state === 'enter') {
|
|
35
27
|
this.props.didEnter(props);
|
|
36
28
|
} else if (state === 'leave') {
|
|
@@ -40,71 +32,59 @@ export default class Transition extends Component {
|
|
|
40
32
|
});
|
|
41
33
|
this.props.didLeave(props);
|
|
42
34
|
}
|
|
43
|
-
|
|
44
35
|
this.props.onRest(props);
|
|
45
36
|
};
|
|
46
|
-
|
|
47
37
|
this.onStart = props => {
|
|
48
38
|
const {
|
|
49
39
|
state
|
|
50
40
|
} = this.state;
|
|
51
|
-
|
|
52
41
|
if (state === 'enter') {
|
|
53
42
|
this.props.willEnter(props);
|
|
54
43
|
} else if (state === 'leave') {
|
|
55
44
|
this.props.willLeave(props);
|
|
56
45
|
}
|
|
57
|
-
|
|
58
46
|
this.props.onStart(props);
|
|
59
47
|
};
|
|
60
|
-
|
|
61
48
|
this.state = {
|
|
62
49
|
state: '',
|
|
63
50
|
lastChildren: null,
|
|
64
51
|
currentChildren: null
|
|
65
52
|
};
|
|
66
53
|
}
|
|
67
|
-
|
|
68
54
|
static getDerivedStateFromProps(props, state) {
|
|
69
55
|
const willUpdateStates = {};
|
|
70
|
-
|
|
71
|
-
|
|
56
|
+
if (props.children !== state.currentChildren
|
|
57
|
+
// && (props.children == null || state.currentChildren == null)
|
|
72
58
|
) {
|
|
73
59
|
willUpdateStates.lastChildren = state.currentChildren;
|
|
74
60
|
willUpdateStates.currentChildren = props.children;
|
|
75
|
-
|
|
76
61
|
if (props.children == null) {
|
|
77
62
|
willUpdateStates.state = 'leave';
|
|
78
63
|
} else {
|
|
79
64
|
willUpdateStates.state = 'enter';
|
|
80
65
|
}
|
|
81
66
|
}
|
|
82
|
-
|
|
83
67
|
if (props.state != null) {
|
|
84
68
|
willUpdateStates.state = props.state;
|
|
85
69
|
}
|
|
86
|
-
|
|
87
70
|
return willUpdateStates;
|
|
88
71
|
}
|
|
89
|
-
|
|
90
72
|
componentWillUnmount() {
|
|
91
73
|
if (this.instance) {
|
|
92
74
|
this.instance.destroy();
|
|
93
75
|
this.instance = null;
|
|
94
76
|
}
|
|
95
77
|
}
|
|
96
|
-
|
|
97
78
|
render() {
|
|
98
79
|
const _a = this.props,
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
80
|
+
{
|
|
81
|
+
from: propsFrom,
|
|
82
|
+
enter,
|
|
83
|
+
leave
|
|
84
|
+
} = _a,
|
|
85
|
+
restProps = __rest(_a, ["from", "enter", "leave"]);
|
|
86
|
+
let children;
|
|
87
|
+
// eslint-disable-next-line prefer-const
|
|
108
88
|
let {
|
|
109
89
|
currentChildren,
|
|
110
90
|
lastChildren,
|
|
@@ -112,42 +92,36 @@ export default class Transition extends Component {
|
|
|
112
92
|
} = this.state;
|
|
113
93
|
let from = {};
|
|
114
94
|
let to = {};
|
|
115
|
-
|
|
116
95
|
const isControlled = this._isControlled();
|
|
117
|
-
|
|
118
96
|
if (isControlled) {
|
|
119
97
|
children = this.props.children;
|
|
120
98
|
state = this.props.state;
|
|
121
99
|
} else if (currentChildren == null && lastChildren == null) {
|
|
122
100
|
return null;
|
|
123
101
|
}
|
|
124
|
-
|
|
125
102
|
if (state === 'enter') {
|
|
126
103
|
from = propsFrom;
|
|
127
104
|
to = enter;
|
|
128
|
-
|
|
129
105
|
if (!isControlled) {
|
|
130
106
|
children = currentChildren;
|
|
131
107
|
}
|
|
132
108
|
} else if (state === 'leave') {
|
|
133
109
|
from = enter;
|
|
134
110
|
to = leave;
|
|
135
|
-
|
|
136
111
|
if (!isControlled) {
|
|
137
112
|
children = lastChildren;
|
|
138
113
|
}
|
|
139
114
|
}
|
|
140
|
-
|
|
141
115
|
return /*#__PURE__*/React.createElement(Animation, Object.assign({}, restProps, {
|
|
142
116
|
force: true,
|
|
143
117
|
from: from,
|
|
144
118
|
to: to,
|
|
145
119
|
onRest: this.onRest,
|
|
146
120
|
onStart: this.onStart
|
|
147
|
-
}), props =>
|
|
121
|
+
}), props =>
|
|
122
|
+
// eslint-disable-next-line no-nested-ternary
|
|
148
123
|
typeof children === 'function' ? children(props) : /*#__PURE__*/isValidElement(children) ? children : null);
|
|
149
124
|
}
|
|
150
|
-
|
|
151
125
|
}
|
|
152
126
|
Transition.propTypes = {
|
|
153
127
|
children: PropTypes.any,
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
/* eslint-disable eqeqeq */
|
|
2
2
|
export function upperCase(str, pos) {
|
|
3
3
|
if (typeof str === 'string') {
|
|
4
|
-
return str
|
|
4
|
+
return str
|
|
5
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
5
6
|
// @ts-ignore
|
|
6
7
|
.split().reduce((total, cur, index) => pos == null || pos === index ? total + cur.toUpperCase() : total + cur, '');
|
|
7
8
|
}
|
|
8
|
-
|
|
9
9
|
return str;
|
|
10
10
|
}
|
|
11
11
|
export function lowerCase(str, pos) {
|
|
12
12
|
if (typeof str === 'string') {
|
|
13
|
-
return str
|
|
13
|
+
return str
|
|
14
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
14
15
|
// @ts-ignore
|
|
15
16
|
.split().reduce((total, cur, index) => pos == null || pos === index ? total + cur.toLowerCase() : total + cur, '');
|
|
16
17
|
}
|
|
17
|
-
|
|
18
18
|
return str;
|
|
19
19
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@douyinfe/semi-animation-react",
|
|
3
|
-
"version": "2.36.0
|
|
3
|
+
"version": "2.36.0",
|
|
4
4
|
"description": "motion library for semi-ui-react",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"motion",
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"prop-types": "^15.7.2",
|
|
44
44
|
"react-storybook-addon-props-combinations": "^1.1.0"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "597a4a6279411ed623d2072f1bcde3f2f3983985"
|
|
47
47
|
}
|