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

ttk组件库

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var getPrototypeOf = require('../getPrototypeOf-3a7a3df9.js');
var React = require('react');
var classNames = require('classnames');
require('../_commonjsHelpers-badc9712.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = getPrototypeOf._getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf._getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return getPrototypeOf._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) {
  getPrototypeOf._inherits(TimetreeComponent, _PureComponent);

  var _super = _createSuper(TimetreeComponent);

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

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

  getPrototypeOf._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["default"].createElement("div", {
        key: i,
        style: {
          zIndex: '1',
          position: 'relative'
        }
      }, list.map(function (o, i) {
        return _this2.renderMsg(o, i);
      }), /*#__PURE__*/React__default["default"].createElement("div", {
        className: "year"
      }, year));
    }
  }, {
    key: "renderMsg",
    value: function renderMsg(msg, i) {
      var msgClass = classNames__default["default"]({
        "msgBox leftSide": i % 2 == 0,
        "msgBox rightSide": i % 2 != 0
      });
      return /*#__PURE__*/React__default["default"].createElement("div", {
        key: i,
        className: msgClass
      }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("span", {
        className: "arrow"
      }, i % 2 == 0 ? /*#__PURE__*/React__default["default"].createElement("span", {
        className: "arrow-img arrow-left"
      }) : /*#__PURE__*/React__default["default"].createElement("span", {
        className: "arrow-img arrow-right"
      })), /*#__PURE__*/React__default["default"].createElement("div", {
        className: "detail"
      }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
        className: "title"
      }, msg.sendTime), /*#__PURE__*/React__default["default"].createElement("div", {
        className: "version"
      }, msg.title), /*#__PURE__*/React__default["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["default"].createElement("div", {
        className: "timetree"
      }, /*#__PURE__*/React__default["default"].createElement("div", {
        className: "bottom"
      }, /*#__PURE__*/React__default["default"].createElement("span", {
        className: "bottom-img"
      })), /*#__PURE__*/React__default["default"].createElement("div", {
        className: "content"
      }, /*#__PURE__*/React__default["default"].createElement("div", {
        className: "rocket slideInUp"
      }, /*#__PURE__*/React__default["default"].createElement("span", {
        className: "rocket-img"
      })), /*#__PURE__*/React__default["default"].createElement("div", {
        className: "main timeTreeMain"
      }, /*#__PURE__*/React__default["default"].createElement("div", {
        className: "line"
      }), keys.map(function (o, i) {
        return _this3.renderMsgContainer(o, data[o], i);
      }))));
    }
  }]);

  return TimetreeComponent;
}(React.PureComponent);

exports["default"] = TimetreeComponent;