@douyinfe/semi-animation-react 2.24.3 → 2.25.0-alpha.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.
Files changed (18) hide show
  1. package/lib/cjs/index.js +0 -7
  2. package/lib/cjs/src/Animation.js +3 -42
  3. package/lib/cjs/src/KeyFrames.js +2 -26
  4. package/lib/cjs/src/StyledAnimation.js +5 -43
  5. package/lib/cjs/src/StyledTransition.js +5 -42
  6. package/lib/cjs/src/Transition.js +11 -48
  7. package/lib/cjs/src/utils/invokeFns.js +0 -2
  8. package/lib/cjs/src/utils/noop.js +0 -2
  9. package/lib/cjs/src/utils/string.js +2 -7
  10. package/lib/es/src/Animation.js +3 -34
  11. package/lib/es/src/KeyFrames.js +2 -17
  12. package/lib/es/src/StyledAnimation.js +5 -33
  13. package/lib/es/src/StyledTransition.js +5 -33
  14. package/lib/es/src/Transition.js +11 -39
  15. package/lib/es/src/utils/invokeFns.js +0 -1
  16. package/lib/es/src/utils/noop.js +0 -1
  17. package/lib/es/src/utils/string.js +2 -5
  18. package/package.json +44 -45
package/lib/es/src/StyledTransition.js CHANGED
@@ -1,16 +1,11 @@
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
- /* eslint-disable eqeqeq */
12
-
13
-
14
9
  import React, { Component } from 'react';
15
10
  import PropTypes from 'prop-types';
16
11
  import StyledAnimation from './StyledAnimation';
@@ -19,14 +14,11 @@ export default class StyledTransition extends Component {
19
14
  constructor() {
20
15
  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
21
16
  super(props);
22
-
23
17
  this._isControlled = () => [true, false, 'enter', 'leave'].includes(this.props.state);
24
-
25
18
  this.onRest = props => {
26
19
  const {
27
20
  state
28
21
  } = this.state;
29
-
30
22
  if (state === 'enter') {
31
23
  this.props.didEnter(props);
32
24
  } else if (state === 'leave') {
@@ -36,100 +28,80 @@ export default class StyledTransition extends Component {
36
28
  });
37
29
  this.props.didLeave(props);
38
30
  }
39
-
40
31
  this.props.onRest(props);
41
32
  };
42
-
43
33
  this.onStart = props => {
44
34
  const {
45
35
  state
46
36
  } = this.state;
47
-
48
37
  if (state === 'enter') {
49
38
  this.props.willEnter(props);
50
39
  } else if (state === 'leave') {
51
40
  this.props.willLeave(props);
52
41
  }
53
-
54
42
  this.props.onStart(props);
55
43
  };
56
-
57
44
  this.state = {
58
45
  state: '',
59
46
  lastChildren: null,
60
47
  currentChildren: null
61
48
  };
62
49
  }
63
-
64
50
  static getDerivedStateFromProps(props, state) {
65
51
  const willUpdateStates = {};
66
-
67
52
  if (props.children !== state.currentChildren) {
68
53
  willUpdateStates.lastChildren = state.currentChildren;
69
54
  willUpdateStates.currentChildren = props.children;
70
-
71
55
  if (props.children == null) {
72
56
  willUpdateStates.state = 'leave';
73
57
  } else {
74
58
  willUpdateStates.state = 'enter';
75
59
  }
76
60
  }
77
-
78
61
  if (props.state != null && props.state !== state.state) {
79
62
  willUpdateStates.state = props.state;
80
63
  }
81
-
82
64
  return willUpdateStates;
83
65
  }
