@helpscout/hsds-react/components/Stepper/Stepper.js

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.default = exports.Stepper = void 0;

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

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

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

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

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

var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));

var _lodash = _interopRequireDefault(require("lodash.isnil"));

var _Stepper = _interopRequireDefault(require("./Stepper.Step"));

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

var _component = require("../../utilities/component");

var _Stepper2 = require("./Stepper.css");

var _jsxRuntime = require("react/jsx-runtime");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function noop() {}

var Stepper = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inheritsLoose2.default)(Stepper, _React$PureComponent);

  function Stepper() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;

    _this.handleOnStepClick = function (event, index) {
      var step = _this.props.steps[index];

      _this.props.onStepClick(step, event);
    };

    return _this;
  }

  var _proto = Stepper.prototype;

  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    if (prevProps.currentIndex !== this.props.currentIndex) {
      this.handleChangeCallback();
    }
  };

  _proto.handleChangeCallback = function handleChangeCallback() {
    var _this$props = this.props,
        onChange = _this$props.onChange,
        onComplete = _this$props.onComplete,
        steps = _this$props.steps;
    var currentIndex = this.getMatchIndex();
    var step = this.getCurrentStep();

    if (step) {
      onChange(step);
    }

    if (currentIndex === steps.length - 1) {
      onComplete();
    }
  };

  _proto.getClassName = function getClassName() {
    var className = this.props.className;
    return (0, _classnames.default)(Stepper.className, className);
  };

  _proto.getProgress = function getProgress() {
    var matchIndex = this.getMatchIndex();
    var progress = matchIndex >= 0 ? matchIndex : 0;
    return progress + 1;
  };

  _proto.getMatchIndex = function getMatchIndex() {
    var currentIndex = this.props.currentIndex;
    var matchIndex = !(0, _lodash.default)(currentIndex) ? currentIndex : -1;
    return matchIndex;
  };

  _proto.getCurrentTitle = function getCurrentTitle() {
    var step = this.getCurrentStep();
    return step ? step.title : '';
  };

  _proto.getCurrentStep = function getCurrentStep() {
    var _this$props2 = this.props,
        currentIndex = _this$props2.currentIndex,
        steps = _this$props2.steps;
    return !(0, _lodash.default)(currentIndex) && steps[currentIndex];
  };

  _proto.renderSteps = function renderSteps() {
    var _this2 = this;

    var _this$props3 = this.props,
        isClickable = _this$props3.isClickable,
        steps = _this$props3.steps;
    var matchIndex = this.getMatchIndex();
    return steps.map(function (step, index) {
      return /*#__PURE__*/(0, _react.createElement)(_Stepper.default, (0, _extends2.default)({}, step, {
        key: (0, _component.getComponentKey)(step, index),
        isClickable: isClickable,
        isActive: index <= matchIndex,
        index: index,
        onClick: _this2.handleOnStepClick
      }));
    });
  };

  _proto.render = function render() {
    var _this$props4 = this.props,
        children = _this$props4.children,
        innerRef = _this$props4.innerRef,
        steps = _this$props4.steps,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props4, ["children", "innerRef", "steps"]);
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Stepper2.StepperUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      className: this.getClassName(),
      ref: innerRef,
      "aria-valuemax": steps.length,
      "aria-valuemin": 1,
      "aria-valuenow": this.getProgress(),
      "aria-valuetext": this.getCurrentTitle(),
      role: "progressbar",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Stepper2.StepWrapperUI, {
        className: "c-StepperStepWrapper",
        children: this.renderSteps()
      })
    }));
  };

  return Stepper;
}(_react.default.PureComponent);

exports.Stepper = Stepper;
Stepper.className = 'c-Stepper';
Stepper.Step = _Stepper.default;
Stepper.defaultProps = {
  currentIndex: 0,
  'data-cy': 'Stepper',
  innerRef: noop,
  isClickable: false,
  onChange: noop,
  onComplete: noop,
  onStepClick: noop,
  steps: []
};
Stepper.propTypes = {
  /** The className of the component. */
  className: _propTypes.default.string,

  /** The current step. */
  currentIndex: _propTypes.default.any,

  /** Enables clicking for the steps. */
  isClickable: _propTypes.default.bool,

  /** Callback when a step completes. */
  onChange: _propTypes.default.func,

  /** Callback when all steps are completed. */
  onComplete: _propTypes.default.func,

  /** Callback when a step is clicked. Enabled by `isClickable`. */
  onStepClick: _propTypes.default.func,

  /** Collection of steps. */
  steps: _propTypes.default.arrayOf(_propTypes.default.shape({
    title: _propTypes.default.string,
    id: _propTypes.default.string
  })),
  innerRef: _propTypes.default.func,

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string
};
var _default = Stepper;
exports.default = _default;