@antv/f-engine/lib/timeline.js

FEngine 是 AntV F 系列可视化引擎的底层渲染引擎，为移动端提供了一套完整的渲染、事件、动画能力，能方便的构建可视化 UI

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _tslib = require("tslib");
var _component = _interopRequireDefault(require("./component"));
var _children = _interopRequireDefault(require("./children"));
var _util = require("@antv/util");
var Timeline = /** @class */function (_super) {
  (0, _tslib.__extends)(Timeline, _super);
  function Timeline(props) {
    var _this = _super.call(this, props) || this;
    _this.next = function () {
      var _a = _this,
        state = _a.state,
        props = _a.props;
      var index = state.index,
        count = state.count,
        delay = state.delay,
        autoPlay = state.autoPlay;
      var loop = props.loop;
      if (autoPlay === false) {
        return;
      }
      var next = loop ? (index + 1) % count : index + 1;
      if (next >= count) {
        return;
      }
      _this.timer = setTimeout(function () {
        _this.setState({
          index: next
        });
      }, delay || 0);
    };
    var delay = props.delay,
      _a = props.start,
      start = _a === void 0 ? 0 : _a,
      children = props.children,
      autoPlay = props.autoPlay;
    var count = _children.default.toArray(children).length;
    _this.state = {
      delay: delay,
      count: count,
      index: start,
      autoPlay: autoPlay
    };
    return _this;
  }
  Timeline.prototype.didMount = function () {
    this.animator.on('end', this.next);
  };
  Timeline.prototype.willReceiveProps = function (nextProps) {
    var nextStart = nextProps.start,
      nextDelay = nextProps.delay,
      nextAutoPlay = nextProps.autoPlay;
    var _a = this.state,
      index = _a.index,
      delay = _a.delay,
      autoPlay = _a.autoPlay;
    if ((0, _util.isNumber)(nextStart) || nextDelay !== delay || nextAutoPlay !== autoPlay) {
      // 更新时清除 setTimeout
      clearTimeout(this.timer);
      this.setState({
        delay: nextDelay,
        index: (0, _util.isNumber)(nextStart) ? nextStart : index,
        autoPlay: nextAutoPlay
      });
    }
  };
  Timeline.prototype.didUnmount = function () {
    this.animator.off('end', this.next);
  };
  Timeline.prototype.render = function () {
    var _a = this,
      state = _a.state,
      props = _a.props;
    var children = props.children;
    var index = state.index;
    var childrenArray = _children.default.toArray(children);
    return childrenArray[index];
  };
  return Timeline;
}(_component.default);
var _default = exports.default = Timeline;