@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.
@@ -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
- if (props.children !== state.currentChildren // && (props.children == null || state.currentChildren == null)
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
- from: propsFrom,
118
- enter,
119
- leave
120
- } = _a,
121
- restProps = __rest(_a, ["from", "enter", "leave"]);
122
-
123
- let children; // eslint-disable-next-line prefer-const
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 => // eslint-disable-next-line no-nested-ternary
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') {
@@ -4,6 +4,5 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = noop;
7
-
8
7
  // eslint-disable-next-line @typescript-eslint/no-empty-function
9
8
  function noop() {}
@@ -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 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
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 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
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
  }
@@ -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; // eslint-disable-next-line prefer-const
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)}`; // eslint-disable-next-line @typescript-eslint/no-shadow
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,
@@ -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
- componentDidMount() {// this.props.forwardInstance(this.instance);
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,