@ttk/component/es/timetree/index.js

ttk组件库

import { _ as _inherits, a as _getPrototypeOf, b as _possibleConstructorReturn, c as _classCallCheck, d as _createClass } from '../getPrototypeOf-b95655c5.js';
import React__default, { PureComponent } from 'react';
import classNames from 'classnames';
import '../_commonjsHelpers-471920d6.js';

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

var TimetreeComponent = /*#__PURE__*/function (_PureComponent) {
  _inherits(TimetreeComponent, _PureComponent);

  var _super = _createSuper(TimetreeComponent);

  function TimetreeComponent(props) {
    _classCallCheck(this, TimetreeComponent);

    return _super.call(this, props); // this.handleAnimationEnd.bind(this)
  }

  _createClass(TimetreeComponent, [{
    key: "handleAnimationEnd",
    value: function handleAnimationEnd() {// let main = document.querySelector('.timeTreeMain')
      // main.style['zIndex'] = '11'
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      this.getATag();
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      this.getATag();
    }
  }, {
    key: "getATag",
    value: function getATag() {
      var _this = this;

      var container = document.querySelector('.timeTreeMain'),
          links = container.getElementsByTagName('a');

      var _loop = function _loop(i) {
        var linkObject = links[i];
        var url = linkObject.getAttribute('href'),
            target = linkObject.getAttribute('target'),
            content = linkObject.innerHTML,
            that = _this;

        linkObject.onclick = function () {
          that.props.link(target, url, content);
          return false;
        };

        linkObject = null;
      };

      for (var i = 0; i < links.length; i++) {
        _loop(i);
      }
    }
  }, {
    key: "renderMsgContainer",
    value: function renderMsgContainer(year, list, i) {
      var _this2 = this;

      return /*#__PURE__*/React__default.createElement("div", {
        key: i,
        style: {
          zIndex: '1',
          position: 'relative'
        }
      }, list.map(function (o, i) {
        return _this2.renderMsg(o, i);
      }), /*#__PURE__*/React__default.createElement("div", {
        className: "year"
      }, year));
    }
  }, {
    key: "renderMsg",
    value: function renderMsg(msg, i) {
      var msgClass = classNames({
        "msgBox leftSide": i % 2 == 0,
        "msgBox rightSide": i % 2 != 0
      });
      return /*#__PURE__*/React__default.createElement("div", {
        key: i,
        className: msgClass
      }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("span", {
        className: "arrow"
      }, i % 2 == 0 ? /*#__PURE__*/React__default.createElement("span", {
        className: "arrow-img arrow-left"
      }) : /*#__PURE__*/React__default.createElement("span", {
        className: "arrow-img arrow-right"
      })), /*#__PURE__*/React__default.createElement("div", {
        className: "detail"
      }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
        className: "title"
      }, msg.sendTime), /*#__PURE__*/React__default.createElement("div", {
        className: "version"
      }, msg.title), /*#__PURE__*/React__default.createElement("div", {
        id: 'detailMessage',
        dangerouslySetInnerHTML: {
          __html: msg.content
        }
      })))));
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      var data = this.props.history;
      var keys = Object.keys(data);
      keys.sort(function (a, b) {
        return b - a;
      });
      return /*#__PURE__*/React__default.createElement("div", {
        className: "timetree"
      }, /*#__PURE__*/React__default.createElement("div", {
        className: "bottom"
      }, /*#__PURE__*/React__default.createElement("span", {
        className: "bottom-img"
      })), /*#__PURE__*/React__default.createElement("div", {
        className: "content"
      }, /*#__PURE__*/React__default.createElement("div", {
        className: "rocket slideInUp"
      }, /*#__PURE__*/React__default.createElement("span", {
        className: "rocket-img"
      })), /*#__PURE__*/React__default.createElement("div", {
        className: "main timeTreeMain"
      }, /*#__PURE__*/React__default.createElement("div", {
        className: "line"
      }), keys.map(function (o, i) {
        return _this3.renderMsgContainer(o, data[o], i);
      }))));
    }
  }]);

  return TimetreeComponent;
}(PureComponent);

export { TimetreeComponent as default };