@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.
139 lines (138 loc) • 6.21 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 _HorizontalScroll = _interopRequireDefault(require("../../../HorizontalScroll"));
var _ChevronUp = _interopRequireDefault(require("../../../icons/ChevronUp"));
var _ChevronDown = _interopRequireDefault(require("../../../icons/ChevronDown"));
var _Stack = _interopRequireDefault(require("../../../Stack"));
var _ItineraryText = _interopRequireDefault(require("../../ItineraryText"));
var _Text = _interopRequireDefault(require("../../../Text"));
var _Slide = _interopRequireDefault(require("../../../utils/Slide"));
var _useBoundingRect = _interopRequireDefault(require("../../../hooks/useBoundingRect"));
var _useRandomId = require("../../../hooks/useRandomId");
var _context = require("../context");
var _context2 = require("../../context");
var _AirplaneDown = _interopRequireDefault(require("../../../icons/AirplaneDown"));
var _ItineraryIcon = _interopRequireDefault(require("../ItineraryIcon"));
var _useTheme = _interopRequireDefault(require("../../../hooks/useTheme"));
var _tailwind = require("../../../common/tailwind");
const ItinerarySegmentDetail = ({
duration,
summary,
content,
icon = /*#__PURE__*/React.createElement(_AirplaneDown.default, {
size: "small",
ariaHidden: true
})
}) => {
const {
opened
} = (0, _context.usePart)();
const {
itinerarySegmentMinimalColumnWidth
} = (0, _context2.useItinerarySegmentMinimalColumnWidth)();
const theme = (0, _useTheme.default)();
const [{
height: slideHeight
}, slideRef] = (0, _useBoundingRect.default)({
height: opened ? null : 0
});
const randomId = (0, _useRandomId.useRandomIdSeed)();
return /*#__PURE__*/React.createElement("div", {
className: "orbit-itinerary-segment-detail relative box-border w-full px-0 py-[10px]"
}, /*#__PURE__*/React.createElement("div", {
className: "px-300 py-0"
}, /*#__PURE__*/React.createElement(_Stack.default, {
align: "center",
spacing: "300"
}, /*#__PURE__*/React.createElement("div", {
className: "flex justify-end",
style: {
minWidth: `${itinerarySegmentMinimalColumnWidth || 60}px`
}
}, /*#__PURE__*/React.createElement(_ItineraryText.default, {
as: "div",
size: "small",
weight: "medium"
}, duration)), /*#__PURE__*/React.createElement("div", {
className: "z-default bg-transparent"
}, /*#__PURE__*/React.createElement(_ItineraryIcon.default, null, icon)), /*#__PURE__*/React.createElement("div", {
className: "flex w-full items-center overflow-hidden"
}, /*#__PURE__*/React.createElement(_HorizontalScroll.default, {
overflowElevation: true,
elevationColor: "paletteWhite",
scrollSnap: "mandatory"
}, summary)), content && (opened ? /*#__PURE__*/React.createElement(_ChevronUp.default, {
color: "secondary",
ariaHidden: true
}) : /*#__PURE__*/React.createElement(_ChevronDown.default, {
color: "secondary",
ariaHidden: true
})))), content && /*#__PURE__*/React.createElement(_Slide.default, {
maxHeight: slideHeight || 0,
expanded: opened,
id: randomId("slide"),
ariaLabelledBy: randomId("slide"),
stopClickPropagation: false
}, /*#__PURE__*/React.createElement("div", {
className: "pt-300 cursor-pointer overflow-hidden",
ref: slideRef
}, /*#__PURE__*/React.createElement("div", {
className: "px-300 z-default relative py-0",
style: {
insetInlineStart: `${parseInt(theme.orbit.space200, 10) + itinerarySegmentMinimalColumnWidth}px`
}
}, content.map(({
title,
items
}, idx) => {
return /*#__PURE__*/React.createElement(React.Fragment, {
key: typeof title === "string" ? title : idx
}, /*#__PURE__*/React.createElement("div", {
className: "ms-800"
}, /*#__PURE__*/React.createElement(_ItineraryText.default, {
as: "div",
size: "small",
weight: "medium",
spaceAfter: "small"
}, title)), /*#__PURE__*/React.createElement("div", {
className: (0, _clsx.default)("flex flex-col items-center", idx === content.length - 1 ? _tailwind.spaceAfterClasses.none : _tailwind.spaceAfterClasses.medium),
style: {
width: `calc(100% - ${parseInt(theme.orbit.space200, 10) + itinerarySegmentMinimalColumnWidth}px)`
}
}, items.map(({
icon: itemIcon,
name,
value
}, id) => {
const isFirst = id === 0;
const isLast = id === items.length - 1;
const key = typeof name === "string" && typeof value === "string" ? `${name}-${value}` : id;
return /*#__PURE__*/React.createElement(_Stack.default, {
flex: true,
grow: false,
align: "center",
key: key
}, /*#__PURE__*/React.createElement("div", {
className: (0, _clsx.default)("px-100 relative z-[3] box-border flex items-center self-stretch", "after:-z-default after:bg-white-normal after:border-x-cloud-normal-active after:absolute after:left-0 after:box-border after:size-full after:border-x after:border-solid", isFirst || isLast ? "py-0" : "py-100", isFirst && "[&_svg]:mt-200 [&_svg]:mb-100 after:border-t-cloud-normal-active after:rounded-b-none after:rounded-t-full after:border after:border-b-0", isLast && "[&_svg]:mt-100 [&_svg]:mb-200 after:border-b-cloud-normal-active after:rounded-b-full after:rounded-t-none after:border after:border-t-0")
}, itemIcon), /*#__PURE__*/React.createElement("div", {
className: "flex-1 text-wrap break-words"
}, /*#__PURE__*/React.createElement(_Text.default, {
size: "small"
}, name)), /*#__PURE__*/React.createElement("div", {
className: "grow-0 text-wrap break-all"
}, /*#__PURE__*/React.createElement(_ItineraryText.default, {
as: "div",
size: "small",
weight: "medium",
align: "end"
}, value)));
})));
})))));
};
var _default = exports.default = ItinerarySegmentDetail;