@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
115 lines (114 loc) • 4.24 kB
JavaScript
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 { WizardStepContextProvider } from "./WizardContext";
import Button from "../Button";
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 defaultTheme from "../defaultTheme";
import mq from "../utils/mediaQuery";
const unstyledListMixin = css(["list-style-type:none;margin:0;padding:0;"]);
// support column layout on desktop
// https://github.com/kiwicom/orbit/issues/3308
const StyledList = styled.ul.withConfig({
displayName: "Wizard__StyledList",
componentId: "sc-1w2zwfw-0"
})(["", ""], ({
$direction
}) => css(["display:flex;", ";", ""], unstyledListMixin, mq.largeMobile(css(["flex-direction:", ";li{flex:1 1 0%;}"], $direction))));
StyledList.defaultProps = {
theme: defaultTheme
};
const Wizard = ({
dataTest,
lockScrolling = true,
direction,
id,
labelClose = "Close",
labelProgress,
completedSteps,
activeStep,
children,
onChangeStep
}) => {
const {
isLargeMobile
} = useMediaQuery();
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(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, {
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, labelProgress), /*#__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);
}
}, labelClose)))))))));
}
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-1w2zwfw-1"
})(["font-weight:normal;"]);
var _StyledNav = styled("nav").withConfig({
displayName: "Wizard___StyledNav",
componentId: "sc-1w2zwfw-2"
})(["padding-top:9px;"]);
var _StyledUl = styled("ul").withConfig({
displayName: "Wizard___StyledUl",
componentId: "sc-1w2zwfw-3"
})(["", ";"], unstyledListMixin);