@pubsweet/ui/dist/molecules/Steps.js

React component library for use in pubsweet apps

"use strict";

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

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

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

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _uiToolkit = require("@pubsweet/ui-toolkit");

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

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _templateObject6() {
  var data = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin: ", ";\n  min-width: 500px;\n\n  ", ";\n"]);

  _templateObject6 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteral(["\n  font-size: 0.9em;\n  position: absolute;\n  text-align: center;\n  top: 25px;\n  white-space: normal;\n  width: 120px;\n  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n    left: -50px;\n  }\n\n  ", ";\n"]);

  _templateObject5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteral(["\n  align-items: center;\n  color: #fff;\n  display: flex;\n  font-size: 12px;\n  height: 18px;\n  justify-content: center;\n  width: 18px;\n\n  ", ";\n"]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n  background-color: #000;\n  border-radius: 50%;\n  height: 10px;\n  width: 10px;\n\n  ", ";\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  align-items: center;\n  border: 2px solid #000;\n  border-radius: 50%;\n  display: flex;\n  height: 16px;\n  justify-content: center;\n  position: relative;\n  width: 16px;\n\n  ", ";\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  background-color: #000;\n  flex: 1;\n  height: 2px;\n\n  ", ";\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var Separator = _styledComponents["default"].div(_templateObject(), (0, _uiToolkit.override)('ui.Steps.Separator'));

var StyledStep = _styledComponents["default"].div(_templateObject2(), (0, _uiToolkit.override)('ui.Steps.Step'));

var Bullet = _styledComponents["default"].div(_templateObject3(), (0, _uiToolkit.override)('ui.Steps.Bullet'));

var Success = (0, _styledComponents["default"])(Bullet)(_templateObject4(), (0, _uiToolkit.override)('ui.Steps.Success'));

var StepTitle = _styledComponents["default"].span(_templateObject5(), (0, _uiToolkit.override)('ui.Steps.StepTitle'));

var Root = _styledComponents["default"].div(_templateObject6(), function (_ref) {
  var margin = _ref.margin;
  return margin;
}, (0, _uiToolkit.override)('ui.Steps'));

var Step = function Step(_ref2) {
  var title = _ref2.title,
      index = _ref2.index,
      currentStep = _ref2.currentStep;
  return /*#__PURE__*/_react["default"].createElement(StyledStep, {
    isCurrent: index === currentStep,
    isPast: index < currentStep
  }, index === currentStep && /*#__PURE__*/_react["default"].createElement(Bullet, null), index < currentStep && /*#__PURE__*/_react["default"].createElement(Success, null), title && /*#__PURE__*/_react["default"].createElement(StepTitle, {
    isCurrent: index === currentStep,
    isPast: index < currentStep
  }, title));
};

var Steps = function Steps(_ref3) {
  var children = _ref3.children,
      className = _ref3.className,
      _ref3$renderSeparator = _ref3.renderSeparator,
      renderSeparator = _ref3$renderSeparator === void 0 ? Separator : _ref3$renderSeparator,
      currentStep = _ref3.currentStep,
      _ref3$margin = _ref3.margin,
      margin = _ref3$margin === void 0 ? '20px' : _ref3$margin;
  return /*#__PURE__*/_react["default"].createElement(Root, {
    className: className,
    margin: margin
  }, _react["default"].Children.toArray(children).reduce(function (acc, el, index, arr) {
    return index === arr.length - 1 ? [].concat(_toConsumableArray(acc), [/*#__PURE__*/_react["default"].cloneElement(el, {
      index: index,
      currentStep: currentStep
    })]) : [].concat(_toConsumableArray(acc), [/*#__PURE__*/_react["default"].cloneElement(el, {
      index: index,
      currentStep: currentStep
    }), /*#__PURE__*/_react["default"].createElement(renderSeparator, {
      key: "sep-".concat(el.key),
      isCurrent: index === currentStep,
      isPast: index < currentStep
    })]);
  }, []));
};

Steps.Step = Step;
Steps.Separator = Separator;
Steps.propTypes = {
  /** The current step of the wizard. */
  currentStep: _propTypes["default"].number.isRequired,

  /** Separator component to be rendered between two adjacent children. */
  renderSeparator: _propTypes["default"].func,

  /** Margin of the root container. */
  margin: _propTypes["default"].string
};
var _default = Steps;
exports["default"] = _default;