choerodon-ui/lib/rc-components/steps/StepGroup.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireWildcard(require("react"));

var _reactDom = require("react-dom");

var _classnames = _interopRequireDefault(require("classnames"));

var _debounce = _interopRequireDefault(require("lodash/debounce"));

var _noop = _interopRequireDefault(require("lodash/noop"));

var _dropdown = _interopRequireDefault(require("../../../pro/lib/dropdown"));

var _scrollIntoViewIfNeeded = _interopRequireDefault(require("scroll-into-view-if-needed"));

var _utils = require("./utils");

var _StepGroup = _interopRequireDefault(require("./StepGroup"));

var _Step = _interopRequireDefault(require("./Step"));

var _RenderIcon = _interopRequireDefault(require("./RenderIcon"));

var _icon = _interopRequireDefault(require("../../icon"));

var _isFunction = _interopRequireDefault(require("lodash/isFunction"));

var _isString = _interopRequireDefault(require("lodash/isString"));

var _menu = _interopRequireDefault(require("../../menu"));

var _MenuItem = _interopRequireDefault(require("../../menu/MenuItem"));

var _button = _interopRequireDefault(require("../../button"));

var _EventManager = _interopRequireDefault(require("../../_util/EventManager"));

var _excluded = ["prefixCls", "style", "className", "children", "direction", "labelPlacement", "iconPrefix", "status", "size", "current", "progressDot", "setNumberChange", "getNumberChange", "headerRender", "headerIcon", "headerText", "type", "onChange"];

