@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.
104 lines (103 loc) • 4.04 kB
JavaScript
"use strict";
"use client";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
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"));
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, {
ariaHidden: true
}),
onClick: () => {
setOpen(true);
}
}, /*#__PURE__*/React.createElement(_Stack.default, {
as: "span",
inline: true,
align: "center"
}, typeof labelProgress !== "undefined" && /*#__PURE__*/React.createElement("b", {
className: "text-nowrap"
}, labelProgress), /*#__PURE__*/React.createElement("span", {
className: "font-normal"
}, 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("nav", {
className: "orbit-wizard pt-[9px]"
}, /*#__PURE__*/React.createElement("ul", 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", {
className: "orbit-wizard"
}, /*#__PURE__*/React.createElement("ul", {
className: (0, _clsx.default)("flex", direction === "column" ? "flex-col" : "flex-row"),
"data-test": dataTest
}, steps));
};
var _default = exports.default = Wizard;