@douyinfe/semi-animation-react 2.1.0 → 2.1.4

package/lib/cjs/index.d.ts

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,70 @@
+"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

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,228 @@
+"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

@@ -0,0 +1,39 @@
+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;
+}

package/lib/cjs/src/KeyFrames.js

@@ -0,0 +1,136 @@
+"use strict";
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+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 _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _noop = _interopRequireDefault(require("./utils/noop"));
+
+var _Animation = _interopRequireDefault(require("./Animation"));
+
+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 = (0, _assign.default)({}, props);
+
+      _this.props.onFrame(currentStyle);
+
+      _this.setState({
+        currentStyle
+      });
+    };
+
+    this.next = () => {
+      let {
+        frameIndex
+      } = this.state;
+      const {
+        frames,
+        loop
+      } = this.props;
+      frameIndex++;
+
+      if (frameIndex < frames.length - 1) {
+        this.setState({
+          frameIndex
+        });
+      } 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);
+  }
+
+  componentWillUnmount() {
+    this.instance && this.instance.destroy();
+  }
+
+  render() {
+    const {
+      children,
+      frames
+    } = this.props;
+    const {
+      frameIndex,
+      currentStyle
+    } = this.state;
+    const from = frames[frameIndex];
+    const to = frames[frameIndex + 1];
+    return /*#__PURE__*/_react.default.createElement(_Animation.default, (0, _assign.default)({}, this.props, {
+      forwardInstance: this.forwardInstance,
+      from: from,
+      to: to,
+      onFrame: this.onFrame,
+      onRest: this.next
+    }), typeof children === 'function' ? children(currentStyle) : children);
+  }
+
+}
+
+exports.default = KeyFrames;
+KeyFrames.propTypes = {
+  frames: _propTypes.default.array,
+  loop: _propTypes.default.bool,
+  onFrame: _propTypes.default.func,
+  onKeyRest: _propTypes.default.func,
+  onRest: _propTypes.default.func
+};
+KeyFrames.defaultProps = {
+  frames: [],
+  loop: false,
+  onKeyRest: _noop.default,
+  onRest: _noop.default,
+  onFrame: _noop.default
+};

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

@@ -0,0 +1,56 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import noop from './utils/noop';
+export interface StyledAnimationProps {
+    className?: string;
+    type?: any;
+    style?: React.CSSProperties;
+    speed?: string | number;
+    delay?: string | number;
+    reverse?: boolean | string;
+    loop?: string | number;
+    children?: any;
+    onStart?: (value: any) => void;
+    onFrame?: (value: any) => void;
+    onRest?: (value: any) => void;
+    prefixCls?: string;
+    timing?: string;
+    duration?: string | number;
+    fillMode?: string;
+}
+export default class StyledAnimation extends PureComponent<StyledAnimationProps> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        type: PropTypes.Requireable<any>;
+        speed: PropTypes.Requireable<string | number>;
+        delay: PropTypes.Requireable<string | number>;
+        reverse: PropTypes.Requireable<string | boolean>;
+        loop: PropTypes.Requireable<string | number>;
+        children: PropTypes.Requireable<any>;
+        onStart: PropTypes.Requireable<(...args: any[]) => any>;
+        onFrame: PropTypes.Requireable<(...args: any[]) => any>;
+        onRest: PropTypes.Requireable<(...args: any[]) => any>;
+        prefixCls: PropTypes.Requireable<string>;
+        timing: PropTypes.Requireable<string>;
+        duration: PropTypes.Requireable<string | number>;
+        fillMode: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        prefixCls: string;
+        speed: string;
+        onFrame: typeof noop;
+        onStart: typeof noop;
+        onRest: typeof noop;
+    };
+    constructor(props?: {});
+    _generateAnimateEvents: (child: React.ReactElement, props?: StyledAnimationProps) => {
+        onAnimationIteration: (...args: any) => void;
+        onAnimationStart: (...args: any) => void;
+        onAnimationEnd: (...args: any) => void;
+    };
+    _hasSpeedClass: (speed?: string | number) => boolean;
+    _hasTypeClass: (type?: any) => any;
+    _hasDelayClass: (delay?: string | number) => boolean;
+    _hasLoopClass: (loop?: string | number) => boolean;
+    render(): any;
+}