@6thquake/react-material/esm/Stepper/StepPane.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 _react = _interopRequireDefault(require("react"));

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

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

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

var _Slide = _interopRequireDefault(require("../transitions/Slide"));

var styles = function styles(theme) {
  return {
    root: {
      width: '100%'
    },
    show: {
      position: 'relative'
    },
    hide: {
      position: 'absolute',
      top: '0px',
      left: '0px'
    }
  };
};

var negative = function negative(direction) {
  if (direction === 'left') {
    return 'right';
  }

  return 'left';
};

function StepPane(props) {
  var active = props.active,
      alternativeLabel = props.alternativeLabel,
      children = props.children,
      classes = props.classes,
      classNameProp = props.className,
      completed = props.completed,
      disabled = props.disabled,
      direction = props.direction,
      theme = props.theme,
      unmountAfterBack = props.unmountAfterBack,
      other = (0, _objectWithoutProperties2.default)(props, ["active", "alternativeLabel", "children", "classes", "className", "completed", "disabled", "direction", "theme", "unmountAfterBack"]);
  var _mountOnEnter$unmount = {
    mountOnEnter: true,
    unmountOnExit: unmountAfterBack
  },
      mount = (0, _extends2.default)({}, _mountOnEnter$unmount);
  var className = (0, _classnames.default)(classes.root, classNameProp, active ? classes.show : classes.hide);

  var _direction;

  if (direction === 'prev') {
    _direction = theme.direction === 'rtl' ? 'left' : 'right';
  } else {
    _direction = theme.direction === 'rtl' ? 'right' : 'left';
  }

  return _react.default.createElement(_Slide.default, (0, _extends2.default)({
    direction: active ? _direction : negative(_direction),
    in: active
  }, mount), _react.default.createElement("div", (0, _extends2.default)({
    className: className
  }, other), children));
} //


StepPane.propTypes = {
  /**
   * Sets the step as active. Is passed to child components.
   */
  active: _propTypes.default.bool,

  /**
   * @ignore
   * Set internally by Stepper when it's supplied with the alternativeLabel property.
   */
  alternativeLabel: _propTypes.default.bool,

  /**
   * Override or extend the styles applied to the component.
   * See [CSS API](#css-api) below for more details.
   */
  classes: _propTypes.default.object.isRequired,

  /**
   * @ignore
   */
  className: _propTypes.default.string,

  /**
   * Mark the step as completed. Is passed to child components.
   */
  completed: _propTypes.default.bool,

  /**
   * direction
   */
  direction: _propTypes.default.oneOf(['next', 'prev']),

  /**
   * Mark the step as disabled, will also disable the button if
   * `StepButton` is a child of `Step`. Is passed to child components.
   */
  disabled: _propTypes.default.bool,

  /**
   * @ignore
   */
  unmountAfterBack: _propTypes.default.bool
};
StepPane.defaultProps = {
  active: false,
  completed: false,
  disabled: false
};

var _default = (0, _withStyles.default)(styles, {
  withTheme: true,
  name: 'RMStepPane'
})(StepPane);

exports.default = _default;