@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 _styled3 from "styled-components";
import _styled2 from "styled-components";
import _styled from "styled-components";
import * as React from "react";
import styled, { 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 useTranslate from "../hooks/useTranslate";
import defaultTheme from "../defaultTheme";
import mq from "../utils/mediaQuery";
const unstyledListMixin = css(["list-style-type:none;margin:0;padding:0;"]);
const StyledList = styled.ul.withConfig({
  displayName: "Wizard__StyledList",
  componentId: "sc-ao87p0-0"
})(["", ""], ({
  $direction
}) => css(["display:flex;", ";", ""], unstyledListMixin, mq.largeMobile(css(["flex-direction:", ";li{flex:1 1 0%;}"], $direction)))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledList.defaultProps = {
  theme: defaultTheme
};

const Wizard = ({
  dataTest,
  lockScrolling = true,
  direction,
  id,
  completedSteps,
  activeStep,
  children,
  onChangeStep
}) => {
  var _childrenArray$find;

  const {
    isLargeMobile
  } = useMediaQuery();
  const [open, setOpen] = React.useState(false);
  const toggle = React.useRef(null);
  const translate = useTranslate();
  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";
  }); // $FlowFixMe: not sure why "props" evaluates to "mixed"

  const activeStepTitle = (_childrenArray$find = childrenArray.find((step, index) => index === activeStep)) === null || _childrenArray$find === void 0 ? void 0 : _childrenArray$find.props.title;
  const stepsCount = React.Children.count(children);
  const steps = React.Children.map(children, (step, index) => /*#__PURE__*/React.createElement(WizardStepContext.Provider, {
    value: {
      index,
      status: stepStatuses[index],
      isLastStep: index === stepsCount - 1,
      isColumnOnDesktop: direction === "column",
      nextStepStatus: stepStatuses[index + 1],
      isCompact,
      isActive: activeStep === index,
      onChangeStep,
      onClose: () => setOpen(false)
    }
  }, step));

  if (isCompact) {
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
      ref: toggle,
      dataTest: dataTest,
      ariaControls: id,
      ariaExpanded: open,
      type: "secondary",
      fullWidth: true,
      iconRight: /*#__PURE__*/React.createElement(ChevronDown, null),
      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: () => {
        setOpen(false);
      }
    }, /*#__PURE__*/React.createElement(_StyledNav, null, /*#__PURE__*/React.createElement(_StyledUl, null, steps, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(CardSection, null, /*#__PURE__*/React.createElement(Button, {
      type: "secondary",
      fullWidth: true,
      onClick: () => {
        setOpen(false);
      }
    }, translate("button_close"))))))))));
  }

  return /*#__PURE__*/React.createElement("nav", null, /*#__PURE__*/React.createElement(StyledList, {
    $direction: direction
  }, steps));
};

export default Wizard;
export { WizardStep };

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

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

var _StyledUl = styled("ul").withConfig({
  displayName: "Wizard___StyledUl",
  componentId: "sc-ao87p0-3"
})(["", ";"], unstyledListMixin);