@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.
140 lines (139 loc) • 5.28 kB
JavaScript
"use strict";
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 _styledComponents = _interopRequireWildcard(require("styled-components"));
var _context = require("../../context");
var _defaultTheme = _interopRequireDefault(require("../../../defaultTheme"));
var _Stack = _interopRequireDefault(require("../../../Stack"));
var _ItineraryTemporaryText = _interopRequireDefault(require("../../ItineraryTemporaryText"));
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 StyledWrapper = _styledComponents.default.div.withConfig({
displayName: "ItinerarySegmentStop__StyledWrapper",
componentId: "sc-db4xt6-0"
})(["", ""], ({
theme,
isLast,
isFirst,
isBanner
}) => (0, _styledComponents.css)(["display:flex;position:relative;box-sizing:border-box;padding:0 ", ";margin-bottom:", ";"], theme.orbit.spaceSmall, (!isLast && !isFirst || !isFirst && isBanner) && theme.orbit.spaceSmall));
StyledWrapper.defaultProps = {
theme: _defaultTheme.default
};
const StyledDate = _styledComponents.default.div.withConfig({
displayName: "ItinerarySegmentStop__StyledDate",
componentId: "sc-db4xt6-1"
})(["", ""], ({
minWidth
}) => (0, _styledComponents.css)(["white-space:nowrap;min-width:", "px;"], minWidth));
const StyledHiddenCity = _styledComponents.default.p.withConfig({
displayName: "ItinerarySegmentStop__StyledHiddenCity",
componentId: "sc-db4xt6-2"
})(["", ";"], ({
theme
}) => (0, _styledComponents.css)(["margin:0;font-family:", ";font-weight:", ";font-size:", ";color:", ";"], theme.orbit.fontFamily, theme.orbit.fontWeightBold, theme.orbit.fontSizeTextSmall, theme.orbit.paletteOrangeNormal));
StyledHiddenCity.defaultProps = {
theme: _defaultTheme.default
};
const ItinerarySegmentStop = ({
date,
time,
cancelledDate,
cancelledCity,
cancelledStation,
cancelledTime,
city,
icon,
station,
hidden,
hiddenCityText = "Hidden city",
minWidth = 70,
type
}) => {
const {
calculatedWidth,
setWidths
} = (0, _context.useWidth)();
const {
last,
isBanner,
index
} = (0, _context2.usePart)();
const [dateWidth, setDateWidth] = React.useState(null);
const textType = type === "neutral" ? "primary" : type;
React.useEffect(() => {
setWidths(prev => 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.default, {
flex: true,
align: "center",
spacing: "small"
}, /*#__PURE__*/React.createElement(StyledDate, {
minWidth: calculatedWidth,
ref: setDateWidth,
"data-test": "time"
}, /*#__PURE__*/React.createElement(_Stack.default, {
flex: true,
direction: "column",
spacing: "none",
align: "end"
}, time && /*#__PURE__*/React.createElement(_ItineraryTemporaryText.default, {
weight: "medium",
as: "div",
type: cancelledTime ? textType : "primary",
withBackground: !!cancelledTime
}, time), date && /*#__PURE__*/React.createElement(_ItineraryTemporaryText.default, {
type: cancelledDate ? textType : "secondary",
size: "small",
align: "right",
as: "div",
withBackground: !!cancelledDate
}, date), cancelledTime && /*#__PURE__*/React.createElement(_ItineraryTemporaryText.default, {
type: "secondary",
weight: "medium",
strikeThrough: true,
as: "div"
}, cancelledTime), cancelledDate && /*#__PURE__*/React.createElement(_ItineraryTemporaryText.default, {
type: "secondary",
size: "small",
align: "right",
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(StyledHiddenCity, null, hiddenCityText), /*#__PURE__*/React.createElement(_ItineraryTemporaryText.default, {
as: "div",
weight: "medium",
withBackground: !!cancelledCity,
type: cancelledCity ? textType : "primary"
}, city), /*#__PURE__*/React.createElement(_ItineraryTemporaryText.default, {
as: "div",
size: "small",
type: cancelledStation ? textType : "secondary",
withBackground: !!cancelledStation
}, station), cancelledCity && /*#__PURE__*/React.createElement(_ItineraryTemporaryText.default, {
weight: "medium",
strikeThrough: true,
as: "div"
}, cancelledCity), cancelledStation && /*#__PURE__*/React.createElement(_ItineraryTemporaryText.default, {
type: "secondary",
size: "small",
strikeThrough: true,
as: "div"
}, cancelledStation))));
};
var _default = ItinerarySegmentStop;
exports.default = _default;