@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.
155 lines (150 loc) • 5.08 kB
JavaScript
import * as React from "react";
import styled, { css } from "styled-components";
import StarFull from "../../../icons/StarFull";
import CircleEmpty from "../../../icons/CircleSmallEmpty";
import Circle from "../../../icons/CircleSmall";
import { useWidth } from "../../context";
import defaultTheme from "../../../defaultTheme";
import Stack from "../../../Stack";
import Text from "../../../Text";
import ItineraryIcon from "../ItineraryIcon";
import { usePart } from "../context";
const StyledWrapper = styled.div.withConfig({
displayName: "ItinerarySegmentStop__StyledWrapper",
componentId: "sc-1tvxqr7-0"
})(["", ""], ({
theme,
isLast,
isFirst,
isBanner
}) => css(["display:flex;position:relative;box-sizing:border-box;padding:0 ", ";margin-bottom:", ";"], theme.orbit.spaceSmall, (!isLast && !isFirst || !isFirst && isBanner) && theme.orbit.spaceSmall)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
StyledWrapper.defaultProps = {
theme: defaultTheme
};
const StyledDate = styled.div.withConfig({
displayName: "ItinerarySegmentStop__StyledDate",
componentId: "sc-1tvxqr7-1"
})(["", ""], ({
minWidth
}) => css(["white-space:nowrap;min-width:", "px;"], minWidth));
const StyledHiddenCity = styled.p.withConfig({
displayName: "ItinerarySegmentStop__StyledHiddenCity",
componentId: "sc-1tvxqr7-2"
})(["", ";"], ({
theme
}) => css(["margin:0;font-family:", ";font-weight:", ";font-size:", ";color:", ";"], theme.orbit.fontFamily, theme.orbit.fontWeightBold, theme.orbit.fontSizeTextSmall, theme.orbit.paletteOrangeNormal)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
StyledHiddenCity.defaultProps = {
theme: defaultTheme
};
const ItinerarySegmentStopIcon = ({
isPrevHidden,
isLast,
isHidden,
icon
}) => {
if (icon) return icon;
if (isHidden) return /*#__PURE__*/React.createElement(StarFull, {
color: "warning",
size: "small"
});
if (isPrevHidden && isLast) return /*#__PURE__*/React.createElement(CircleEmpty, {
size: "small",
color: "tertiary"
});
return /*#__PURE__*/React.createElement(Circle, {
size: "small",
color: "secondary"
});
};
const ItinerarySegmentStop = ({
date,
icon,
time,
cancelledDate,
cancelledCity,
cancelledStation,
cancelledTime,
city,
station,
hidden,
hiddenCityText = "Hidden city",
minWidth = 70,
type
}) => {
const {
calculatedWidth,
setWidths
} = useWidth();
const {
isPrevHidden,
last,
isBanner,
index
} = usePart();
const [dateWidth, setDateWidth] = React.useState(null);
const textType = type === "neutral" ? "primary" : type;
React.useEffect(() => {
setWidths(prev => dateWidth != null && dateWidth.clientWidth ? [...prev, minWidth, dateWidth.clientWidth] : prev);
}, [setWidths, dateWidth, minWidth]);
return /*#__PURE__*/React.createElement(StyledWrapper, {
isLast: last,
isFirst: index === 0,
isBanner: isBanner
}, /*#__PURE__*/React.createElement(Stack, {
flex: true,
align: "center",
spacing: "small"
}, /*#__PURE__*/React.createElement(StyledDate, {
minWidth: calculatedWidth,
ref: setDateWidth,
"data-test": "time"
}, /*#__PURE__*/React.createElement(Stack, {
flex: true,
direction: "column",
spacing: "none",
align: "end"
}, time && /*#__PURE__*/React.createElement(Text, {
weight: "medium",
type: cancelledTime ? textType : "primary",
withBackground: !!cancelledTime
}, time), date && /*#__PURE__*/React.createElement(Text, {
type: cancelledDate ? textType : "secondary",
size: "small",
align: "right",
withBackground: !!cancelledDate
}, date), cancelledTime && /*#__PURE__*/React.createElement(Text, {
type: "secondary",
weight: "medium",
strikeThrough: true
}, cancelledTime), cancelledDate && /*#__PURE__*/React.createElement(Text, {
type: "secondary",
size: "small",
align: "right",
strikeThrough: true
}, cancelledDate))), /*#__PURE__*/React.createElement(ItineraryIcon, {
type: type
}, /*#__PURE__*/React.createElement(ItinerarySegmentStopIcon, {
isLast: last,
isHidden: hidden,
isPrevHidden: isPrevHidden,
icon: icon
})), /*#__PURE__*/React.createElement(Stack, {
spacing: "none"
}, hidden && hiddenCityText && /*#__PURE__*/React.createElement(StyledHiddenCity, null, hiddenCityText), /*#__PURE__*/React.createElement(Text, {
weight: "medium",
withBackground: !!cancelledCity,
type: cancelledCity ? textType : "primary"
}, city), /*#__PURE__*/React.createElement(Text, {
size: "small",
type: cancelledStation ? textType : "secondary",
withBackground: !!cancelledStation
}, station), cancelledCity && /*#__PURE__*/React.createElement(Text, {
weight: "medium",
strikeThrough: true
}, cancelledCity), cancelledStation && /*#__PURE__*/React.createElement(Text, {
type: "secondary",
size: "small",
strikeThrough: true
}, cancelledStation))));
};
export default ItinerarySegmentStop;