@douyinfe/semi-animation-react 2.24.2 → 2.25.0-alpha.0

package/lib/cjs/index.js

@@ -45,17 +45,10 @@ Object.defineProperty(exports, "presets", {
     return _semiAnimation.presets;
   }
 });
-
 var _StyledAnimation = _interopRequireDefault(require("./src/StyledAnimation"));
-
 var _StyledTransition = _interopRequireDefault(require("./src/StyledTransition"));
-
 var _Animation = _interopRequireDefault(require("./src/Animation"));
-
 var _KeyFrames = _interopRequireDefault(require("./src/KeyFrames"));
-
 var _Transition = _interopRequireDefault(require("./src/Transition"));
-
 var _semiAnimation = require("@douyinfe/semi-animation");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/cjs/src/Animation.js

@@ -4,48 +4,35 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("react");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _semiAnimation = require("@douyinfe/semi-animation");
-
 var _noop = _interopRequireDefault(require("./utils/noop"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /* eslint-disable @typescript-eslint/ban-types */
 
-/* eslint-disable react/destructuring-assignment */
 class Animation extends _react.PureComponent {
   constructor() {
     let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     super(props);
-
     this.initAnimation = props => {
-      // eslint-disable-next-line eqeqeq
-      props = props == null ? this.props : props; // eslint-disable-next-line prefer-const
-
+      props = props == null ? this.props : props;
       let {
         from,
         to,
         config,
         reverse
       } = props;
-
       if (reverse) {
         [from, to] = [to, from];
       }
-
       this.animation = new _semiAnimation.Animation({
         from: Object.assign({}, from),
         to: Object.assign({}, to)
       }, Object.assign({}, config));
-
       _semiAnimation.events.forEach(event => {
-        const propName = "on".concat(event[0].toUpperCase() + event.slice(1)); // eslint-disable-next-line @typescript-eslint/no-shadow
-
+        const propName = `on${event[0].toUpperCase() + event.slice(1)}`;
+        // eslint-disable-next-line @typescript-eslint/no-shadow
         this.animation.on(event, props => {
           // avoid memory leak
           if (this._mounted && !this._destroyed) {
@@ -56,64 +43,52 @@ class Animation extends _react.PureComponent {
           }
         });
       });
-
       this._destroyed = false;
     };
-
     this.bindEvents = () => {
       this.startOrNot = () => {
         const {
           immediate,
           autoStart
         } = this.props;
-
         if (immediate) {
           this.end();
         } else if (autoStart) {
           this.start();
         }
       };
-
       this.start = () => {
         this.animation && this.animation.start();
       };
-
       this.pause = () => {
         this.animation && this.animation.pause();
       };
-
       this.stop = () => {
         this.animation && this.animation.stop();
       };
-
       this.end = () => {
         this.animation && this.animation.end();
       };
-
       this.resume = () => {
         this.animation && this.animation.resume();
       };
-
       this.reset = () => {
         if (this.animation) {
           this.animation.reset();
           this.startOrNot();
         }
       };
-
       this.reverse = () => {
         if (this.animation) {
           this.animation.reverse();
           this.startOrNot();
         }
       };
-
       this.destroy = () => {
         this._destroyed = true;
         this.animation && this.animation.destroy();
       };
     };
-
     this.state = {
       currentStyle: {}
     };
@@ -122,42 +97,33 @@ class Animation extends _react.PureComponent {
     this.initAnimation();
     this.bindEvents();
   }
-
   startOrNot() {
     throw new Error('Method not implemented.');
   }
-
   componentDidMount() {
     this._mounted = true;
     const {
       forwardInstance
     } = this.props;
-
     if (this.animation === null) {
       // didmount/willUnmount may be called twice when React.StrictMode is true in React 18, we need to ensure that this.animation is correct
       this.initAnimation();
       this.bindEvents();
     }
-
     if (typeof forwardInstance === 'function') {
       forwardInstance(this.animation);
     }
-
     this.startOrNot();
   }
-
   componentWillUnmount() {
     this._mounted = false;
-
     if (this.animation) {
       this.animation.destroy();
       this.animation = null;
     }
   }
-
   componentDidUpdate() {
     let prevProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
     if (this.props.reset) {
       if (this.props.from !== prevProps.from || this.props.to !== prevProps.to) {
         this.destroy();
@@ -165,7 +131,6 @@ class Animation extends _react.PureComponent {
         this.startOrNot();
       }
     }
-
     if (this.props.force) {
       if (this.props.to !== prevProps.to) {
         this.initAnimation(Object.assign(Object.assign({}, this.props), {
@@ -175,12 +140,10 @@ class Animation extends _react.PureComponent {
       }
     }
   }
-
   render() {
     const {
       children
     } = this.props;
-
     if (typeof children === 'function') {
       return children(this.animation.getCurrentStates());
     } else if ( /*#__PURE__*/(0, _react.isValidElement)(children)) {
@@ -189,9 +152,7 @@ class Animation extends _react.PureComponent {
       return null;
     }
   }
-
 }
-
 exports.default = Animation;
 Animation.propTypes = {
   onStart: _propTypes.default.func,

package/lib/cjs/src/KeyFrames.js

@@ -4,41 +4,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _noop = _interopRequireDefault(require("./utils/noop"));
-
 var _Animation = _interopRequireDefault(require("./Animation"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 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); }
-
 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; }
-
-/* eslint-disable react/destructuring-assignment */
 class KeyFrames extends _react.Component {
   constructor() {
     var _this;
-
     let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     super(props);
     _this = this;
-
     this.onFrame = function () {
       let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       const currentStyle = Object.assign({}, props);
-
       _this.props.onFrame(currentStyle);
-
       _this.setState({
         currentStyle
       });
     };
-
     this.next = () => {
       let {
         frameIndex
@@ -48,7 +34,6 @@ class KeyFrames extends _react.Component {
         loop
       } = this.props;
       frameIndex++;
-
       if (frameIndex < frames.length - 1) {
         this.setState({
           frameIndex
@@ -56,38 +41,31 @@ class KeyFrames extends _react.Component {
       } else {
         frameIndex = 0;
         this.props.onRest(this.state.currentStyle);
-
         if (loop) {
           this.setState({
             frameIndex
           });
         }
       }
-
       this.props.onKeyRest(this.state.currentStyle);
     };
-
     this.forwardInstance = instance => {
       this.instance = instance;
-
       if (typeof this.props.forwardInstance === 'function') {
         this.props.forwardInstance(this.instance);
       }
     };
-
     this.state = {
       currentStyle: {},
       frameIndex: 0
     };
   }
-
-  componentDidMount() {// this.props.forwardInstance(this.instance);
+  componentDidMount() {
+    // this.props.forwardInstance(this.instance);
   }
-
   componentWillUnmount() {
     this.instance && this.instance.destroy();
   }
-
   render() {
     const {
       children,
@@ -107,9 +85,7 @@ class KeyFrames extends _react.Component {
       onRest: this.next
     }), typeof children === 'function' ? children(currentStyle) : children);
   }
-
 }
-
 exports.default = KeyFrames;
 KeyFrames.propTypes = {
   frames: _propTypes.default.array,

package/lib/cjs/src/StyledAnimation.js

@@ -4,40 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("react");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _semiAnimationStyled = require("@douyinfe/semi-animation-styled");
-
 var _noop = _interopRequireDefault(require("./utils/noop"));
-
 var _invokeFns = _interopRequireDefault(require("./utils/invokeFns"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/* eslint-disable react/destructuring-assignment */
-
-/* eslint-disable prefer-const */
-
-/* eslint-disable eqeqeq */
-
-/* eslint-disable import/no-duplicates */
-
-/* eslint-disable no-duplicate-imports */
 const types = Object.values(_semiAnimationStyled.types).reduce((arr, cur) => [...arr, ...cur], []);
-
 class StyledAnimation extends _react.PureComponent {
   constructor() {
     var _this;
-
     let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     super(props);
     _this = this;
-
     this._generateAnimateEvents = function (child) {
       let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       return {
@@ -45,47 +25,39 @@ class StyledAnimation extends _react.PureComponent {
           for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
             args[_key] = arguments[_key];
           }
-
           return (0, _invokeFns.default)([child && child.props && child.props.onAnimationIteration, props.onFrame], args);
         },
         onAnimationStart: function () {
           for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
             args[_key2] = arguments[_key2];
           }
-
           return (0, _invokeFns.default)([child && child.props && child.props.onAnimationStart, props.onStart], args);
         },
         onAnimationEnd: function () {
           for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
             args[_key3] = arguments[_key3];
           }
-
           return (0, _invokeFns.default)([child && child.props && child.props.onAnimationEnd, props.onRest], args);
         }
       };
     };
-
     this._hasSpeedClass = function () {
       let speed = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.speed;
       return speed != null && _semiAnimationStyled.speeds.includes(speed);
     };
-
     this._hasTypeClass = function () {
       let type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.type;
       return type != null && types.includes(type);
     };
-
     this._hasDelayClass = function () {
       let delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.delay;
       return delay != null && _semiAnimationStyled.delays.includes(delay);
     };
-
     this._hasLoopClass = function () {
       let loop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.loop;
       return loop != null && _semiAnimationStyled.loops.includes(loop);
     };
   }
-
   render() {
     let {
       type,
@@ -100,20 +72,15 @@ class StyledAnimation extends _react.PureComponent {
       className,
       fillMode
     } = this.props;
-
     const hasTypeClass = this._hasTypeClass();
-
     const hasSpeedClass = this._hasSpeedClass();
-
     const hasDelayClass = this._hasDelayClass();
-
     const hasLoopClass = this._hasLoopClass();
-
-    const animateCls = className || (0, _classnames.default)("".concat(prefixCls, "-animated"), {
-      ["".concat(prefixCls, "-").concat(type)]: Boolean(type),
-      ["".concat(prefixCls, "-speed-").concat(speed)]: hasSpeedClass,
-      ["".concat(prefixCls, "-delay-").concat(delay)]: hasDelayClass,
-      ["".concat(prefixCls, "-loop-").concat(loop)]: hasLoopClass
+    const animateCls = className || (0, _classnames.default)(`${prefixCls}-animated`, {
+      [`${prefixCls}-${type}`]: Boolean(type),
+      [`${prefixCls}-speed-${speed}`]: hasSpeedClass,
+      [`${prefixCls}-delay-${delay}`]: hasDelayClass,
+      [`${prefixCls}-loop-${loop}`]: hasLoopClass
     });
     const animateStyle = {
       animationTimingFunction: timing,
@@ -124,27 +91,22 @@ class StyledAnimation extends _react.PureComponent {
       animationDirection: reverse ? 'alternate' : 'normal',
       animationFillMode: fillMode
     };
-
     if ( /*#__PURE__*/(0, _react.isValidElement)(children)) {
       children = _react.Children.map(children, child => {
         const animateEvents = this._generateAnimateEvents(child, this.props);
-
         return /*#__PURE__*/(0, _react.cloneElement)(child, Object.assign({
           className: (0, _classnames.default)(child.props.className, animateCls),
           style: Object.assign(Object.assign({}, child.props.style), this.props.style)
         }, animateEvents));
       });
     }
-
     return typeof children === 'function' ? children({
       animateCls,
       animateStyle,
       animateEvents: this._generateAnimateEvents(null, this.props)
     }) : children;
   }
-
 }
-
 exports.default = StyledAnimation;
 StyledAnimation.propTypes = {
   className: _propTypes.default.string,

package/lib/cjs/src/StyledTransition.js

@@ -4,46 +4,30 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _StyledAnimation = _interopRequireDefault(require("./StyledAnimation"));
-
 var _noop = _interopRequireDefault(require("./utils/noop"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 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); }
-
 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; }
-
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
-
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
-/* eslint-disable eqeqeq */
-
-
 class StyledTransition extends _react.Component {
   constructor() {
     let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     super(props);
-
     this._isControlled = () => [true, false, 'enter', 'leave'].includes(this.props.state);
-
     this.onRest = props => {
       const {
         state
       } = this.state;
-
       if (state === 'enter') {
         this.props.didEnter(props);
       } else if (state === 'leave') {
@@ -53,102 +37,81 @@ class StyledTransition extends _react.Component {
         });
         this.props.didLeave(props);
       }
-
       this.props.onRest(props);
     };
-
     this.onStart = props => {
       const {
         state
       } = this.state;
-
       if (state === 'enter') {
         this.props.willEnter(props);
       } else if (state === 'leave') {
         this.props.willLeave(props);
       }
-
       this.props.onStart(props);
     };
-
     this.state = {
       state: '',
       lastChildren: null,
       currentChildren: null
     };
   }
-
   static getDerivedStateFromProps(props, state) {
     const willUpdateStates = {};
-
     if (props.children !== state.currentChildren) {
       willUpdateStates.lastChildren = state.currentChildren;
       willUpdateStates.currentChildren = props.children;
-
       if (props.children == null) {
         willUpdateStates.state = 'leave';
       } else {
         willUpdateStates.state = 'enter';
       }
     }
-
     if (props.state != null && props.state !== state.state) {
       willUpdateStates.state = props.state;
     }
-
     return willUpdateStates;
   }
-
   render() {
     const _a = this.props,
-          {
-      enter,
-      leave
-    } = _a,
-          restProps = __rest(_a, ["enter", "leave"]);
-
+      {
+        enter,
+        leave
+      } = _a,
+      restProps = __rest(_a, ["enter", "leave"]);
     const {
       currentChildren,
       lastChildren
     } = this.state;
-
     const isControlled = this._isControlled();
-
     let children, type;
     let {
       state
     } = this.state;
-
     if (isControlled) {
       children = this.props.children;
       state = this.props.state;
     } else if (currentChildren == null && lastChildren == null) {
       return null;
     }
-
     if (state === 'enter') {
       type = enter;
-
       if (!isControlled) {
         children = currentChildren;
       }
     } else if (state === 'leave') {
       type = leave;
-
       if (!isControlled) {
         children = lastChildren;
       }
     }
-
     return /*#__PURE__*/_react.default.createElement(_StyledAnimation.default, Object.assign({}, restProps, {
       type: type,
       onStart: this.onStart,
       onRest: this.onRest
     }), children);
   }
-
 }
-
 exports.default = StyledTransition;
 StyledTransition.propTypes = {
   state: _propTypes.default.string,