@txdfe/at/es/step/view/step-item.js

一个设计体系组件库

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

var _excluded = ["prefix", "locale", "className", "status", "title", "icon", "index", "total", "shape", "content", "direction", "disabled", "onClick", "readOnly", "animation", "parentHeight", "itemRender", "parentWidth", "labelPlacement", "rtl"];

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

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; }

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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

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 _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

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; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Icon from '../../icon';
import Progress from '../../progress';
import ConfigProvider from '../../config-provider';
import { support, events, dom } from '../../util';
/** Step.Item */

var StepItem = /*#__PURE__*/function (_Component) {
  _inherits(StepItem, _Component);

  var _super = _createSuper(StepItem);

  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 = _super.call.apply(_super, [this].concat(args));

    _defineProperty(_assertThisInitialized(_this), "resize", function () {
      var stepWidth = 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");
      dom.setStyle(_this.body, {
        width: dom.getStyle(_this.step.parentNode.parentNode, 'width') - stepWidth
      });
      dom.setStyle(_this.tail, 'height', dom.getStyle(_this.body, 'height') - dom.getStyle(_this.container, 'height'));
    });

    _defineProperty(_assertThisInitialized(_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) {
        dom.hasClass(_this.stepNode, 'clicked') ? dom.removeClass(_this.stepNode, 'clicked') : dom.addClass(_this.stepNode, 'clicked');
      }

      _this.props.onClick(index);
    });

    _defineProperty(_assertThisInitialized(_this), "removeClickedCls", function () {
      var animation = _this.props.animation;

      if (animation && _this.stepNode && dom.hasClass(_this.stepNode, 'clicked')) {
        dom.removeClass(_this.stepNode, 'clicked');
      }
    });

    _defineProperty(_assertThisInitialized(_this), "_refHandlerCreator", function (refName) {
      var self = _assertThisInitialized(_this);

      return function (ref) {
        self[refName] = ref;
      };
    });

    return _this;
  }

  _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 = 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() {
        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';
        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;
      dom.setStyle(this.tail, {
        width: "calc(100% - ".concat(width, "px)"),
        top: "".concat(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.createElement(Icon, {
          type: icon
        }) : /*#__PURE__*/React.createElement("div", {
          className: "".concat(prefix, "step-item-node-dot")
        });
      } else if (shape === 'circle' && percent) {
        nodeElement = /*#__PURE__*/React.createElement(Progress, {
          shape: "circle",
          percent: percent,
          className: "".concat(prefix, "step-item-progress")
        });
      } else if (shape === 'circle' && !!itemRender && typeof itemRender === 'function') {
        nodeElement = null; // 如果是需要自定义节点，则不处理，返回空
      } else {
        nodeElement = /*#__PURE__*/React.createElement("div", {
          className: "".concat(prefix, "step-item-node-circle")
        }, icon ? /*#__PURE__*/React.createElement(Icon, {
          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.createElement("div", {
        className: "".concat(prefix, "step-item-container"),
        ref: this._refHandlerCreator('container')
      }, /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefix, "step-item-node-placeholder"),
        onClick: this.onClick
      }, /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefix, "step-item-node"),
        ref: this._refHandlerCreator('stepNode'),
        onTransitionEnd: this.removeClickedCls
      }, nodeElement)));

      if (!nodeElement) {
        // 需要自定义子节点
        finalNodeElement = /*#__PURE__*/React.createElement("div", {
          className: "".concat(prefix, "step-item-container"),
          ref: this._refHandlerCreator('container')
        }, /*#__PURE__*/React.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.createElement("li", _extends({}, others, {
        style: this.getStyle(),
        className: stepCls,
        ref: this._refHandlerCreator('step')
      }), finalNodeElement, /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefix, "step-item-body"),
        ref: this._refHandlerCreator('body'),
        tabIndex: this.props.tabIndex,
        "aria-current": this.props['aria-current']
      }, /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefix, "step-item-title"),
        ref: this._refHandlerCreator('title')
      }, title), /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefix, "step-item-content")
      }, content)), /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefix, "step-item-tail"),
        ref: this._refHandlerCreator('tail')
      }, /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefix, "step-item-tail-underlay")
      }, /*#__PURE__*/React.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 (!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.createElement("i", {
        className: "next-icon next-xs"
      }, /*#__PURE__*/React.createElement("svg", {
        viewBox: "0 0 1024 1024"
      }, /*#__PURE__*/React.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() {
      var _classNames;

      // 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 = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "step-item"), true), _defineProperty(_classNames, "".concat(prefix, "step-item-").concat(status), status), _defineProperty(_classNames, "".concat(prefix, "step-item-first"), index === 0), _defineProperty(_classNames, "".concat(prefix, "step-item-last"), index === total - 1), _defineProperty(_classNames, "".concat(prefix, "step-item-disabled"), disabled), _defineProperty(_classNames, "".concat(prefix, "step-item-read-only"), readOnly), _defineProperty(_classNames, className, className), _classNames));
      var overlayCls = status === 'finish' ? {
        width: '100%'
      } : null;
      var arrowElement = /*#__PURE__*/React.createElement("li", _extends({}, others, {
        style: this.getStyle(),
        className: stepCls,
        onClick: this.onClick
      }), /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefix, "step-item-container")
      }, /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefix, "step-item-title")
      }, title)));
      var otherElement = this.getNode({
        others: others,
        stepCls: stepCls,
        overlayCls: overlayCls
      });
      return shape === 'arrow' ? arrowElement : otherElement;
    }
  }]);

  return StepItem;
}(Component);

_defineProperty(StepItem, "propTypes", {
  prefix: PropTypes.string,
  rtl: PropTypes.bool,

  /**
   * 步骤的状态，如不传，会根据外层的 Step 的 current 属性生成，可选值为 `wait`, `process`, `finish`
   */
  status: PropTypes.oneOf(['wait', 'process', 'finish']),

  /**
   * 标题
   */
  title: PropTypes.node,
  direction: PropTypes.oneOf(['hoz', 'ver']),
  labelPlacement: PropTypes.oneOf(['hoz', 'ver']),
  shape: PropTypes.oneOf(['circle', 'arrow', 'dot']),

  /**
   * 图标
   */
  icon: PropTypes.string,

  /**
   * 内容，用于垂直状态下的内容填充
   */
  content: PropTypes.node,

  /**
   * StepItem 的自定义渲染, 会覆盖父节点设置的itemRender
   * @param {Number} index   节点索引
   * @param {String} status  节点状态
   * @returns {Node} 节点的渲染结果
   */
  itemRender: PropTypes.func,

  /**
   * 百分比
   */
  percent: PropTypes.number,
  index: PropTypes.number,
  total: PropTypes.number,
  animation: PropTypes.bool,
  // 是否开启动效，由父级传入

  /**
   * 是否禁用
   */
  disabled: PropTypes.bool,
  parentWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  parentHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

  /**
   * 点击步骤时的回调
   * @param {Number} index 节点索引
   */
  onClick: PropTypes.func,

  /**
   * 自定义样式
   */
  className: PropTypes.string,
  readOnly: PropTypes.bool
});

_defineProperty(StepItem, "defaultProps", {
  shape: 'circle',
  index: 0,
  total: 1,
  onClick: function onClick() {}
});

export default ConfigProvider.config(StepItem);