var Steps = /*#__PURE__*/function (_Component) {
  (0, _inherits2["default"])(Steps, _Component);

  var _super = (0, _createSuper2["default"])(Steps);

  function Steps(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, Steps);
    _this = _super.call(this, props);
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "showMore", function () {
      if (_this.props.type === 'navigation') {
        var stepsDom = _this.navRef;

        if (stepsDom) {
          _this.setState({
            isShowMore: stepsDom.scrollWidth > stepsDom.clientWidth || stepsDom.offsetWidth > stepsDom.clientWidth
          });
        }
      }
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "calcStepOffsetWidth", function () {
      if ((0, _utils.isFlexSupported)()) {
        return;
      } // Just for IE9


      var domNode = (0, _reactDom.findDOMNode)((0, _assertThisInitialized2["default"])(_this));

      if (domNode.children.length > 0) {
        if (_this.calcTimeout) {
          clearTimeout(_this.calcTimeout);
        }

        _this.calcTimeout = setTimeout(function () {
          // +1 for fit edge bug of digit width, like 35.4px
          var lastStepOffsetWidth = (domNode.lastChild.offsetWidth || 0) + 1; // Reduce shake bug

          if (_this.state.lastStepOffsetWidth === lastStepOffsetWidth || Math.abs(_this.state.lastStepOffsetWidth - lastStepOffsetWidth) <= 3) {
            return;
          }

          _this.setState({
            lastStepOffsetWidth: lastStepOffsetWidth
          });
        });
      }
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setNumberChange", function (index) {
      _this.props.setNumberChange(index);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getNumberChange", function () {
      _this.props.getNumberChange();
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "menuClick", function (e) {
      var _this$props$onChange = _this.props.onChange,
          onChange = _this$props$onChange === void 0 ? _noop["default"] : _this$props$onChange;
      onChange(Number(e.key));
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onVisibleChange", function (visible) {
      var _this$props = _this.props,
          prefixCls = _this$props.prefixCls,
          current = _this$props.current;

      if (visible) {
        setTimeout(function () {
          if (_this.menuRef) {
            var processDom = _this.menuRef.getElementsByTagName('li')[current];

            (0, _scrollIntoViewIfNeeded["default"])(processDom, {
              block: 'end',
              behavior: 'smooth',
              scrollMode: 'if-needed',
              boundary: _this.menuRef
            });
          }
        });
      }
    });
    _this.state = {
      flexSupported: true,
      lastStepOffsetWidth: 0,
      isShowMore: false
    };
    _this.calcStepOffsetWidth = (0, _debounce["default"])(_this.calcStepOffsetWidth, 150);
    _this.resizeEvent = new _EventManager["default"](typeof window === 'undefined' ? undefined : window);
    _this.navRef = null;
    _this.menuRef = null;
    return _this;
  }

  (0, _createClass2["default"])(Steps, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.props.setNumberChange(0);
      this.calcStepOffsetWidth();

      if (!(0, _utils.isFlexSupported)()) {
        this.setState({
          flexSupported: false
        });
      }

      this.showMore();
      this.resizeEvent.addEventListener('resize', this.showMore);
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      this.props.setNumberChange(0);
      this.calcStepOffsetWidth(); // 定位到进行中的导航步骤

      var _this$props2 = this.props,
          prefixCls = _this$props2.prefixCls,
          type = _this$props2.type;

      if (this.navRef && type === 'navigation') {
        var processCls = "".concat(prefixCls, "-item-process");
        var processDom = this.navRef.getElementsByClassName(processCls);

        if (processDom.length) {
          (0, _scrollIntoViewIfNeeded["default"])(processDom[0], {
            block: 'end',
            behavior: 'smooth',
            scrollMode: 'if-needed',
            boundary: this.navRef
          });
        }
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.props.setNumberChange(0);

      if (this.calcTimeout) {
        clearTimeout(this.calcTimeout);
      }

      if (this.calcStepOffsetWidth && this.calcStepOffsetWidth.cancel) {
        this.calcStepOffsetWidth.cancel();
      }

      this.resizeEvent.removeEventListener('resize', this.showMore);
    }
  }, {
    key: "render",
    value: function render() {
      var _classNames,
          _this2 = this;

      var _this$props3 = this.props,
          prefixCls = _this$props3.prefixCls,
          _this$props3$style = _this$props3.style,
          style = _this$props3$style === void 0 ? {} : _this$props3$style,
          className = _this$props3.className,
          children = _this$props3.children,
          direction = _this$props3.direction,
          labelPlacement = _this$props3.labelPlacement,
          iconPrefix = _this$props3.iconPrefix,
          status = _this$props3.status,
          size = _this$props3.size,
          current = _this$props3.current,
          progressDot = _this$props3.progressDot,
          setNumberChange = _this$props3.setNumberChange,
          getNumberChange = _this$props3.getNumberChange,
          headerRender = _this$props3.headerRender,
          headerIcon = _this$props3.headerIcon,
          headerText = _this$props3.headerText,
          type = _this$props3.type,
          onChange = _this$props3.onChange,
          restProps = (0, _objectWithoutProperties2["default"])(_this$props3, _excluded);
      var _this$state = this.state,
          lastStepOffsetWidth = _this$state.lastStepOffsetWidth,
          flexSupported = _this$state.flexSupported,
          isShowMore = _this$state.isShowMore;

      var filteredChildren = _react.Children.toArray(children).filter(function (c) {
        return !!c;
      });

      var lastIndex = filteredChildren.length - 1;
      var adjustedlabelPlacement = !!progressDot ? 'vertical' : labelPlacement; // 限制导航步骤条只能横向显示

      var isNavigation = type === 'navigation' && direction !== 'vertical';
      var classString = (0, _classnames["default"])(prefixCls, "".concat(prefixCls, "-").concat(direction), className, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-").concat(size), size), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-label-").concat(adjustedlabelPlacement), direction === 'horizontal'), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-dot"), !!progressDot), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-navigation"), isNavigation), _classNames));

      var menu = function menu() {
        return /*#__PURE__*/_react["default"].createElement("div", {
          ref: function ref(dom) {
            _this2.menuRef = dom;
          }
        }, /*#__PURE__*/_react["default"].createElement(_menu["default"], {
          onClick: _this2.menuClick,
          className: "".concat(prefixCls, "-dropdown-menu"),
          selectedKeys: ["".concat(current)]
        }, filteredChildren.map(function (child, index) {
          var childProps = (0, _objectSpread2["default"])({
            stepNumber: "".concat(index + 1),
            prefixCls: prefixCls,
            iconPrefix: iconPrefix
          }, child.props);

          if (!child.props.status) {
            if (index === current) {
              childProps.status = status;
            } else if (index < current) {
              childProps.status = 'finish';
            } else {
              childProps.status = 'wait';
            }
          }

          var classString = (0, _classnames["default"])("".concat(prefixCls, "-item"), "".concat(prefixCls, "-item-").concat(childProps.status), className, (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-item-custom"), child.props.icon));
          var iconCls = (0, _classnames["default"])("".concat(prefixCls, "-item-icon"), "".concat(prefixCls, "-item-dropdown-icon"));
          return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
            key: index
          }, /*#__PURE__*/_react["default"].createElement("div", {
            className: classString
          }, /*#__PURE__*/_react["default"].createElement("div", {
            className: iconCls
          }, /*#__PURE__*/_react["default"].createElement(_RenderIcon["default"], childProps)), /*#__PURE__*/_react["default"].createElement("div", {
            className: "".concat(prefixCls, "-item-dropdown-title")
          }, childProps.title)));
        })));
      };

      var renderHeader = function renderHeader(renderFn, headerTitle, IconText) {
        var headerChildren = [];

        if ((0, _isString["default"])(IconText)) {
          headerChildren.push( /*#__PURE__*/_react["default"].createElement(_icon["default"], {
            key: "IconText",
            type: IconText,
            className: (0, _classnames["default"])("".concat(prefixCls, "-header-icon"))
          }));
        }

        if ((0, _isString["default"])(headerTitle)) {
          headerChildren.push( /*#__PURE__*/_react["default"].createElement("span", {
            key: "headerTitle",
            className: (0, _classnames["default"])("".concat(prefixCls, "-header-title"))
          }, headerTitle));
        }

        if ((0, _isFunction["default"])(renderFn)) {
          var componentFn = renderFn;

          var renderFNHOC = function renderFNHOC(ComponentFn) {
            return /*#__PURE__*/function (_Component2) {
              (0, _inherits2["default"])(renderFN, _Component2);

              var _super2 = (0, _createSuper2["default"])(renderFN);

              function renderFN() {
                (0, _classCallCheck2["default"])(this, renderFN);
                return _super2.apply(this, arguments);
              }

              (0, _createClass2["default"])(renderFN, [{
                key: "render",
                value: function render() {
                  return ComponentFn();
                }
              }]);
              return renderFN;
            }(_react.Component);
          };

          var HasKeyComponent = renderFNHOC(componentFn);
          headerChildren = [/*#__PURE__*/_react["default"].createElement(HasKeyComponent, {
            key: "renderFn"
          })];
        }

        return headerChildren.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", {
          className: "".concat(prefixCls, "-header")
        }, headerChildren) : null;
      };

      var navCls = (0, _classnames["default"])((0, _defineProperty2["default"])({}, "".concat(prefixCls, "-navigation-container"), isNavigation));
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: isNavigation ? classString : undefined
      }, /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
        className: isNavigation ? navCls : classString,
        style: style
      }, restProps, {
        ref: function ref(_ref) {
          _this2.navRef = _ref;
        }
      }), renderHeader(headerRender, headerText, headerIcon), _react.Children.map(filteredChildren, function (child, index) {
        if (child.type === _Step["default"]) {
          var gIndex = getNumberChange();
          var childProps = (0, _objectSpread2["default"])({
            stepNumber: "".concat(gIndex + 1),
            prefixCls: prefixCls,
            iconPrefix: iconPrefix,
            wrapperStyle: style,
            progressDot: progressDot,
            onChange: onChange,
            navigation: isNavigation && filteredChildren.length - 1 !== index
          }, child.props);
          /**
           * 如果支持flex布局 方向不是垂直 indx不是最后一个
           */

          if (!flexSupported && direction !== 'vertical' && gIndex !== lastIndex) {
            childProps.itemWidth = "".concat(100 / lastIndex, "%");
            childProps.adjustMarginRight = -Math.round(lastStepOffsetWidth / lastIndex + 1);
          } // fix tail color 修复末尾颜色


          if (status === 'error' && gIndex === current - 1) {
            childProps.className = "".concat(prefixCls, "-next-error");
          }

          if (!child.props.status) {
            if (gIndex === current) {
              childProps.status = status;
            } else if (gIndex < current) {
              childProps.status = 'finish';
            } else {
              childProps.status = 'wait';
            }
          }

          setNumberChange(++gIndex);
          return /*#__PURE__*/(0, _react.cloneElement)(child, childProps);
        }

        if (child.type === _StepGroup["default"]) {
          var gruopProps = (0, _objectSpread2["default"])({}, _this2.props);
          gruopProps.children = child.props.children;
          gruopProps.className = (0, _classnames["default"])("".concat(prefixCls, "-group"), child.props.className);
          return /*#__PURE__*/(0, _react.cloneElement)(child, gruopProps);
        }

        return null;
      })), isShowMore && direction !== 'vertical' && /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-dropdown")
      }, /*#__PURE__*/_react["default"].createElement(_dropdown["default"], {
        overlay: menu,
        key: "more",
        onVisibleChange: this.onVisibleChange
      }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
        type: "primary",
        icon: "more_horiz"
      }))));
    }
  }]);
  return Steps;
}(_react.Component);

exports["default"] = Steps;
(0, _defineProperty2["default"])(Steps, "defaultProps", {
  prefixCls: 'rc-steps',
  iconPrefix: 'rc',
  direction: 'horizontal',
  labelPlacement: 'horizontal',
  current: 0,
  status: 'process',
  size: '',
  progressDot: false,
  type: 'default'
});
//# sourceMappingURL=StepGroup.js.map