@6thquake/react-material/Stepper/StepperPane.js

React components that implement Google's Material Design.

"use strict";

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

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

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

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

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

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

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

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

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

var _withStyles = _interopRequireDefault(require("../styles/withStyles"));

var _Button = _interopRequireDefault(require("../Button"));

var _MobileStepper = _interopRequireDefault(require("../MobileStepper"));

var _Paper = _interopRequireDefault(require("../Paper"));

var _KeyboardArrowLeft = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowLeft"));

var _KeyboardArrowRight = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowRight"));

var _LocaleProvider = require("../LocaleProvider");

/**
 * @ignore - do not document.
 */
var styles = function styles(theme) {
  return {
    root: {
      overflowX: 'hidden',
      width: '100%',
      height: '100%',
      position: 'relative'
    },
    mobileStepper: {}
  };
};

var StepperPane =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(StepperPane, _React$Component);

  function StepperPane(props) {
    var _this;

    (0, _classCallCheck2.default)(this, StepperPane);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(StepperPane).call(this, props));

    _this.allowToNext = function (index, allow) {
      if (_this.state.activeStep === index) {
        _this.setState({
          activeStep: index,
          allowToNext: !!allow
        });
      }
    };

    _this.handleNext = function () {
      var activeStep = _this.state.activeStep;

      _this.setState({
        activeStep: activeStep + 1,
        direction: 'next'
      });
    };

    _this.handleBack = function () {
      var activeStep = _this.state.activeStep;

      _this.setState({
        activeStep: activeStep - 1,
        direction: 'prev'
      });
    };

    _this.state = {
      activeStep: _this.props.activeStep || 0,
      allowToNext: false,
      direction: 'next'
    };
    return _this;
  }

  (0, _createClass2.default)(StepperPane, [{
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$state = this.state,
          activeStep = _this$state.activeStep,
          allowToNext = _this$state.allowToNext,
          direction = _this$state.direction;
      var _this$props = this.props,
          alternativeLabel = _this$props.alternativeLabel,
          children = _this$props.children,
          classes = _this$props.classes,
          classNameProp = _this$props.className,
          theme = _this$props.theme,
          unmountAfterBack = _this$props.unmountAfterBack,
          finishButton = _this$props.finishButton,
          next = _this$props.next,
          back = _this$props.back,
          finish = _this$props.finish,
          other = (0, _objectWithoutProperties2.default)(_this$props, ["alternativeLabel", "children", "classes", "className", "theme", "unmountAfterBack", "finishButton", "next", "back", "finish"]);
      var className = (0, _classnames.default)(classes.root, classNameProp);

      var childrenArray = _react.default.Children.toArray(children);

      var steps = childrenArray.map(function (step, index) {
        var controlProps = {
          index: index,
          active: false,
          completed: false,
          disabled: false,
          last: index + 1 === childrenArray.length,
          alternativeLabel: alternativeLabel,
          direction: direction,
          unmountAfterBack: unmountAfterBack,
          allowToNext: _this2.allowToNext.bind(_this2)
        };

        if (activeStep === index) {
          controlProps.active = true;
        } else if (activeStep > index) {
          controlProps.completed = true;
        } else if (activeStep < index) {
          controlProps.disabled = true;
        }

        return [_react.default.cloneElement(step, (0, _extends2.default)({}, controlProps, step.props))];
      });
      return _react.default.createElement(_Paper.default, (0, _extends2.default)({
        square: true,
        elevation: 0,
        className: className
      }, other), steps, _react.default.createElement(_MobileStepper.default, {
        variant: "text",
        steps: steps.length,
        position: "static",
        activeStep: this.state.activeStep,
        className: classes.mobileStepper,
        nextButton: this.state.activeStep === steps.length - 1 ? finishButton || _react.default.createElement(_Button.default, {
          size: "small",
          disabled: this.state.allowToNext,
          onClick: this.props.finish
        }, finish, theme.direction === 'rtl' ? _react.default.createElement(_KeyboardArrowLeft.default, null) : _react.default.createElement(_KeyboardArrowRight.default, null)) : _react.default.createElement(_Button.default, {
          size: "small",
          onClick: this.handleNext,
          disabled: this.state.allowToNext
        }, next, theme.direction === 'rtl' ? _react.default.createElement(_KeyboardArrowLeft.default, null) : _react.default.createElement(_KeyboardArrowRight.default, null)),
        backButton: this.state.activeStep === 0 ? _react.default.createElement("span", null) : _react.default.createElement(_Button.default, {
          size: "small",
          onClick: this.handleBack
        }, theme.direction === 'rtl' ? _react.default.createElement(_KeyboardArrowRight.default, null) : _react.default.createElement(_KeyboardArrowLeft.default, null), back)
      }));
    }
  }]);
  return StepperPane;
}(_react.default.Component);

StepperPane.propTypes = {
  /**
   * Set the active step (zero based index).
   */
  activeStep: _propTypes.default.number,

  /**
   * If set to 'true' and orientation is horizontal,
   * then the step label will be positioned under the icon.
   */
  alternativeLabel: _propTypes.default.bool,

  /**
   * Two or more `<Step />` components.
   */
  children: _propTypes.default.node.isRequired,

  /**
   * Useful to extend the style applied to components.
   */
  classes: _propTypes.default.object.isRequired,

  /**
   * @ignore
   */
  className: _propTypes.default.string,
  finish: _propTypes.default.func,
  finishButton: _propTypes.default.node,
  unmountAfterBack: _propTypes.default.bool
};
StepperPane.defaultProps = {
  activeStep: 0,
  alternativeLabel: false
};

var _default = (0, _withStyles.default)(styles, {
  withTheme: true,
  name: 'RMStepperPane'
})((0, _LocaleProvider.withLocale)({
  name: 'StepperPane'
})(StepperPane));

exports.default = _default;