@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.
83 lines (82 loc) • 2.19 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 _TimelineContext = require("../TimelineContext");
var _useMediaQuery = _interopRequireDefault(require("../../hooks/useMediaQuery"));
var _TimelineStepDesktop = _interopRequireDefault(require("./components/TimelineStepDesktop"));
var _TimelineStepMobile = _interopRequireDefault(require("./components/TimelineStepMobile"));
const getActiveState = ({
active,
last,
type,
nextType
}) => {
if (active == null) return type && !nextType;
if (last && type === "success") return false;
return active;
};
const TimelineStep = ({
children,
label,
subLabel,
type,
active
}) => {
const {
types,
setTypes,
isColumnOnDesktop
} = (0, _TimelineContext.useStatuses)();
const {
index,
last
} = (0, _TimelineContext.useStep)();
const {
isDesktop
} = (0, _useMediaQuery.default)();
const nextType = types[index + 1];
const prevType = types[index - 1];
const isActive = getActiveState({
active,
last,
type,
nextType
});
React.useEffect(() => {
setTypes(prev => ({
...prev,
[index]: type
}));
}, [setTypes, type, index]);
if (isColumnOnDesktop) return /*#__PURE__*/React.createElement(_TimelineStepMobile.default, {
nextType: nextType,
label: label,
active: isActive,
type: type,
subLabel: subLabel,
last: last
}, children);
if (isDesktop) return /*#__PURE__*/React.createElement(_TimelineStepDesktop.default, {
nextType: nextType,
prevType: prevType,
label: label,
last: last,
active: isActive,
type: type,
subLabel: subLabel
}, children);
return /*#__PURE__*/React.createElement(_TimelineStepMobile.default, {
nextType: nextType,
label: label,
type: type,
active: isActive,
subLabel: subLabel,
last: last
}, children);
};
var _default = TimelineStep;
exports.default = _default;