@txdfe/at/lib/step/view/step-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 _icon = _interopRequireDefault(require("../../icon"));
var _progress = _interopRequireDefault(require("../../progress"));
var _configProvider = _interopRequireDefault(require("../../config-provider"));
var _util = require("../../util");
var _excluded = ["prefix", "locale", "className", "status", "title", "icon", "index", "total", "shape", "content", "direction", "disabled", "onClick", "readOnly", "animation", "parentHeight", "itemRender", "parentWidth", "labelPlacement", "rtl"];
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 _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 _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 _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); }
/** Step.Item */
var StepItem = /*#__PURE__*/function (_Component) {
  function StepItem() {
    var _this;
    _classCallCheck(this, StepItem);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper(this, StepItem, [].concat(args));
    _defineProperty(_this, "resize", function () {
      var stepWidth = _util.dom.getStyle(_this.step, 'width');
      var rtl = _this.props.rtl;
      rtl ? _this.body.style.right = "".concat(stepWidth, "px") : _this.body.style.left = "".concat(stepWidth, "px");
      _util.dom.setStyle(_this.body, {
        width: _util.dom.getStyle(_this.step.parentNode.parentNode, 'width') - stepWidth
      });
      _util.dom.setStyle(_this.tail, 'height', _util.dom.getStyle(_this.body, 'height') - _util.dom.getStyle(_this.container, 'height'));
    });
    _defineProperty(_this, "onClick", function () {
      var _this$props = _this.props,
        index = _this$props.index,
        disabled = _this$props.disabled,
        readOnly = _this$props.readOnly,
        animation = _this$props.animation;
      if (disabled || readOnly) {
        return false;
      }
      if (animation && _this.stepNode) {
        _util.dom.hasClass(_this.stepNode, 'clicked') ? _util.dom.removeClass(_this.stepNode, 'clicked') : _util.dom.addClass(_this.stepNode, 'clicked');
      }
      _this.props.onClick(index);
    });
    _defineProperty(_this, "removeClickedCls", function () {
      var animation = _this.props.animation;
      if (animation && _this.stepNode && _util.dom.hasClass(_this.stepNode, 'clicked')) {
        _util.dom.removeClass(_this.stepNode, 'clicked');
      }
    });
    _defineProperty(_this, "_refHandlerCreator", function (refName) {
      var self = _this;
      return function (ref) {
        self[refName] = ref;
      };
    });
    return _this;
  }
  _inherits(StepItem, _Component);
  return _createClass(StepItem, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this$props2 = this.props,
        shape = _this$props2.shape,
        direction = _this$props2.direction,
        labelPlacement = _this$props2.labelPlacement,
        index = _this$props2.index,
        total = _this$props2.total;
      if (shape === 'arrow') {
        return;
      }
      if (direction === 'vertical' || direction === 'ver') {
        this.resize();
        this.forceUpdate(); // 解决Step嵌套的情况下，嵌套节点宽度为0的问题
        this.eventHandler = _util.events.on(window, 'resize', this.resize); // 调整垂直Step
      } else if ((direction === 'horizontal' || direction === 'hoz') && (labelPlacement === 'horizontal' || labelPlacement === 'hoz') && index !== total - 1) {
        // 调整横向Content
        this.adjustTail();
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      var _this2 = this;
      var _this$props3 = this.props,
        shape = _this$props3.shape,
        direction = _this$props3.direction,
        labelPlacement = _this$props3.labelPlacement,
        index = _this$props3.index,
        total = _this$props3.total,
        rtl = _this$props3.rtl;
      if (shape === 'arrow') {
        return;
      }
      var resetTailStyle = function resetTailStyle() {
        _util.dom.setStyle(_this2.tail, {
          width: '',
          // eslint-disable-next-line
          top: ''
        });
      };
      if (direction === 'vertical' || direction === 'ver') {
        this.resize();
      } else if (direction === 'horizontal' || direction === 'hoz') {
        var pos = rtl ? 'right' : 'left';
        _util.dom.setStyle(this.body, _defineProperty({
          width: ''
        }, pos, ''));
        if (shape === 'circle' && (labelPlacement === 'horizontal' || labelPlacement === 'hoz') && index !== total - 1) {
          // 调整横向Content
          this.adjustTail();
        } else {
          resetTailStyle();
        }
      } else if (index !== total - 1) {
        resetTailStyle();
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.eventHandler && this.eventHandler.off();
    }
  }, {
    key: "adjustTail",
    value: function adjustTail() {
      var width = this.container.offsetWidth + this.title.offsetWidth;
      _util.dom.setStyle(this.tail, {
        width: "calc(100% - ".concat(width, "px)"),
        top: "".concat(_util.dom.getStyle(this.container, 'height') / 2, "px")
      });
    }
  }, {
    key: "_getNode",
    value: function _getNode() {
      var _this$props4 = this.props,
        prefix = _this$props4.prefix,
        index = _this$props4.index,
        status = _this$props4.status,
        icon = _this$props4.icon,
        shape = _this$props4.shape,
        percent = _this$props4.percent,
        itemRender = _this$props4.itemRender;
      var nodeElement = icon;
      if (shape === 'dot') {
        nodeElement = icon ? /*#__PURE__*/_react["default"].createElement(_icon["default"], {
          type: icon
        }) : /*#__PURE__*/_react["default"].createElement("div", {
          className: "".concat(prefix, "step-item-node-dot")
        });
      } else if (shape === 'circle' && percent) {
        nodeElement = /*#__PURE__*/_react["default"].createElement(_progress["default"], {
          shape: "circle",
          percent: percent,
          className: "".concat(prefix, "step-item-progress")
        });
      } else if (shape === 'circle' && !!itemRender && typeof itemRender === 'function') {
        nodeElement = null; // 如果是需要自定义节点，则不处理，返回空
      } else {
        nodeElement = /*#__PURE__*/_react["default"].createElement("div", {
          className: "".concat(prefix, "step-item-node-circle")
        }, icon ? /*#__PURE__*/_react["default"].createElement(_icon["default"], {
          type: icon
        }) : this._itemRender(index, status));
      }
      return nodeElement;
    }
  }, {
    key: "getNode",
    value: function getNode(args) {
      var _this$props5 = this.props,
        prefix = _this$props5.prefix,
        itemRender = _this$props5.itemRender,
        index = _this$props5.index,
        status = _this$props5.status,
        title = _this$props5.title,
        content = _this$props5.content,
        shape = _this$props5.shape;
      var others = args.others,
        stepCls = args.stepCls,
        overlayCls = args.overlayCls;
      var nodeElement = this._getNode();
      var finalNodeElement = /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefix, "step-item-container"),
        ref: this._refHandlerCreator('container')
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefix, "step-item-node-placeholder"),
        onClick: this.onClick
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefix, "step-item-node"),
        ref: this._refHandlerCreator('stepNode'),
        onTransitionEnd: this.removeClickedCls
      }, nodeElement)));
      if (!nodeElement) {
        // 需要自定义子节点
        finalNodeElement = /*#__PURE__*/_react["default"].createElement("div", {
          className: "".concat(prefix, "step-item-container"),
          ref: this._refHandlerCreator('container')
        }, /*#__PURE__*/_react["default"].createElement("div", {
          className: "".concat(prefix, "step-item-node-placeholder"),
          onClick: this.onClick
        }, itemRender(index, status, title, content)));
      }
      if (shape !== 'arrow') {
        delete others.tabIndex;
        delete others['aria-current'];
      }
      return /*#__PURE__*/_react["default"].createElement("li", _extends({}, others, {
        style: this.getStyle(),
        className: stepCls,
        ref: this._refHandlerCreator('step')
      }), finalNodeElement, /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefix, "step-item-body"),
        ref: this._refHandlerCreator('body'),
        tabIndex: this.props.tabIndex,
        "aria-current": this.props['aria-current']
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefix, "step-item-title"),
        ref: this._refHandlerCreator('title')
      }, title), /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefix, "step-item-content")
      }, content)), /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefix, "step-item-tail"),
        ref: this._refHandlerCreator('tail')
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefix, "step-item-tail-underlay")
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefix, "step-item-tail-overlay"),
        style: overlayCls
      }))));
    }
  }, {
    key: "getStyle",
    value: function getStyle() {
      var _this$props6 = this.props,
        parentWidth = _this$props6.parentWidth,
        parentHeight = _this$props6.parentHeight,
        direction = _this$props6.direction,
        total = _this$props6.total,
        index = _this$props6.index,
        shape = _this$props6.shape;
      var width = 'auto';
      if (Number(parentWidth) && Number(parentHeight)) {
        if (!_util.support.flex && shape === 'arrow') {
          width = Math.floor(parentWidth / total - parentHeight / 2 - parentHeight / 8);
        }
      }
      if (shape !== 'arrow' && (direction === 'horizontal' || direction === 'hoz')) {
        width = total - 1 !== index ? "".concat(Math.floor(100 / total), "%") : 'auto';
      }
      return {
        width: width
      };
    }
  }, {
    key: "_itemRender",
    value:
    // 节点的渲染方法
    function _itemRender(index, status) {
      var itemRender = this.props.itemRender;
      if (itemRender) {
        return itemRender(index, status);
      }
      return status === 'finish' ? /*#__PURE__*/_react["default"].createElement("i", {
        className: "next-icon next-xs"
      }, /*#__PURE__*/_react["default"].createElement("svg", {
        viewBox: "0 0 1024 1024"
      }, /*#__PURE__*/_react["default"].createElement("path", {
        d: "M275.93,503.71A55.33,55.33,0,1,0,195,579.23L361,757.08a55.33,55.33,0,0,0,78.2,2.7q1.4-1.3,2.7-2.7l387.32-415a55.33,55.33,0,0,0-80.9-75.51L401.51,638.22Z"
      }))) : index + 1;
    }
  }, {
    key: "render",
    value: function render() {
      // eslint-disable-next-line
      var _this$props7 = this.props,
        prefix = _this$props7.prefix,
        locale = _this$props7.locale,
        className = _this$props7.className,
        status = _this$props7.status,
        title = _this$props7.title,
        icon = _this$props7.icon,
        index = _this$props7.index,
        total = _this$props7.total,
        shape = _this$props7.shape,
        content = _this$props7.content,
        direction = _this$props7.direction,
        disabled = _this$props7.disabled,
        onClick = _this$props7.onClick,
        readOnly = _this$props7.readOnly,
        animation = _this$props7.animation,
        parentHeight = _this$props7.parentHeight,
        itemRender = _this$props7.itemRender,
        parentWidth = _this$props7.parentWidth,
        labelPlacement = _this$props7.labelPlacement,
        rtl = _this$props7.rtl,
        others = _objectWithoutProperties(_this$props7, _excluded);
      var stepCls = (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefix, "step-item"), true), "".concat(prefix, "step-item-").concat(status), status), "".concat(prefix, "step-item-first"), index === 0), "".concat(prefix, "step-item-last"), index === total - 1), "".concat(prefix, "step-item-disabled"), disabled), "".concat(prefix, "step-item-read-only"), readOnly), className, className));
      var overlayCls = status === 'finish' ? {
        width: '100%'
      } : null;
      var arrowElement = /*#__PURE__*/_react["default"].createElement("li", _extends({}, others, {
        style: this.getStyle(),
        className: stepCls,
        onClick: this.onClick
      }), /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefix, "step-item-container")
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefix, "step-item-title")
      }, title)));
      var otherElement = this.getNode({
        others: others,
        stepCls: stepCls,
        overlayCls: overlayCls
      });
      return shape === 'arrow' ? arrowElement : otherElement;
    }
  }]);
}(_react.Component);
_defineProperty(StepItem, "propTypes", {
  prefix: _propTypes["default"].string,
  rtl: _propTypes["default"].bool,
  /**
   * 步骤的状态，如不传，会根据外层的 Step 的 current 属性生成，可选值为 `wait`, `process`, `finish`
   */
  status: _propTypes["default"].oneOf(['wait', 'process', 'finish']),
  /**
   * 标题
   */
  title: _propTypes["default"].node,
  direction: _propTypes["default"].oneOf(['hoz', 'ver']),
  labelPlacement: _propTypes["default"].oneOf(['hoz', 'ver']),
  shape: _propTypes["default"].oneOf(['circle', 'arrow', 'dot']),
  /**
   * 图标
   */
  icon: _propTypes["default"].string,
  /**
   * 内容，用于垂直状态下的内容填充
   */
  content: _propTypes["default"].node,
  /**
   * StepItem 的自定义渲染, 会覆盖父节点设置的itemRender
   * @param {Number} index   节点索引
   * @param {String} status  节点状态
   * @returns {Node} 节点的渲染结果
   */
  itemRender: _propTypes["default"].func,
  /**
   * 百分比
   */
  percent: _propTypes["default"].number,
  index: _propTypes["default"].number,
  total: _propTypes["default"].number,
  animation: _propTypes["default"].bool,
  // 是否开启动效，由父级传入
  /**
   * 是否禁用
   */
  disabled: _propTypes["default"].bool,
  parentWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
  parentHeight: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
  /**
   * 点击步骤时的回调
   * @param {Number} index 节点索引
   */
  onClick: _propTypes["default"].func,
  /**
   * 自定义样式
   */
  className: _propTypes["default"].string,
  readOnly: _propTypes["default"].bool
});
_defineProperty(StepItem, "defaultProps", {
  shape: 'circle',
  index: 0,
  total: 1,
  onClick: function onClick() {}
});
var _default = exports["default"] = _configProvider["default"].config(StepItem);