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

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

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _styled5 from "styled-components";
import _styled4 from "styled-components";
import _styled3 from "styled-components";
import _styled2 from "styled-components";
import _styled from "styled-components";
import * as React from "react";
import { css } from "styled-components";
import WizardStep from "./WizardStep";
import { WizardStepContext } from "./WizardContext";
import Button from "../Button";
import ButtonLink from "../ButtonLink";
import Stack from "../Stack";
import ChevronDown from "../icons/ChevronDown";
import Portal from "../Portal";
import Modal from "../Modal";
import { CardSection } from "../Card";
import useMediaQuery from "../hooks/useMediaQuery";
import useTheme from "../hooks/useTheme";
import useTranslate from "../hooks/useTranslate";
var unstyledList = css(["list-style-type:none;margin:0;padding:0;"]);

var _StyledDiv = _styled("div").withConfig({
  displayName: "Wizard___StyledDiv",
  componentId: "sc-9hn60i-0"
})(["button{border-radius:0;}"]);

var _StyledSpan = _styled("span").withConfig({
  displayName: "Wizard___StyledSpan",
  componentId: "sc-9hn60i-1"
})(["font-weight:normal;"]);

var _StyledNav = _styled("nav").withConfig({
  displayName: "Wizard___StyledNav",
  componentId: "sc-9hn60i-2"
})(["padding-top:9px;"]);

var _StyledUl = _styled("ul").withConfig({
  displayName: "Wizard___StyledUl",
  componentId: "sc-9hn60i-3"
})(["", ";> * + *{border-top:1px solid ", ";}"], unstyledList, function (p) {
  return p._css;
});

var _StyledUl2 = _styled("ul").withConfig({
  displayName: "Wizard___StyledUl2",
  componentId: "sc-9hn60i-4"
})(["", ";display:flex;li{flex:1 1 0%;}"], unstyledList);

var Wizard = function Wizard(_ref) {
  var _childrenArray$find;

  var dataTest = _ref.dataTest,
      _ref$lockScrolling = _ref.lockScrolling,
      lockScrolling = _ref$lockScrolling === void 0 ? true : _ref$lockScrolling,
      id = _ref.id,
      completedSteps = _ref.completedSteps,
      activeStep = _ref.activeStep,
      children = _ref.children,
      onChangeStep = _ref.onChangeStep;

  var _useMediaQuery = useMediaQuery(),
      isLargeMobile = _useMediaQuery.isLargeMobile;

  var theme = useTheme();

  var _React$useState = React.useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      open = _React$useState2[0],
      setOpen = _React$useState2[1];

  var toggle = React.useRef(null);
  var translate = useTranslate();
  var isCompact = !isLargeMobile;
  var childrenArray = React.Children.toArray(children);
  var stepStatuses = childrenArray.map(function (step, index) {
    if (index < completedSteps) return "completed";
    if (index === completedSteps) return "available";
    return "disabled";
  }); // $FlowFixMe: not sure why "props" evaluates to "mixed"

  var activeStepTitle = (_childrenArray$find = childrenArray.find(function (step, index) {
    return index === activeStep;
  })) === null || _childrenArray$find === void 0 ? void 0 : _childrenArray$find.props.title;
  var stepsCount = React.Children.count(children);
  var steps = React.Children.map(children, function (step, index) {
    return /*#__PURE__*/React.createElement(WizardStepContext.Provider, {
      value: {
        index: index,
        status: stepStatuses[index],
        nextStepStatus: stepStatuses[index + 1],
        isCompact: isCompact,
        isActive: activeStep === index,
        onChangeStep: onChangeStep
      }
    }, step);
  });

  if (isCompact) {
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_StyledDiv, null, /*#__PURE__*/React.createElement(ButtonLink, {
      ref: toggle,
      dataTest: dataTest,
      ariaControls: id,
      ariaExpanded: open,
      type: "secondary",
      fullWidth: true,
      iconRight: /*#__PURE__*/React.createElement(ChevronDown, null),
      onClick: function onClick() {
        setOpen(true);
      }
    }, /*#__PURE__*/React.createElement(Stack, {
      as: "span",
      inline: true
    }, /*#__PURE__*/React.createElement("b", null, translate("wizard_progress", {
      number: activeStep + 1,
      total: stepsCount
    })), " ", /*#__PURE__*/React.createElement(_StyledSpan, null, activeStepTitle)))), /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", {
      id: id
    }, open && /*#__PURE__*/React.createElement(Modal, {
      hasCloseButton: false,
      lockScrolling: lockScrolling,
      onClose: function onClose() {
        setOpen(false);
      }
    }, /*#__PURE__*/React.createElement(_StyledNav, null, /*#__PURE__*/React.createElement(_StyledUl, {
      _css: theme.orbit.paletteCloudDark
    }, steps, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(CardSection, null, /*#__PURE__*/React.createElement(Button, {
      type: "secondary",
      fullWidth: true,
      onClick: function onClick() {
        setOpen(false);
      }
    }, translate("button_close"))))))))));
  }

  return /*#__PURE__*/React.createElement("nav", null, /*#__PURE__*/React.createElement(_StyledUl2, null, steps));
};

export default Wizard;
export { WizardStep };