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

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

"use strict";

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

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

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 _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

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

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

var _propTypes = _interopRequireDefault(require("prop-types"));

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

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

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

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

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

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

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

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

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

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 = (0, _getPrototypeOf2["default"])(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return (0, _possibleConstructorReturn2["default"])(this, result);
  };
}

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

  var _super = _createSuper(Steps);

  function Steps(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, Steps);
    _this = _super.call(this, props);
    (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();
    });
    _this.state = {
      flexSupported: true,
      lastStepOffsetWidth: 0
    };
    _this.calcStepOffsetWidth = (0, _debounce["default"])(_this.calcStepOffsetWidth, 150);
    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
        });
      }
    }
  }, {
    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 = (0, _objectWithoutProperties2["default"])(_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 = _react.Children.toArray(children).filter(function (c) {
        return !!c;
      });

      var lastIndex = filteredChildren.length - 1;
      var adjustedlabelPlacement = !!progressDot ? 'vertical' : labelPlacement;
      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), _classNames));

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

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

        if ((0, _isString["default"])(headerTitle)) {
          headerChildren.push(_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 = _createSuper(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 = [_react["default"].createElement(HasKeyComponent, {
            key: "renderFn"
          })];
        }

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

      return _react["default"].createElement("div", (0, _extends2["default"])({
        className: classString,
        style: style
      }, restProps), 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
          }, 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 (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 (0, _react.cloneElement)(child, gruopProps);
        }

        return null;
      }));
    }
  }]);
  return Steps;
}(_react.Component);

exports["default"] = Steps;
(0, _defineProperty2["default"])(Steps, "propTypes", {
  prefixCls: _propTypes["default"].string,
  className: _propTypes["default"].string,
  iconPrefix: _propTypes["default"].string,
  direction: _propTypes["default"].string,
  labelPlacement: _propTypes["default"].string,
  children: _propTypes["default"].any,
  status: _propTypes["default"].string,
  size: _propTypes["default"].string,
  progressDot: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].func]),
  style: _propTypes["default"].object,
  current: _propTypes["default"].number,
  getNumberChange: _propTypes["default"].func,
  setNumberChange: _propTypes["default"].func,
  headerRender: _propTypes["default"].func,
  headerIcon: _propTypes["default"].string,
  headerText: _propTypes["default"].string
});
(0, _defineProperty2["default"])(Steps, "defaultProps", {
  prefixCls: 'rc-steps',
  iconPrefix: 'rc',
  direction: 'horizontal',
  labelPlacement: 'horizontal',
  current: 0,
  status: 'process',
  size: '',
  progressDot: false
});
//# sourceMappingURL=StepGroup.js.map