/
index.tsx
128 lines (121 loc) · 3.78 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
"use client";
import * as React from "react";
import cx from "clsx";
import { useWidth } 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";
import type { Props } from "./types";
const ItinerarySegmentStop = ({
date,
time,
cancelledDate,
cancelledCity,
cancelledStation,
cancelledTime,
city,
icon,
station,
hidden,
hiddenCityText = "Hidden city",
minWidth = 70,
type,
}: Props) => {
const { calculatedWidth, setWidths } = useWidth();
const { last, isBanner, index } = usePart();
const [dateWidth, setDateWidth] = React.useState<HTMLDivElement | null>(null);
const textType = type === "neutral" ? "primary" : type;
React.useEffect(() => {
setWidths(prev => (dateWidth?.clientWidth ? [...prev, minWidth, dateWidth.clientWidth] : prev));
}, [setWidths, dateWidth, minWidth]);
return (
<div
className={cx(
"px-sm relative box-border flex py-0",
((!last && index !== 0) || (index !== 0 && isBanner)) && "mb-sm",
)}
data-test="SegmentStop"
>
<Stack flex align="center" spacing="small">
<div
className="whitespace-nowrap"
ref={setDateWidth}
data-test="time"
style={{ minWidth: `${calculatedWidth}px` }}
>
<Stack flex direction="column" spacing="none" align="end">
{time && (
<ItineraryText
weight="medium"
as="div"
type={cancelledTime ? textType : "primary"}
withBackground={!!cancelledTime}
>
{time}
</ItineraryText>
)}
{date && (
<ItineraryText
type={cancelledDate ? textType : "secondary"}
size="small"
align="end"
as="div"
withBackground={!!cancelledDate}
>
{date}
</ItineraryText>
)}
{cancelledTime && (
<ItineraryText type="secondary" weight="medium" strikeThrough as="div">
{cancelledTime}
</ItineraryText>
)}
{cancelledDate && (
<ItineraryText type="secondary" size="small" align="end" strikeThrough as="div">
{cancelledDate}
</ItineraryText>
)}
</Stack>
</div>
<ItineraryIcon type={type}>{icon}</ItineraryIcon>
<Stack direction="column" shrink spacing="none">
{hidden && hiddenCityText && (
<p className="font-base text-small text-orange-normal m-0 font-bold">
{hiddenCityText}
</p>
)}
<ItineraryText
as="div"
weight="medium"
withBackground={!!cancelledCity}
type={cancelledCity ? textType : "primary"}
>
{city}
</ItineraryText>
<ItineraryText
as="div"
size="small"
type={cancelledStation ? textType : "secondary"}
withBackground={!!cancelledStation}
>
{station}
</ItineraryText>
{cancelledCity && (
<ItineraryText weight="medium" strikeThrough as="div">
{cancelledCity}
</ItineraryText>
)}
{cancelledStation && (
<ItineraryText type="secondary" size="small" strikeThrough as="div">
{cancelledStation}
</ItineraryText>
)}
</Stack>
</Stack>
</div>
);
};
export default ItinerarySegmentStop;