84
-
85
66
  render() {
86
67
  const _a = this.props,
87
- {
88
- enter,
89
- leave
90
- } = _a,
91
- restProps = __rest(_a, ["enter", "leave"]);
92
-
68
+ {
69
+ enter,
70
+ leave
71
+ } = _a,
72
+ restProps = __rest(_a, ["enter", "leave"]);
93
73
  const {
94
74
  currentChildren,
95
75
  lastChildren
96
76
  } = this.state;
97
-
98
77
  const isControlled = this._isControlled();
99
-
100
78
  let children, type;
101
79
  let {
102
80
  state
103
81
  } = this.state;
104
-
105
82
  if (isControlled) {
106
83
  children = this.props.children;
107
84
  state = this.props.state;
108
85
  } else if (currentChildren == null && lastChildren == null) {
109
86
  return null;
110
87
  }
111
-
112
88
  if (state === 'enter') {
113
89
  type = enter;
114
-
115
90
  if (!isControlled) {
116
91
  children = currentChildren;
117
92
  }
118
93
  } else if (state === 'leave') {
119
94
  type = leave;
120
-
121
95
  if (!isControlled) {
122
96
  children = lastChildren;
123
97
  }
124
98
  }
125
-
126
99
  return /*#__PURE__*/React.createElement(StyledAnimation, Object.assign({}, restProps, {
127
100
  type: type,
128
101
  onStart: this.onStart,
129
102
  onRest: this.onRest
130
103
  }), children);
131
104
  }
132
-
133
105
  }
134
106
  StyledTransition.propTypes = {
135
107
  state: PropTypes.string,
package/lib/es/src/Transition.js CHANGED
@@ -1,16 +1,11 @@
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
- /* eslint-disable eqeqeq */
12
-
13
-
14
9
  import Animation from './Animation';
15
10
  import PropTypes from 'prop-types';
16
11
  import React, { Component, isValidElement } from 'react';
@@ -19,18 +14,14 @@ export default class Transition extends Component {
19
14
  constructor() {
20
15
  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
21
16
  super(props);
22
-
23
17
  this._isControlled = () => [true, false, 'enter', 'leave'].includes(this.props.state);
24
-
25
18
  this.forwardInstance = instance => {
26
19
  this.instance = instance;
27
20
  };
28
-
29
21
  this.onRest = props => {
30
22
  const {
31
23
  state
32
24
  } = this.state;
33
-
34
25
  if (state === 'enter') {
35
26
  this.props.didEnter(props);
36
27
  } else if (state === 'leave') {
@@ -40,71 +31,58 @@ export default class Transition extends Component {
40
31
  });
41
32
  this.props.didLeave(props);
42
33
  }
43
-
44
34
  this.props.onRest(props);
45
35
  };
46
-
47
36
  this.onStart = props => {
48
37
  const {
49
38
  state
50
39
  } = this.state;
51
-
52
40
  if (state === 'enter') {
53
41
  this.props.willEnter(props);
54
42
  } else if (state === 'leave') {
55
43
  this.props.willLeave(props);
56
44
  }
57
-
58
45
  this.props.onStart(props);
59
46
  };
60
-
61
47
  this.state = {
62
48
  state: '',
63
49
  lastChildren: null,
64
50
  currentChildren: null
65
51
  };
66
52
  }
67
-
68
53
  static getDerivedStateFromProps(props, state) {
69
54
  const willUpdateStates = {};
70
-
71
- if (props.children !== state.currentChildren // && (props.children == null || state.currentChildren == null)
55
+ if (props.children !== state.currentChildren
56
+ // && (props.children == null || state.currentChildren == null)
72
57
  ) {
73
58
  willUpdateStates.lastChildren = state.currentChildren;
74
59
  willUpdateStates.currentChildren = props.children;
75
-
76
60
  if (props.children == null) {
77
61
  willUpdateStates.state = 'leave';
78
62
  } else {
79
63
  willUpdateStates.state = 'enter';
80
64
  }
81
65
  }
82
-
83
66
  if (props.state != null) {
84
67
  willUpdateStates.state = props.state;
85
68
  }
86
-
87
69
  return willUpdateStates;
88
70
  }
89
-
90
71
  componentWillUnmount() {
91
72
  if (this.instance) {
92
73
  this.instance.destroy();
93
74
  this.instance = null;
94
75
  }
95
76
  }
96
-
97
77
  render() {
98
78
  const _a = this.props,
99
- {
100
- from: propsFrom,
101
- enter,
102
- leave
103
- } = _a,
104
- restProps = __rest(_a, ["from", "enter", "leave"]);
105
-
106
- let children; // eslint-disable-next-line prefer-const
107
-
79
+ {
80
+ from: propsFrom,
81
+ enter,
82
+ leave
83
+ } = _a,
84
+ restProps = __rest(_a, ["from", "enter", "leave"]);
85
+ let children;
108
86
  let {
109
87
  currentChildren,
110
88
  lastChildren,
@@ -112,42 +90,36 @@ export default class Transition extends Component {
112
90
  } = this.state;
113
91
  let from = {};
114
92
  let to = {};
115
-
116
93
  const isControlled = this._isControlled();
117
-
118
94
  if (isControlled) {
119
95
  children = this.props.children;
120
96
  state = this.props.state;
121
97
  } else if (currentChildren == null && lastChildren == null) {
122
98
  return null;
123
99
  }
124
-
125
100
  if (state === 'enter') {
126
101
  from = propsFrom;
127
102
  to = enter;
128
-
129
103
  if (!isControlled) {
130
104
  children = currentChildren;
131
105
  }
132
106
  } else if (state === 'leave') {
133
107
  from = enter;
134
108
  to = leave;
135
-
136
109
  if (!isControlled) {
137
110
  children = lastChildren;
138
111
  }
139
112
  }
140
-
141
113
  return /*#__PURE__*/React.createElement(Animation, Object.assign({}, restProps, {
142
114
  force: true,
143
115
  from: from,
144
116
  to: to,
145
117
  onRest: this.onRest,
146
118
  onStart: this.onStart
147
- }), props => // eslint-disable-next-line no-nested-ternary
119
+ }), props =>
120
+ // eslint-disable-next-line no-nested-ternary
148
121
  typeof children === 'function' ? children(props) : /*#__PURE__*/isValidElement(children) ? children : null);
149
122
  }
150
-
151
123
  }
