@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.
122 lines (120 loc) • 4.37 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 _context = require("../../context");
var _Stack = _interopRequireDefault(require("../../../Stack"));
var _ItineraryText = _interopRequireDefault(require("../../ItineraryText"));
var _ItineraryIcon = _interopRequireDefault(require("../ItineraryIcon"));
var _context2 = require("../context");
// TODO: remove after designers will resolve status colors
// https://skypicker.slack.com/archives/GSGN9BN6Q/p1674568716519889
const ItinerarySegmentStop = ({
date,
time,
cancelledDate,
cancelledCity,
cancelledStation,
cancelledTime,
city,
icon,
station,
hidden,
hiddenCityText = "Hidden city",
minWidth = 70,
type
}) => {
const {
itinerarySegmentMinimalColumnWidth,
setItinerarySegmentMinimalColumnWidth
} = (0, _context.useItinerarySegmentMinimalColumnWidth)();
const {
last,
isBanner,
index
} = (0, _context2.usePart)();
const [dateWidth, setDateWidth] = React.useState(null);
const textType = type === "neutral" ? "primary" : type;
React.useEffect(() => {
setItinerarySegmentMinimalColumnWidth(minWidth);
}, [setItinerarySegmentMinimalColumnWidth, minWidth]);
React.useEffect(() => {
if (dateWidth?.clientWidth) {
setItinerarySegmentMinimalColumnWidth(dateWidth.clientWidth);
}
}, [setItinerarySegmentMinimalColumnWidth, dateWidth]);
return /*#__PURE__*/React.createElement("div", {
className: (0, _clsx.default)("orbit-itinerary-segment-stop", "px-300 relative box-border flex py-0", (!last && index !== 0 || index !== 0 && isBanner) && "mb-300"),
"data-test": "SegmentStop"
}, /*#__PURE__*/React.createElement(_Stack.default, {
flex: true,
align: "center",
spacing: "300"
}, /*#__PURE__*/React.createElement("div", {
className: "whitespace-nowrap",
ref: setDateWidth,
"data-test": "time",
style: {
minWidth: `${itinerarySegmentMinimalColumnWidth}px`
}
}, /*#__PURE__*/React.createElement(_Stack.default, {
flex: true,
direction: "column",
spacing: "none",
align: "end"
}, time && /*#__PURE__*/React.createElement(_ItineraryText.default, {
weight: "medium",
as: "div",
type: cancelledTime ? textType : "primary",
withBackground: !!cancelledTime
}, time), date && /*#__PURE__*/React.createElement(_ItineraryText.default, {
type: cancelledDate ? textType : "secondary",
size: "small",
align: "end",
as: "div",
withBackground: !!cancelledDate
}, date), cancelledTime && /*#__PURE__*/React.createElement(_ItineraryText.default, {
type: "secondary",
weight: "medium",
strikeThrough: true,
as: "div"
}, cancelledTime), cancelledDate && /*#__PURE__*/React.createElement(_ItineraryText.default, {
type: "secondary",
size: "small",
align: "end",
strikeThrough: true,
as: "div"
}, cancelledDate))), /*#__PURE__*/React.createElement(_ItineraryIcon.default, {
type: type
}, icon), /*#__PURE__*/React.createElement(_Stack.default, {
direction: "column",
shrink: true,
spacing: "none"
}, hidden && hiddenCityText && /*#__PURE__*/React.createElement("p", {
className: "font-base text-small text-orange-normal m-0 font-bold"
}, hiddenCityText), /*#__PURE__*/React.createElement(_ItineraryText.default, {
as: "div",
weight: "medium",
withBackground: !!cancelledCity,
type: cancelledCity ? textType : "primary"
}, city), /*#__PURE__*/React.createElement(_ItineraryText.default, {
as: "div",
size: "small",
type: cancelledStation ? textType : "secondary",
withBackground: !!cancelledStation
}, station), cancelledCity && /*#__PURE__*/React.createElement(_ItineraryText.default, {
weight: "medium",
strikeThrough: true,
as: "div"
}, cancelledCity), cancelledStation && /*#__PURE__*/React.createElement(_ItineraryText.default, {
type: "secondary",
size: "small",
strikeThrough: true,
as: "div"
}, cancelledStation))));
};
var _default = exports.default = ItinerarySegmentStop;