@kiwicom/orbit-components/es/Itinerary/ItinerarySegment/ItinerarySegmentStop/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

import * as React from "react";
import styled, { css } from "styled-components";
import { useWidth } from "../../context";
import defaultTheme from "../../../defaultTheme";
import Stack from "../../../Stack";
// TODO: remove after designers will resolve status colors
// https://skypicker.slack.com/archives/GSGN9BN6Q/p1674568716519889
import Text from "../../ItineraryTemporaryText";
import ItineraryIcon from "../ItineraryIcon";
import { usePart } from "../context";
const StyledWrapper = styled.div.withConfig({
  displayName: "ItinerarySegmentStop__StyledWrapper",
  componentId: "sc-db4xt6-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));
StyledWrapper.defaultProps = {
  theme: defaultTheme
};
const StyledDate = styled.div.withConfig({
  displayName: "ItinerarySegmentStop__StyledDate",
  componentId: "sc-db4xt6-1"
})(["", ""], ({
  minWidth
}) => css(["white-space:nowrap;min-width:", "px;"], minWidth));
const StyledHiddenCity = styled.p.withConfig({
  displayName: "ItinerarySegmentStop__StyledHiddenCity",
  componentId: "sc-db4xt6-2"
})(["", ";"], ({
  theme
}) => 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
};
const ItinerarySegmentStop = ({
  date,
  time,
  cancelledDate,
  cancelledCity,
  cancelledStation,
  cancelledTime,
  city,
  icon,
  station,
  hidden,
  hiddenCityText = "Hidden city",
  minWidth = 70,
  type
}) => {
  const {
    calculatedWidth,
    setWidths
  } = useWidth();
  const {
    last,
    isBanner,
    index
  } = 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, {
    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",
    as: "div",
    type: cancelledTime ? textType : "primary",
    withBackground: !!cancelledTime
  }, time), date && /*#__PURE__*/React.createElement(Text, {
    type: cancelledDate ? textType : "secondary",
    size: "small",
    align: "right",
    as: "div",
    withBackground: !!cancelledDate
  }, date), cancelledTime && /*#__PURE__*/React.createElement(Text, {
    type: "secondary",
    weight: "medium",
    strikeThrough: true,
    as: "div"
  }, cancelledTime), cancelledDate && /*#__PURE__*/React.createElement(Text, {
    type: "secondary",
    size: "small",
    align: "right",
    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(StyledHiddenCity, null, hiddenCityText), /*#__PURE__*/React.createElement(Text, {
    as: "div",
    weight: "medium",
    withBackground: !!cancelledCity,
    type: cancelledCity ? textType : "primary"
  }, city), /*#__PURE__*/React.createElement(Text, {
    as: "div",
    size: "small",
    type: cancelledStation ? textType : "secondary",
    withBackground: !!cancelledStation
  }, station), cancelledCity && /*#__PURE__*/React.createElement(Text, {
    weight: "medium",
    strikeThrough: true,
    as: "div"
  }, cancelledCity), cancelledStation && /*#__PURE__*/React.createElement(Text, {
    type: "secondary",
    size: "small",
    strikeThrough: true,
    as: "div"
  }, cancelledStation))));
};
export default ItinerarySegmentStop;