@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.
116 lines (115 loc) • 3.83 kB
JavaScript
"use client";
import * as React from "react";
import cx from "clsx";
import { useItinerarySegmentMinimalColumnWidth } from "../../context";
import Stack from "../../../Stack";
// TODO: remove after designers will resolve status colors
// https://skypicker.slack.com/archives/GSGN9BN6Q/p1674568716519889
import ItineraryText from "../../ItineraryText";
import ItineraryIcon from "../ItineraryIcon";
import { usePart } from "../context";
const ItinerarySegmentStop = ({
date,
time,
cancelledDate,
cancelledCity,
cancelledStation,
cancelledTime,
city,
icon,
station,
hidden,
hiddenCityText = "Hidden city",
minWidth = 70,
type
}) => {
const {
itinerarySegmentMinimalColumnWidth,
setItinerarySegmentMinimalColumnWidth
} = useItinerarySegmentMinimalColumnWidth();
const {
last,
isBanner,
index
} = 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: cx("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, {
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, {
flex: true,
direction: "column",
spacing: "none",
align: "end"
}, time && /*#__PURE__*/React.createElement(ItineraryText, {
weight: "medium",
as: "div",
type: cancelledTime ? textType : "primary",
withBackground: !!cancelledTime
}, time), date && /*#__PURE__*/React.createElement(ItineraryText, {
type: cancelledDate ? textType : "secondary",
size: "small",
align: "end",
as: "div",
withBackground: !!cancelledDate
}, date), cancelledTime && /*#__PURE__*/React.createElement(ItineraryText, {
type: "secondary",
weight: "medium",
strikeThrough: true,
as: "div"
}, cancelledTime), cancelledDate && /*#__PURE__*/React.createElement(ItineraryText, {
type: "secondary",
size: "small",
align: "end",
strikeThrough: true,
as: "div"
}, cancelledDate))), /*#__PURE__*/React.createElement(ItineraryIcon, {
type: type
}, icon), /*#__PURE__*/React.createElement(Stack, {
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, {
as: "div",
weight: "medium",
withBackground: !!cancelledCity,
type: cancelledCity ? textType : "primary"
}, city), /*#__PURE__*/React.createElement(ItineraryText, {
as: "div",
size: "small",
type: cancelledStation ? textType : "secondary",
withBackground: !!cancelledStation
}, station), cancelledCity && /*#__PURE__*/React.createElement(ItineraryText, {
weight: "medium",
strikeThrough: true,
as: "div"
}, cancelledCity), cancelledStation && /*#__PURE__*/React.createElement(ItineraryText, {
type: "secondary",
size: "small",
strikeThrough: true,
as: "div"
}, cancelledStation))));
};
export default ItinerarySegmentStop;