@kiwicom/orbit-components/lib/Wizard/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var React = _interopRequireWildcard(require("react"));
var _WizardStep = _interopRequireDefault(require("./WizardStep"));
exports.WizardStep = _WizardStep.default;
var _WizardContext = require("./WizardContext");
var _Button = _interopRequireDefault(require("../Button"));
var _Stack = _interopRequireDefault(require("../Stack"));
var _ChevronDown = _interopRequireDefault(require("../icons/ChevronDown"));
var _Portal = _interopRequireDefault(require("../Portal"));
var _Modal = _interopRequireDefault(require("../Modal"));
var _Card = require("../Card");
var _useMediaQuery = _interopRequireDefault(require("../hooks/useMediaQuery"));
var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));
var _mediaQuery = _interopRequireDefault(require("../utils/mediaQuery"));
const unstyledListMixin = (0, _styledComponents.css)(["list-style-type:none;margin:0;padding:0;"]);

// support column layout on desktop
// https://github.com/kiwicom/orbit/issues/3308
const StyledList = _styledComponents.default.ul.withConfig({
  displayName: "Wizard__StyledList",
  componentId: "sc-1w2zwfw-0"
})(["", ""], ({
  $direction
}) => (0, _styledComponents.css)(["display:flex;", ";", ""], unstyledListMixin, _mediaQuery.default.largeMobile((0, _styledComponents.css)(["flex-direction:", ";li{flex:1 1 0%;}"], $direction))));
StyledList.defaultProps = {
  theme: _defaultTheme.default
};
const Wizard = ({
  dataTest,
  lockScrolling = true,
  direction,
  id,
  labelClose = "Close",
  labelProgress,
  completedSteps,
  activeStep,
  children,
  onChangeStep
}) => {
  const {
    isLargeMobile
  } = (0, _useMediaQuery.default)();
  const [open, setOpen] = React.useState(false);
  const toggle = React.useRef(null);
  const isCompact = !isLargeMobile;
  const childrenArray = React.Children.toArray(children);
  const stepStatuses = childrenArray.map((step, index) => {
    if (index < completedSteps) return "completed";
    if (index === completedSteps) return "available";
    return "disabled";
  });
  const activeStepTitle = childrenArray.find((_, index) => index === activeStep)?.props.title;
  const stepsCount = React.Children.count(children);
  const steps = React.Children.map(children, (step, index) => /*#__PURE__*/React.createElement(_WizardContext.WizardStepContextProvider, {
    index: index,
    status: stepStatuses[index],
    isLastStep: index === stepsCount - 1,
    isColumnOnDesktop: direction === "column",
    nextStepStatus: stepStatuses[index + 1],
    isCompact: isCompact,
    isActive: activeStep === index,
    onChangeStep: onChangeStep,
    onClose: () => setOpen(false)
  }, step));
  if (isCompact) {
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Button.default, {
      ref: toggle,
      dataTest: dataTest,
      ariaControls: id,
      ariaExpanded: open,
      type: "secondary",
      fullWidth: true,
      iconRight: /*#__PURE__*/React.createElement(_ChevronDown.default, null),
      onClick: () => {
        setOpen(true);
      }
    }, /*#__PURE__*/React.createElement(_Stack.default, {
      as: "span",
      inline: true
    }, /*#__PURE__*/React.createElement("b", null, labelProgress), /*#__PURE__*/React.createElement(_StyledSpan, null, activeStepTitle))), /*#__PURE__*/React.createElement(_Portal.default, null, /*#__PURE__*/React.createElement("div", {
      id: id
    }, open && /*#__PURE__*/React.createElement(_Modal.default, {
      hasCloseButton: false,
      lockScrolling: lockScrolling,
      onClose: () => {
        setOpen(false);
      }
    }, /*#__PURE__*/React.createElement(_StyledNav, null, /*#__PURE__*/React.createElement(_StyledUl, null, steps, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(_Card.CardSection, null, /*#__PURE__*/React.createElement(_Button.default, {
      type: "secondary",
      fullWidth: true,
      onClick: () => {
        setOpen(false);
      }
    }, labelClose)))))))));
  }
  return /*#__PURE__*/React.createElement("nav", null, /*#__PURE__*/React.createElement(StyledList, {
    $direction: direction
  }, steps));
};
var _default = Wizard;
exports.default = _default;
var _StyledSpan = (0, _styledComponents.default)("span").withConfig({
  displayName: "Wizard___StyledSpan",
  componentId: "sc-1w2zwfw-1"
})(["font-weight:normal;"]);
var _StyledNav = (0, _styledComponents.default)("nav").withConfig({
  displayName: "Wizard___StyledNav",
  componentId: "sc-1w2zwfw-2"
})(["padding-top:9px;"]);
var _StyledUl = (0, _styledComponents.default)("ul").withConfig({
  displayName: "Wizard___StyledUl",
  componentId: "sc-1w2zwfw-3"
})(["", ";"], unstyledListMixin);