@crave/farmblocks-stepper/lib/components/Stepper.js

A React Component for displaying step to step actions

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import * as React from "react";
import PropTypes from "prop-types";
import statusTypes from "../constants/statusTypes";
import Container from "../styledComponents/Stepper";
import Step from "./Step";
export default class Stepper extends React.Component {
  constructor(...args) {
    super(...args);

    _defineProperty(this, "getStatus", (currentIndex, lastCompletedIndex) => {
      if (lastCompletedIndex >= currentIndex) {
        return statusTypes.COMPLETED;
      }

      if (lastCompletedIndex + 1 === currentIndex) {
        return statusTypes.CURRENT;
      }

      return statusTypes.PENDING;
    });

    _defineProperty(this, "onClick", (status, index, value) => {
      const isCurrentStep = status === statusTypes.CURRENT;

      if (!isCurrentStep) {
        return;
      }

      this.props.onClick({
        index,
        value
      });
    });
  }

  render() {
    const steps = this.props.steps.map((value, index) => {
      const status = this.getStatus(index, this.props.completedSteps - 1);
      return /*#__PURE__*/React.createElement(Container, {
        className: "stepContainer",
        key: value
      }, /*#__PURE__*/React.createElement(Step, {
        className: `step ${status.toLowerCase()}`,
        status: status,
        onClick: () => this.onClick(status, index, value)
      }, value));
    });
    return /*#__PURE__*/React.createElement("div", {
      className: this.props.className
    }, steps);
  }

}
Stepper.propTypes = {
  steps: PropTypes.arrayOf(PropTypes.string),
  completedSteps: PropTypes.number,
  onClick: PropTypes.func.isRequired,
  className: PropTypes.string
};
Stepper.defaultProps = {
  steps: [],
  completedSteps: 0
};