@wix/design-system/dist/cjs/Stepper/Stepper.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Step = _interopRequireDefault(require("./components/Step"));
var _constants = require("./constants");
var _StepperSt = require("./Stepper.st.css.js");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Stepper/Stepper.js";
/** Stepper */
class Stepper extends _react.default.PureComponent {
  constructor() {
    super(...arguments);
    this._getActiveStepType = () => {
      var {
        activeStep,
        steps
      } = this.props;
      var step = steps[activeStep];
      return step.type !== _constants.StepType.Disabled ? step.type : undefined;
    };
  }
  render() {
    var {
      dataHook,
      steps,
      type,
      fit,
      activeStep,
      onClick,
      size
    } = this.props;
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _StepperSt.st)(_StepperSt.classes.root, {
        fit
      }),
      "data-hook": dataHook,
      "data-type": type,
      "data-size": size,
      "data-fit": fit,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 66,
        columnNumber: 7
      }
    }, steps.map((step, index) => {
      var isLastStep = index === steps.length - 1;
      var isActiveStep = index === activeStep;
      return /*#__PURE__*/_react.default.createElement(_Step.default, (0, _extends2.default)({}, step, {
        key: index,
        number: index + 1,
        active: isActiveStep,
        last: isLastStep,
        type: isActiveStep ? this._getActiveStepType() : step.type,
        size: size,
        styleType: type,
        onClick: onClick && (() => onClick(index)),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 78,
          columnNumber: 13
        }
      }));
    }));
  }
}
Stepper.displayName = 'Stepper';
Stepper.propTypes = {
  /** Hook for testing purposes. */
  dataHook: _propTypes.default.string,
  /** Event triggered on step click: `onClick(stepIndex)` */
  onClick: _propTypes.default.func,
  /** Index of the active step. */
  activeStep: _propTypes.default.number.isRequired,
  /**
   * An array of steps, where each step is an object with the following properties:
   * - `text` - step title text (required).
   * - `type` - step type (`completed`, `disabled`, `error` or default `normal`).
   */
  steps: _propTypes.default.arrayOf(_propTypes.default.shape({
    text: _propTypes.default.string.isRequired,
    type: _propTypes.default.oneOf(Object.values(_constants.StepType))
  })).isRequired,
  /** Style type. */
  type: _propTypes.default.oneOf(['circle', 'text']),
  /** Sets the size of the items */
  size: _propTypes.default.oneOf(['medium', 'small']),
  /**
   * Fit mode for steps. In `stretched` mode the component will grow to fill parent
   * container width.
   */
  fit: _propTypes.default.oneOf(['compact', 'stretched'])
};
Stepper.defaultProps = {
  steps: [],
  type: 'circle',
  size: 'small',
  fit: 'compact'
};
var _default = exports.default = Stepper;
//# sourceMappingURL=Stepper.js.map