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 _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

/* eslint react/no-did-mount-set-state: 0 */
import React, { Children, cloneElement, Component } from 'react';
import PropTypes from 'prop-types';
import { findDOMNode } from 'react-dom';
import classNames from 'classnames';
import debounce from 'lodash/debounce';
import { isFlexSupported } from './utils';
import StepGroup from './StepGroup';
import Step from './Step';
import Icon from '../../icon';
import isFunction from 'lodash/isFunction';
import isString from 'lodash/isString';

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), "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();
    });

    _this.state = {
      flexSupported: true,
      lastStepOffsetWidth: 0
    };
    _this.calcStepOffsetWidth = debounce(_this.calcStepOffsetWidth, 150);
    return _this;
  }

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

      if (!isFlexSupported()) {
        this.setState({
          flexSupported: false
        });
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      this.props.setNumberChange(0);
      this.calcStepOffsetWidth();
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.props.setNumberChange(0);

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

      if (this.calcStepOffsetWidth && this.calcStepOffsetWidth.cancel) {
        this.calcStepOffsetWidth.cancel();
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _classNames,
          _this2 = this;

      var _this$props = this.props,
          prefixCls = _this$props.prefixCls,
          _this$props$style = _this$props.style,
          style = _this$props$style === void 0 ? {} : _this$props$style,
          className = _this$props.className,
          children = _this$props.children,
          direction = _this$props.direction,
          labelPlacement = _this$props.labelPlacement,
          iconPrefix = _this$props.iconPrefix,
          status = _this$props.status,
          size = _this$props.size,
          current = _this$props.current,
          progressDot = _this$props.progressDot,
          setNumberChange = _this$props.setNumberChange,
          getNumberChange = _this$props.getNumberChange,
          headerRender = _this$props.headerRender,
          headerIcon = _this$props.headerIcon,
          headerText = _this$props.headerText,
          restProps = _objectWithoutProperties(_this$props, ["prefixCls", "style", "className", "children", "direction", "labelPlacement", "iconPrefix", "status", "size", "current", "progressDot", "setNumberChange", "getNumberChange", "headerRender", "headerIcon", "headerText"]);

      var _this$state = this.state,
          lastStepOffsetWidth = _this$state.lastStepOffsetWidth,
          flexSupported = _this$state.flexSupported;
      var filteredChildren = Children.toArray(children).filter(function (c) {
        return !!c;
      });
      var lastIndex = filteredChildren.length - 1;
      var adjustedlabelPlacement = !!progressDot ? 'vertical' : labelPlacement;
      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), _classNames));

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

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

        if (isString(headerTitle)) {
          headerChildren.push(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 = [React.createElement(HasKeyComponent, {
            key: "renderFn"
          })];
        }

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

      return React.createElement("div", _extends({
        className: classString,
        style: style
      }, restProps), 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
          }, 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 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 cloneElement(child, gruopProps);
        }

        return null;
      }));
    }
  }]);

  return Steps;
}(Component);

_defineProperty(Steps, "propTypes", {
  prefixCls: PropTypes.string,
  className: PropTypes.string,
  iconPrefix: PropTypes.string,
  direction: PropTypes.string,
  labelPlacement: PropTypes.string,
  children: PropTypes.any,
  status: PropTypes.string,
  size: PropTypes.string,
  progressDot: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
  style: PropTypes.object,
  current: PropTypes.number,
  getNumberChange: PropTypes.func,
  setNumberChange: PropTypes.func,
  headerRender: PropTypes.func,
  headerIcon: PropTypes.string,
  headerText: PropTypes.string
});

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

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