@txdfe/at/lib/timeline/view/timeline-item.js

一个设计体系组件库

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _animate = _interopRequireDefault(require("../../animate"));
var _icon = _interopRequireDefault(require("../../icon"));
var _button = _interopRequireDefault(require("../../button"));
var _util = require("../../util");
var _excluded = ["prefix", "className", "state", "icon", "dot", "time", "title", "timeLeft", "content", "index", "total", "folderIndex", "foldShow", "locale", "animation"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /* eslint-disable react/no-did-mount-set-state */
var Expand = _animate["default"].Expand;
/** Timeline.Item */
var TimelineItem = /*#__PURE__*/function (_Component) {
  function TimelineItem(props) {
    var _this;
    _classCallCheck(this, TimelineItem);
    _this = _callSuper(this, TimelineItem, [props]);
    _defineProperty(_this, "toggleFold", function (folderIndex) {
      _this.props.toggleFold(folderIndex);
    });
    _defineProperty(_this, "toggleSpread", function () {
      _this.setState({
        isSpread: !_this.state.isSpread
      });
    });
    _defineProperty(_this, "beforeEnter", function () {
      _this['timeline-item'].style['min-height'] = 'auto';
    });
    _defineProperty(_this, "beforeLeave", function () {
      _this['timeline-item'].style['min-height'] = '48px'; // timeleft 节点最小高度
    });
    _this.state = {
      isSpread: false
    };
    return _this;
  }
  _inherits(TimelineItem, _Component);
  return _createClass(TimelineItem, [{
    key: "render",
    value: function render() {
      var _this2 = this;
      var _this$props = this.props,
        prefix = _this$props.prefix,
        className = _this$props.className,
        state = _this$props.state,
        icon = _this$props.icon,
        dot = _this$props.dot,
        time = _this$props.time,
        title = _this$props.title,
        timeLeft = _this$props.timeLeft,
        content = _this$props.content,
        index = _this$props.index,
        total = _this$props.total,
        folderIndex = _this$props.folderIndex,
        foldShow = _this$props.foldShow,
        locale = _this$props.locale,
        animation = _this$props.animation,
        others = _objectWithoutProperties(_this$props, _excluded);
      var finalItemNode = dot;
      if (!finalItemNode) {
        if (icon) {
          finalItemNode = /*#__PURE__*/_react["default"].createElement("span", {
            className: "".concat(prefix, "timeline-item-icon")
          }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
            type: icon,
            size: "small"
          }));
        } else {
          finalItemNode = /*#__PURE__*/_react["default"].createElement("span", {
            className: "".concat(prefix, "timeline-item-dot")
          });
        }
      }
      var itemCls = (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefix, "timeline-item"), true), "".concat(prefix, "timeline-item-first"), index === 0), "".concat(prefix, "timeline-item-last"), index === total - 1), "".concat(prefix, "timeline-item-").concat(state), state), "".concat(prefix, "timeline-item-folded"), folderIndex), "".concat(prefix, "timeline-item-unfolded"), foldShow), "".concat(prefix, "timeline-item-has-left-content"), timeLeft), className, className));
      var folderCls = (0, _classnames["default"])(_defineProperty(_defineProperty({}, "".concat(prefix, "timeline-item-folder"), true), "".concat(prefix, "timeline-item-has-left-content"), timeLeft));
      var itemNodeCls = (0, _classnames["default"])(_defineProperty(_defineProperty({}, "".concat(prefix, "timeline-item-node"), true), "".concat(prefix, "timeline-item-node-custom"), dot));
      var dotTailCls = (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefix, "timeline-item-dot-tail"), true), "".concat(prefix, "timeline-item-dot-tail-solid"), foldShow), "".concat(prefix, "timeline-hide"), index === total - 1 && foldShow));
      var buttonProps = {
        text: true,
        size: 'small',
        type: 'primary',
        onClick: this.toggleFold.bind(this, folderIndex, total)
      };
      var timelineNode = folderIndex && foldShow || !folderIndex ? /*#__PURE__*/_react["default"].createElement("div", _extends({}, _util.obj.pickOthers(TimelineItem.propTypes, others), {
        className: itemCls,
        ref: function ref(e) {
          _this2['timeline-item'] = e;
        }
      }), /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefix, "timeline-item-left-content")
      }, /*#__PURE__*/_react["default"].createElement("p", {
        className: "".concat(prefix, "timeline-item-body")
      }, timeLeft)), /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefix, "timeline-item-timeline")
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefix, "timeline-item-tail")
      }, /*#__PURE__*/_react["default"].createElement("i", null)), /*#__PURE__*/_react["default"].createElement("div", {
        className: itemNodeCls
      }, finalItemNode)), /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefix, "timeline-item-content")
      }, title ? /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefix, "timeline-item-title")
      }, title) : null, time ? /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefix, "timeline-item-time")
      }, time) : null, content ? /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefix, "timeline-item-body")
      }, content) : null)) : null;
      return /*#__PURE__*/_react["default"].createElement("li", {
        tabIndex: "0"
      }, animation && folderIndex ? /*#__PURE__*/_react["default"].createElement(Expand, {
        animationAppear: false,
        beforeEnter: this.beforeEnter,
        beforeLeave: this.beforeEnter,
        afterEnter: this.beforeLeave
      }, timelineNode) : timelineNode, folderIndex === index ? /*#__PURE__*/_react["default"].createElement("div", {
        className: folderCls
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: dotTailCls
      }), foldShow ? /*#__PURE__*/_react["default"].createElement(_button["default"], buttonProps, locale.fold, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
        type: "chevron-up"
      })) : /*#__PURE__*/_react["default"].createElement(_button["default"], buttonProps, locale.expand, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
        type: "chevron-down"
      }))) : null);
    }
  }]);
}(_react.Component);
_defineProperty(TimelineItem, "propTypes", {
  prefix: _propTypes["default"].string,
  index: _propTypes["default"].number,
  total: _propTypes["default"].number,
  folderIndex: _propTypes["default"].number,
  foldShow: _propTypes["default"].bool,
  /**
   * 节点状态
   */
  state: _propTypes["default"].oneOf(['done', 'process', 'error', 'success']),
  /**
   * 图标
   */
  icon: _propTypes["default"].string,
  /**
   * 自定义时间轴节点
   */
  dot: _propTypes["default"].node,
  /**
   * 格式化后的时间
   */
  time: _propTypes["default"].node,
  /**
   * 标题
   */
  title: _propTypes["default"].node,
  /**
   * 左侧时间
   */
  timeLeft: _propTypes["default"].node,
  /**
   * 右侧内容
   */
  content: _propTypes["default"].node,
  toggleFold: _propTypes["default"].func,
  className: _propTypes["default"].string,
  locale: _propTypes["default"].object,
  /**
   * 动画
   */
  animation: _propTypes["default"].bool
});
_defineProperty(TimelineItem, "defaultProps", {
  prefix: 'next-',
  state: 'done',
  toggleFold: function toggleFold() {},
  animation: true
});
var _default = exports["default"] = TimelineItem;