@douyinfe/semi-animation-react 2.1.0-alpha.1 → 2.1.0-alpha.2

package/lib/es/src/Animation.js

@@ -11,8 +11,7 @@ import PropTypes from 'prop-types';
 import { Animation as SemiAnimation, events } from '@douyinfe/semi-animation';
 import noop from './utils/noop';
 export default class Animation extends PureComponent {
-  constructor() {
-    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  constructor(props = {}) {
     super(props);
 
     this.initAnimation = props => {
@@ -144,9 +143,7 @@ export default class Animation extends PureComponent {
     }
   }
 
-  componentDidUpdate() {
-    let prevProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
+  componentDidUpdate(prevProps = {}) {
     if (this.props.reset) {
       if (this.props.from !== prevProps.from || this.props.to !== prevProps.to) {
         this.destroy();

package/lib/es/src/KeyFrames.js

@@ -6,21 +6,14 @@ import PropTypes from 'prop-types';
 import noop from './utils/noop';
 import Animation from './Animation';
 export default class KeyFrames extends Component {
-  constructor() {
-    var _this;
-
-    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  constructor(props = {}) {
     super(props);
-    _this = this;
-
-    this.onFrame = function () {
-      let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
+    this.onFrame = (props = {}) => {
       const currentStyle = _Object$assign({}, props);
 
-      _this.props.onFrame(currentStyle);
-
-      _this.setState({
+      this.props.onFrame(currentStyle);
+      this.setState({
         currentStyle
       });
     };

package/lib/es/src/StyledAnimation.d.ts

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
+import '@douyinfe/semi-animation-styled';
 import noop from './utils/noop';
 export interface StyledAnimationProps {
     className?: string;

package/lib/es/src/StyledAnimation.js

@@ -19,6 +19,8 @@ import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign"
 import { PureComponent, isValidElement, cloneElement, Children } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import '@douyinfe/semi-animation-styled'; // eslint-disable-next-line @typescript-eslint/no-duplicate-imports
+
 import { types as styledTypes, loops, delays, speeds } from '@douyinfe/semi-animation-styled';
 import noop from './utils/noop';
 import invokeFns from './utils/invokeFns';
@@ -26,59 +28,22 @@ import invokeFns from './utils/invokeFns';
 const types = _reduceInstanceProperty(_context = _Object$values(styledTypes)).call(_context, (arr, cur) => [...arr, ...cur], []);
 
 export default class StyledAnimation extends PureComponent {
-  constructor() {
-    var _this;
-
-    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  constructor(props = {}) {
     super(props);
-    _this = this;
-
-    this._generateAnimateEvents = function (child) {
-      let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      return {
-        onAnimationIteration: function () {
-          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
-          }
-
-          return invokeFns([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 invokeFns([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 invokeFns([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 && _includesInstanceProperty(speeds).call(speeds, speed);
-    };
+    this._generateAnimateEvents = (child, props = {}) => ({
+      onAnimationIteration: (...args) => invokeFns([child && child.props && child.props.onAnimationIteration, props.onFrame], args),
+      onAnimationStart: (...args) => invokeFns([child && child.props && child.props.onAnimationStart, props.onStart], args),
+      onAnimationEnd: (...args) => invokeFns([child && child.props && child.props.onAnimationEnd, props.onRest], args)
+    });
 
-    this._hasTypeClass = function () {
-      let type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.type;
-      return type != null && _includesInstanceProperty(types).call(types, type);
-    };
+    this._hasSpeedClass = (speed = this.props.speed) => speed != null && _includesInstanceProperty(speeds).call(speeds, speed);
 
-    this._hasDelayClass = function () {
-      let delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.delay;
-      return delay != null && _includesInstanceProperty(delays).call(delays, delay);
-    };
+    this._hasTypeClass = (type = this.props.type) => type != null && _includesInstanceProperty(types).call(types, type);
 
-    this._hasLoopClass = function () {
-      let loop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.loop;
-      return loop != null && _includesInstanceProperty(loops).call(loops, loop);
-    };
+    this._hasDelayClass = (delay = this.props.delay) => delay != null && _includesInstanceProperty(delays).call(delays, delay);
+
+    this._hasLoopClass = (loop = this.props.loop) => loop != null && _includesInstanceProperty(loops).call(loops, loop);
   }
 
   render() {

package/lib/es/src/StyledTransition.js

@@ -21,8 +21,7 @@ import PropTypes from 'prop-types';
 import StyledAnimation from './StyledAnimation';
 import noop from './utils/noop';
 export default class StyledTransition extends Component {
-  constructor() {
-    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  constructor(props = {}) {
     super(props);
 
     this._isControlled = () => {

package/lib/es/src/Transition.js

@@ -21,8 +21,7 @@ import PropTypes from 'prop-types';
 import React, { Component, isValidElement } from 'react';
 import noop from './utils/noop';
 export default class Transition extends Component {
-  constructor() {
-    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  constructor(props = {}) {
     super(props);
 
     this._isControlled = () => {

package/lib/es/src/utils/invokeFns.js

@@ -1,8 +1,6 @@
 import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-export default function invokeFns(fns) {
-  let args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-
+export default function invokeFns(fns, args = []) {
   if (_Array$isArray(fns) && fns.length) {
     _forEachInstanceProperty(fns).call(fns, fn => {
       if (typeof fn === 'function') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-animation-react",
-  "version": "2.1.0-alpha.1",
+  "version": "2.1.0-alpha.2",
   "description": "motion library for semi-ui-react",
   "keywords": [
     "motion",
@@ -12,7 +12,7 @@
     "README.md"
   ],
   "license": "MIT",
-  "main": "lib/cjs/index.js",
+  "main": "lib/es/index.js",
   "module": "lib/es/index.js",
   "typings": "lib/es/index.d.ts",
   "repository": {
@@ -26,8 +26,8 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.15.4",
-    "@douyinfe/semi-animation": "2.1.0-alpha.1",
-    "@douyinfe/semi-animation-styled": "2.1.0-alpha.1",
+    "@douyinfe/semi-animation": "2.1.0-alpha.2",
+    "@douyinfe/semi-animation-styled": "2.1.0-alpha.2",
     "classnames": "^2.2.6"
   },
   "peerDependencies": {
@@ -51,5 +51,5 @@
     "prop-types": "15.7.2",
     "react-storybook-addon-props-combinations": "^1.1.0"
   },
-  "gitHead": "1c0cec8640fb0f5da95138054e3fed1f304deff8"
+  "gitHead": "50381484f8df8aaa00285cf0a2ee01edf0083115"
 }

package/lib/cjs/index.d.ts

@@ -1,6 +0,0 @@
-export { default as StyledAnimation } from './src/StyledAnimation';
-export { default as StyledTransition } from './src/StyledTransition';
-export { default as Animation } from './src/Animation';
-export { default as KeyFrames } from './src/KeyFrames';
-export { default as Transition } from './src/Transition';
-export { interpolate, presets } from '@douyinfe/semi-animation';

package/lib/cjs/index.js

@@ -1,70 +0,0 @@
-"use strict";
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-_Object$defineProperty(exports, "Animation", {
-  enumerable: true,
-  get: function () {
-    return _Animation.default;
-  }
-});
-
-_Object$defineProperty(exports, "KeyFrames", {
-  enumerable: true,
-  get: function () {
-    return _KeyFrames.default;
-  }
-});
-
-_Object$defineProperty(exports, "StyledAnimation", {
-  enumerable: true,
-  get: function () {
-    return _StyledAnimation.default;
-  }
-});
-
-_Object$defineProperty(exports, "StyledTransition", {
-  enumerable: true,
-  get: function () {
-    return _StyledTransition.default;
-  }
-});
-
-_Object$defineProperty(exports, "Transition", {
-  enumerable: true,
-  get: function () {
-    return _Transition.default;
-  }
-});
-
-_Object$defineProperty(exports, "interpolate", {
-  enumerable: true,
-  get: function () {
-    return _semiAnimation.interpolate;
-  }
-});
-
-_Object$defineProperty(exports, "presets", {
-  enumerable: true,
-  get: function () {
-    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");

package/lib/cjs/src/Animation.d.ts

@@ -1,70 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import noop from './utils/noop';
-export interface AnimationProps {
-    onStart?: Function;
-    onFrame?: Function;
-    onPause?: Function;
-    onResume?: Function;
-    onStop?: Function;
-    onRest?: Function;
-    children?: React.ReactNode;
-    from?: Record<string, any>;
-    to?: Record<string, any>;
-    reverse?: boolean;
-    reset?: boolean;
-    force?: boolean;
-    config?: Record<string, any>;
-    autoStart?: boolean;
-    forwardInstance?: (value: any) => void;
-    immediate?: boolean;
-}
-export default class Animation extends PureComponent<AnimationProps> {
-    static propTypes: {
-        onStart: PropTypes.Requireable<(...args: any[]) => any>;
-        onFrame: PropTypes.Requireable<(...args: any[]) => any>;
-        onPause: PropTypes.Requireable<(...args: any[]) => any>;
-        onResume: PropTypes.Requireable<(...args: any[]) => any>;
-        onStop: PropTypes.Requireable<(...args: any[]) => any>;
-        onRest: PropTypes.Requireable<(...args: any[]) => any>;
-        children: PropTypes.Requireable<any>;
-        from: PropTypes.Requireable<object>;
-        to: PropTypes.Requireable<object>;
-        reverse: PropTypes.Requireable<boolean>;
-        reset: PropTypes.Requireable<boolean>;
-        force: PropTypes.Requireable<boolean>;
-        config: PropTypes.Requireable<object>;
-        autoStart: PropTypes.Requireable<boolean>;
-        forwardInstance: PropTypes.Requireable<(...args: any[]) => any>;
-        immediate: PropTypes.Requireable<boolean>;
-    };
-    static defaultProps: {
-        autoStart: boolean;
-        force: boolean;
-        onStart: typeof noop;
-        onFrame: typeof noop;
-        onPause: typeof noop;
-        onResume: typeof noop;
-        onStop: typeof noop;
-        onRest: typeof noop;
-    };
-    _mounted: boolean;
-    _destroyed: boolean;
-    animation: any;
-    reverse: () => void;
-    destroy: () => void;
-    reset: () => void;
-    resume: () => void;
-    end: () => void;
-    stop: () => void;
-    pause: () => void;
-    start: () => void;
-    constructor(props?: {});
-    startOrNot(): void;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    componentDidUpdate(prevProps?: AnimationProps): void;
-    initAnimation: (props?: AnimationProps) => void;
-    bindEvents: () => void;
-    render(): any;
-}

package/lib/cjs/src/Animation.js

@@ -1,228 +0,0 @@
-"use strict";
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports.default = void 0;
-
-var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
-
-var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
-
-var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
-
-var _reverse = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/reverse"));
-
-var _react = require("react");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _semiAnimation = require("@douyinfe/semi-animation");
-
-var _noop = _interopRequireDefault(require("./utils/noop"));
-
-/* 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
-
-      let {
-        from,
-        to,
-        config,
-        reverse
-      } = props;
-
-      if (reverse) {
-        [from, to] = [to, from];
-      }
-
-      this.animation = new _semiAnimation.Animation({
-        from: (0, _assign.default)({}, from),
-        to: (0, _assign.default)({}, to)
-      }, (0, _assign.default)({}, config));
-      (0, _forEach.default)(_semiAnimation.events).call(_semiAnimation.events, event => {
-        const propName = "on".concat(event[0].toUpperCase() + (0, _slice.default)(event).call(event, 1)); // eslint-disable-next-line @typescript-eslint/no-shadow
-
-        this.animation.on(event, props => {
-          // avoid memory leak
-          if (this._mounted && !this._destroyed) {
-            this.setState({
-              currentStyle: (0, _assign.default)({}, props)
-            });
-            this.props[propName](props);
-          }
-        });
-      });
-      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) {
-          var _context;
-
-          (0, _reverse.default)(_context = this.animation).call(_context);
-          this.startOrNot();
-        }
-      };
-
-      this.destroy = () => {
-        this._destroyed = true;
-        this.animation && this.animation.destroy();
-      };
-    };
-
-    this.state = {
-      currentStyle: {}
-    };
-    this._mounted = false;
-    this._destroyed = false;
-    this.initAnimation();
-    this.bindEvents();
-  }
-
-  startOrNot() {
-    throw new Error('Method not implemented.');
-  }
-
-  componentDidMount() {
-    this._mounted = true;
-    const {
-      forwardInstance
-    } = this.props;
-
-    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();
-        this.initAnimation();
-        this.startOrNot();
-      }
-    }
-
-    if (this.props.force) {
-      if (this.props.to !== prevProps.to) {
-        this.initAnimation((0, _assign.default)((0, _assign.default)({}, this.props), {
-          from: prevProps.to
-        }));
-        this.startOrNot();
-      }
-    }
-  }
-
-  render() {
-    const {
-      children
-    } = this.props;
-
-    if (typeof children === 'function') {
-      return children(this.animation.getCurrentStates());
-    } else if ( /*#__PURE__*/(0, _react.isValidElement)(children)) {
-      return children;
-    } else {
-      return null;
-    }
-  }
-
-}
-
-exports.default = Animation;
-Animation.propTypes = {
-  onStart: _propTypes.default.func,
-  onFrame: _propTypes.default.func,
-  onPause: _propTypes.default.func,
-  onResume: _propTypes.default.func,
-  onStop: _propTypes.default.func,
-  onRest: _propTypes.default.func,
-  children: _propTypes.default.any,
-  from: _propTypes.default.object,
-  to: _propTypes.default.object,
-  reverse: _propTypes.default.bool,
-  reset: _propTypes.default.bool,
-  force: _propTypes.default.bool,
-  config: _propTypes.default.object,
-  autoStart: _propTypes.default.bool,
-  forwardInstance: _propTypes.default.func,
-  immediate: _propTypes.default.bool
-};
-Animation.defaultProps = {
-  autoStart: true,
-  force: false,
-  onStart: _noop.default,
-  onFrame: _noop.default,
-  onPause: _noop.default,
-  onResume: _noop.default,
-  onStop: _noop.default,
-  onRest: _noop.default
-};

package/lib/cjs/src/KeyFrames.d.ts

@@ -1,39 +0,0 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import noop from './utils/noop';
-export interface KeyFramesProps {
-    frames?: any[];
-    loop?: boolean;
-    forwardInstance?: (value: any) => void;
-    onFrame?: (value: any) => void;
-    onKeyRest?: (value: Record<string, any>) => void;
-    onRest?: (value: Record<string, any>) => void;
-}
-export interface KeyFramesStates {
-    currentStyle: Record<string, any>;
-    frameIndex: number;
-}
-export default class KeyFrames extends Component<KeyFramesProps, KeyFramesStates> {
-    static propTypes: {
-        frames: PropTypes.Requireable<any[]>;
-        loop: PropTypes.Requireable<boolean>;
-        onFrame: PropTypes.Requireable<(...args: any[]) => any>;
-        onKeyRest: PropTypes.Requireable<(...args: any[]) => any>;
-        onRest: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    static defaultProps: {
-        frames: any[];
-        loop: boolean;
-        onKeyRest: typeof noop;
-        onRest: typeof noop;
-        onFrame: typeof noop;
-    };
-    instance: any;
-    constructor(props?: {});
-    onFrame: (props?: {}) => void;
-    next: () => void;
-    forwardInstance: (instance: any) => void;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    render(): JSX.Element;
-}