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

React components that implement Google's Material Design.

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";

/**
 * @ignore - do not document.
 */
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
import Button from '../Button';
import MobileStepper from '../MobileStepper';
import Paper from '../Paper';
import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
import { withLocale } from '../LocaleProvider';

const styles = theme => ({
  root: {
    overflowX: 'hidden',
    width: '100%',
    height: '100%',
    position: 'relative'
  },
  mobileStepper: {}
});

var _ref = React.createElement(KeyboardArrowLeft, null);

var _ref2 = React.createElement(KeyboardArrowRight, null);

var _ref3 = React.createElement(KeyboardArrowLeft, null);

var _ref4 = React.createElement(KeyboardArrowRight, null);

var _ref5 = React.createElement("span", null);

var _ref6 = React.createElement(KeyboardArrowRight, null);

var _ref7 = React.createElement(KeyboardArrowLeft, null);

class StepperPane extends React.Component {
  constructor(props) {
    super(props);

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

    this.handleNext = () => {
      const {
        activeStep
      } = this.state;
      this.setState({
        activeStep: activeStep + 1,
        direction: 'next'
      });
    };

    this.handleBack = () => {
      const {
        activeStep
      } = this.state;
      this.setState({
        activeStep: activeStep - 1,
        direction: 'prev'
      });
    };

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

  render() {
    const {
      activeStep,
      allowToNext,
      direction
    } = this.state;

    const _this$props = this.props,
          {
      alternativeLabel,
      children,
      classes,
      className: classNameProp,
      theme,
      unmountAfterBack,
      finishButton,
      next,
      back,
      finish
    } = _this$props,
          other = _objectWithoutPropertiesLoose(_this$props, ["alternativeLabel", "children", "classes", "className", "theme", "unmountAfterBack", "finishButton", "next", "back", "finish"]);

    const className = classNames(classes.root, classNameProp);
    const childrenArray = React.Children.toArray(children);
    const steps = childrenArray.map((step, index) => {
      const controlProps = {
        index,
        active: false,
        completed: false,
        disabled: false,
        last: index + 1 === childrenArray.length,
        alternativeLabel,
        direction,
        unmountAfterBack,
        allowToNext: this.allowToNext.bind(this)
      };

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

      return [React.cloneElement(step, _extends({}, controlProps, step.props))];
    });
    return React.createElement(Paper, _extends({
      square: true,
      elevation: 0,
      className: className
    }, other), steps, React.createElement(MobileStepper, {
      variant: "text",
      steps: steps.length,
      position: "static",
      activeStep: this.state.activeStep,
      className: classes.mobileStepper,
      nextButton: this.state.activeStep === steps.length - 1 ? finishButton || React.createElement(Button, {
        size: "small",
        disabled: this.state.allowToNext,
        onClick: this.props.finish
      }, finish, theme.direction === 'rtl' ? _ref : _ref2) : React.createElement(Button, {
        size: "small",
        onClick: this.handleNext,
        disabled: this.state.allowToNext
      }, next, theme.direction === 'rtl' ? _ref3 : _ref4),
      backButton: this.state.activeStep === 0 ? _ref5 : React.createElement(Button, {
        size: "small",
        onClick: this.handleBack
      }, theme.direction === 'rtl' ? _ref6 : _ref7, back)
    }));
  }

}

process.env.NODE_ENV !== "production" ? StepperPane.propTypes = {
  /**
   * Set the active step (zero based index).
   */
  activeStep: PropTypes.number,

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

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

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

  /**
   * @ignore
   */
  className: PropTypes.string,
  finish: PropTypes.func,
  finishButton: PropTypes.node,
  unmountAfterBack: PropTypes.bool
} : void 0;
StepperPane.defaultProps = {
  activeStep: 0,
  alternativeLabel: false
};
export default withStyles(styles, {
  withTheme: true,
  name: 'RMStepperPane'
})(withLocale({
  name: 'StepperPane'
})(StepperPane));