var _excluded = ["list", "lineAttribute", "lineCross", "badgeAttribute", "dotAttribute"];

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React, { useEffect, useRef } from 'react';

function Timeline(_ref) {
  var list = _ref.list,
      _ref$lineAttribute = _ref.lineAttribute,
      lineAttribute = _ref$lineAttribute === void 0 ? {} : _ref$lineAttribute,
      _ref$lineCross = _ref.lineCross,
      lineCross = _ref$lineCross === void 0 ? true : _ref$lineCross,
      _ref$badgeAttribute = _ref.badgeAttribute,
      badgeAttribute = _ref$badgeAttribute === void 0 ? {} : _ref$badgeAttribute,
      _ref$dotAttribute = _ref.dotAttribute,
      dotAttribute = _ref$dotAttribute === void 0 ? {} : _ref$dotAttribute,
      others = _objectWithoutPropertiesLoose(_ref, _excluded);

  var rootRef = useRef(null);
  var lineRef = useRef(null); // 通到底部的计算方法

  useEffect(function () {
    if (lineCross !== false || !lineRef || !lineRef.current || !rootRef.current) return;
    var dotsEl = rootRef.current.querySelectorAll('.timeline-dot');
    if (!dotsEl.length) return; // 取出此点距离根容器的间距

    var top = getOffsetTop(dotsEl[0], rootRef.current);
    var bottom = getOffsetBottom(dotsEl[dotsEl.length - 1], rootRef.current);
    lineRef.current.style.top = top + 'px';
    lineRef.current.style.bottom = bottom + 'px';
  }, [lineCross]);

  function getOffsetTop(currentEl, targetEl) {
    if (!targetEl || !currentEl) return 0;
    var offsetTop = 0;

    function sumOffsetTop(el) {
      if (targetEl.innerHTML === el.innerHTML || !el || el.tagName === 'BODY') return;
      offsetTop += el.offsetTop;
      sumOffsetTop(el.parentNode);
    }

    sumOffsetTop(currentEl);
    return offsetTop;
  }

  function getOffsetBottom(currentEl, targetEl) {
    if (!targetEl || !currentEl) return 0;
    var offsetTop = getOffsetTop(currentEl, targetEl) + currentEl.offsetHeight;
    return targetEl.scrollHeight - offsetTop;
  }

  if (!list) return null;
  var listDOM = list.map(function (item, index) {
    return /*#__PURE__*/React.createElement("div", {
      key: index,
      className: 'timeline-case' + (item.active ? ' active' : '')
    }, /*#__PURE__*/React.createElement("div", _extends({}, badgeAttribute, {
      className: "timeline-badge" + (badgeAttribute.className ? ' ' + badgeAttribute.className : '')
    }), item.icon || /*#__PURE__*/React.createElement("i", _extends({}, dotAttribute, {
      className: "timeline-dot" + (dotAttribute.className ? ' ' + dotAttribute.className : '')
    }))), item.content, item.contentHTML && /*#__PURE__*/React.createElement("div", {
      dangerouslySetInnerHTML: {
        __html: item.contentHTML
      }
    }));
  });
  return /*#__PURE__*/React.createElement("div", _extends({
    ref: rootRef
  }, others, {
    className: "timeline" + (others.className ? ' ' + others.className : '')
  }), /*#__PURE__*/React.createElement("span", _extends({
    ref: lineRef
  }, lineAttribute, {
    className: "timeline-line" + (lineAttribute.className ? ' ' + lineAttribute.className : '')
  })), listDOM);
}

export default Timeline;