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

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

import _extends from "@babel/runtime/helpers/extends";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _excluded = ["prefixCls", "style", "className", "children", "direction", "labelPlacement", "iconPrefix", "status", "size", "current", "progressDot", "setNumberChange", "getNumberChange", "headerRender", "headerIcon", "headerText", "type", "onChange"];

/* eslint react/no-did-mount-set-state: 0 */
import React, { Children, cloneElement, Component } from 'react';
import { findDOMNode } from 'react-dom';
import classNames from 'classnames';
import debounce from 'lodash/debounce';
import noop from 'lodash/noop';
import Dropdown from '../../../pro/es/dropdown';
import scrollIntoView from 'scroll-into-view-if-needed';
import { isFlexSupported } from './utils';
import StepGroup from './StepGroup';
import Step from './Step';
import RenderIcon from './RenderIcon';
import Icon from '../../icon';
import isFunction from 'lodash/isFunction';
import isString from 'lodash/isString';
import Menu from '../../menu';
import MenuItem from '../../menu/MenuItem';
import Button from '../../button';
import EventManager from '../../_util/EventManager';

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

  var _super = _createSuper(Steps);

  function Steps(props) {
    var _this;

    _classCallCheck(this, Steps);

    _this = _super.call(this, props);

    _defineProperty(_assertThisInitialized(_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
          });
        }
      }
    });

    _defineProperty(_assertThisInitialized(_this), "calcStepOffsetWidth", function () {
      if (isFlexSupported()) {
        return;
      } // Just for IE9


      var domNode = findDOMNode(_assertThisInitialized(_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
          });
        });
      }
    });

    _defineProperty(_assertThisInitialized(_this), "setNumberChange", function (index) {
      _this.props.setNumberChange(index);
    });

    _defineProperty(_assertThisInitialized(_this), "getNumberChange", function () {
      _this.props.getNumberChange();
    });

    _defineProperty(_assertThisInitialized(_this), "menuClick", function (e) {
      var _this$props$onChange = _this.props.onChange,
          onChange = _this$props$onChange === void 0 ? noop : _this$props$onChange;
      onChange(Number(e.key));
    });

    _defineProperty(_assertThisInitialized(_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];

            scrollIntoView(processDom, {
              block: 'end',
              behavior: 'smooth',
              scrollMode: 'if-needed',
              boundary: _this.menuRef
            });
          }
        });
      }
    });

    _this.state = {
      flexSupported: true,
      lastStepOffsetWidth: 0,
      isShowMore: false
    };
    _this.calcStepOffsetWidth = debounce(_this.calcStepOffsetWidth, 150);
    _this.resizeEvent = new EventManager(typeof window === 'undefined' ? undefined : window);
    _this.navRef = null;
    _this.menuRef = null;
    return _this;
  }

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

      if (!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) {
          scrollIntoView(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 = _objectWithoutProperties(_this$props3, _excluded);

      var _this$state = this.state,
          lastStepOffsetWidth = _this$state.lastStepOffsetWidth,
          flexSupported = _this$state.flexSupported,
          isShowMore = _this$state.isShowMore;
      var filteredChildren = 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 = classNames(prefixCls, "".concat(prefixCls, "-").concat(direction), className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-").concat(size), size), _defineProperty(_classNames, "".concat(prefixCls, "-label-").concat(adjustedlabelPlacement), direction === 'horizontal'), _defineProperty(_classNames, "".concat(prefixCls, "-dot"), !!progressDot), _defineProperty(_classNames, "".concat(prefixCls, "-navigation"), isNavigation), _classNames));

      var menu = function menu() {
        return /*#__PURE__*/React.createElement("div", {
          ref: function ref(dom) {
            _this2.menuRef = dom;
          }
        }, /*#__PURE__*/React.createElement(Menu, {
          onClick: _this2.menuClick,
          className: "".concat(prefixCls, "-dropdown-menu"),
          selectedKeys: ["".concat(current)]
        }, filteredChildren.map(function (child, index) {
          var childProps = _objectSpread({
            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 = classNames("".concat(prefixCls, "-item"), "".concat(prefixCls, "-item-").concat(childProps.status), className, _defineProperty({}, "".concat(prefixCls, "-item-custom"), child.props.icon));
          var iconCls = classNames("".concat(prefixCls, "-item-icon"), "".concat(prefixCls, "-item-dropdown-icon"));
          return /*#__PURE__*/React.createElement(MenuItem, {
            key: index
          }, /*#__PURE__*/React.createElement("div", {
            className: classString
          }, /*#__PURE__*/React.createElement("div", {
            className: iconCls
          }, /*#__PURE__*/React.createElement(RenderIcon, childProps)), /*#__PURE__*/React.createElement("div", {
            className: "".concat(prefixCls, "-item-dropdown-title")
          }, childProps.title)));
        })));
      };

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

        if (isString(IconText)) {
          headerChildren.push( /*#__PURE__*/React.createElement(Icon, {
            key: "IconText",
            type: IconText,
            className: classNames("".concat(prefixCls, "-header-icon"))
          }));
        }

        if (isString(headerTitle)) {
          headerChildren.push( /*#__PURE__*/React.createElement("span", {
            key: "headerTitle",
            className: classNames("".concat(prefixCls, "-header-title"))
          }, headerTitle));
        }

        if (isFunction(renderFn)) {
          var componentFn = renderFn;

          var renderFNHOC = function renderFNHOC(ComponentFn) {
            return /*#__PURE__*/function (_Component2) {
              _inherits(renderFN, _Component2);

              var _super2 = _createSuper(renderFN);

              function renderFN() {
                _classCallCheck(this, renderFN);

                return _super2.apply(this, arguments);
              }

              _createClass(renderFN, [{
                key: "render",
                value: function render() {
                  return ComponentFn();
                }
              }]);

              return renderFN;
            }(Component);
          };

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

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

      var navCls = classNames(_defineProperty({}, "".concat(prefixCls, "-navigation-container"), isNavigation));
      return /*#__PURE__*/React.createElement("div", {
        className: isNavigation ? classString : undefined
      }, /*#__PURE__*/React.createElement("div", _extends({
        className: isNavigation ? navCls : classString,
        style: style
      }, restProps, {
        ref: function ref(_ref) {
          _this2.navRef = _ref;
        }
      }), renderHeader(headerRender, headerText, headerIcon), Children.map(filteredChildren, function (child, index) {
        if (child.type === Step) {
          var gIndex = getNumberChange();

          var childProps = _objectSpread({
            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__*/cloneElement(child, childProps);
        }

        if (child.type === StepGroup) {
          var gruopProps = _objectSpread({}, _this2.props);

          gruopProps.children = child.props.children;
          gruopProps.className = classNames("".concat(prefixCls, "-group"), child.props.className);
          return /*#__PURE__*/cloneElement(child, gruopProps);
        }

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

  return Steps;
}(Component);

_defineProperty(Steps, "defaultProps", {
  prefixCls: 'rc-steps',
  iconPrefix: 'rc',
  direction: 'horizontal',
  labelPlacement: 'horizontal',
  current: 0,
  status: 'process',
  size: '',
  progressDot: false,
  type: 'default'
});

export { Steps as default };
//# sourceMappingURL=StepGroup.js.map