152
124
  Transition.propTypes = {
153
125
  children: PropTypes.any,
package/lib/es/src/utils/invokeFns.js CHANGED
@@ -1,6 +1,5 @@
1
1
  export default function invokeFns(fns) {
2
2
  let args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
3
-
4
3
  if (Array.isArray(fns) && fns.length) {
5
4
  fns.forEach(fn => {
6
5
  if (typeof fn === 'function') {
package/lib/es/src/utils/noop.js CHANGED
@@ -1,2 +1 @@
1
- // eslint-disable-next-line @typescript-eslint/no-empty-function
2
1
  export default function noop() {}
package/lib/es/src/utils/string.js CHANGED
@@ -1,19 +1,16 @@
1
- /* eslint-disable eqeqeq */
2
1
  export function upperCase(str, pos) {
3
2
  if (typeof str === 'string') {
4
- return str // eslint-disable-next-line @typescript-eslint/ban-ts-comment
3
+ return str
5
4
  // @ts-ignore
6
5
  .split().reduce((total, cur, index) => pos == null || pos === index ? total + cur.toUpperCase() : total + cur, '');
7
6
  }
8
-
9
7
  return str;
10
8
  }
11
9
  export function lowerCase(str, pos) {
12
10
  if (typeof str === 'string') {
13
- return str // eslint-disable-next-line @typescript-eslint/ban-ts-comment
11
+ return str
14
12
  // @ts-ignore
15
13
  .split().reduce((total, cur, index) => pos == null || pos === index ? total + cur.toLowerCase() : total + cur, '');
16
14
  }
17
-
18
15
  return str;
19
16
  }
package/package.json CHANGED
@@ -1,47 +1,46 @@
1
1
  {
2
- "name": "@douyinfe/semi-animation-react",
3
- "version": "2.24.3",
4
- "description": "motion library for semi-ui-react",
5
- "keywords": [
6
- "motion",
7
- "react",
8
- "semi-ui"
9
- ],
10
- "files": [
11
- "lib",
12
- "README.md"
13
- ],
14
- "license": "MIT",
15
- "main": "lib/cjs/index.js",
16
- "module": "lib/es/index.js",
17
- "typings": "lib/es/index.d.ts",
18
- "repository": {
19
- "type": "git",
20
- "url": "https://github.com/DouyinFE/semi-design"
21
- },
22
- "scripts": {
23
- "test": "echo \"Error: run tests from root\" && exit 1",
24
- "build:lib": "node scripts/compileLib",
25
- "prepublishOnly": "npm run build:lib"
26
- },
27
- "dependencies": {
28
- "@douyinfe/semi-animation": "2.12.0",
29
- "@douyinfe/semi-animation-styled": "2.23.2",
30
- "classnames": "^2.2.6"
31
- },
32
- "devDependencies": {
33
- "@babel/preset-env": "^7.15.8",
34
- "@babel/preset-react": "^7.14.5",
35
- "@storybook/addon-knobs": "^6.3.1",
36
- "@vx/gradient": "0.0.199",
37
- "del": "^6.0.0",
38
- "flubber": "^0.4.2",
39
- "gulp": "^4.0.2",
40
- "gulp-babel": "^8.0.0",
41
- "gulp-typescript": "^6.0.0-alpha.1",
42
- "merge2": "^1.4.1",
43
- "prop-types": "15.7.2",
44
- "react-storybook-addon-props-combinations": "^1.1.0"
45
- },
46
- "gitHead": "989e106471d68c7eaf1b26abb64bbc1a5f383f9a"
2
+ "name": "@douyinfe/semi-animation-react",
3
+ "version": "2.25.0-alpha.0",
4
+ "description": "motion library for semi-ui-react",
5
+ "keywords": [
6
+ "motion",
7
+ "react",
8
+ "semi-ui"
9
+ ],
10
+ "files": [
11
+ "lib",
12
+ "README.md"
13
+ ],
14
+ "license": "MIT",
15
+ "main": "lib/cjs/index.js",
16
+ "module": "lib/es/index.js",
17
+ "typings": "lib/es/index.d.ts",
18
+ "repository": {
19
+ "type": "git",
20
+ "url": "https://github.com/DouyinFE/semi-design"
21
+ },
22
+ "scripts": {
23
+ "test": "echo \"Error: run tests from root\" && exit 1",
24
+ "build:lib": "node scripts/compileLib",
25
+ "prepublishOnly": "npm run build:lib"
26
+ },
27
+ "dependencies": {
28
+ "@douyinfe/semi-animation": "2.25.0-alpha.0",
29
+ "@douyinfe/semi-animation-styled": "2.25.0-alpha.0",
30
+ "classnames": "^2.2.6"
31
+ },
32
+ "devDependencies": {
33
+ "@babel/preset-env": "^7.15.8",
34
+ "@babel/preset-react": "^7.14.5",
35
+ "@vx/gradient": "0.0.199",
36
+ "del": "^6.0.0",
37
+ "flubber": "^0.4.2",
38
+ "gulp": "^4.0.2",
39
+ "gulp-babel": "^8.0.0",
40
+ "gulp-typescript": "^6.0.0-alpha.1",
41
+ "merge2": "^1.4.1",
42
+ "prop-types": "^15.7.2",
43
+ "react-storybook-addon-props-combinations": "^1.1.0"
44
+ },
45
+ "gitHead": "a2d9b9c6d2bf2464f8bccdbfa56e2e07429013cf"
47
46
  }