react-polymorph/lib/skins/simple/StepperSkin.js

React components with highly customizable logic, markup and styles.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StepperSkin = void 0;

var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));

var _map2 = _interopRequireDefault(require("lodash/map"));

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

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

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

// external libraries
var StepperSkin = function StepperSkin(props) {
  var label;
  if (!props.steps) return null;

  if (!props.labelDisabled) {
    var calculatedLabel = props.activeStep && "STEP ".concat(props.activeStep, " OF ").concat(props.steps.length);
    label = props.label ? props.label : calculatedLabel;
  }

  return /*#__PURE__*/_react["default"].createElement("div", {
    role: "presentation",
    "aria-hidden": true,
    className: (0, _classnames["default"])([props.className, props.theme[props.themeId].root])
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: props.theme[props.themeId].wrapper
  }, label && /*#__PURE__*/_react["default"].createElement("div", {
    className: props.theme[props.themeId].label
  }, /*#__PURE__*/_react["default"].createElement("h3", null, label)), /*#__PURE__*/_react["default"].createElement("ul", {
    className: props.theme[props.themeId].stepsWrapper
  }, (0, _map2["default"])(props.steps, function (step, index) {
    var classname;

    if (index + 1 < props.activeStep) {
      classname = 'finished';
    } else if (index + 1 === props.activeStep) {
      classname = 'active';
    } else {
      classname = 'disabled';
    }

    var handleStepClick = function handleStepClick(event) {
      if (props.onStepClick && (0, _isFunction2["default"])(props.onStepClick)) {
        props.onStepClick(step, index, event);
      }
    };

    return /*#__PURE__*/_react["default"].createElement("li", {
      key: index,
      className: props.theme[props.themeId][classname],
      style: {
        width: "".concat(100 / props.steps.length, "%")
      },
      role: "presentation",
      "aria-hidden": true,
      onClick: handleStepClick
    }, step);
  }))));
};

exports.StepperSkin = StepperSkin;
//# sourceMappingURL=StepperSkin.js.map