@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";
import Text from "../../../Text";
import ItineraryIcon from "../ItineraryIcon";
const StyledWrapper = styled.div.withConfig({
  displayName: "ItinerarySegmentStop__StyledWrapper",
  componentId: "sc-1tvxqr7-0"
})(["", ""], ({
  theme,
  $hidden
}) => css(["display:flex;position:relative;box-sizing:border-box;opacity:", ";padding:0 ", ";"], $hidden ? `0.8` : `1`, 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 ItinerarySegmentStop = ({
  date,
  icon,
  time,
  city,
  station,
  hidden,
  canceled,
  minWidth = 70,
  type
}) => {
  const {
    calculatedWidth,
    setWidths
  } = useWidth();
  const [dateWidth, setDateWidth] = React.useState(null);
  React.useEffect(() => {
    setWidths(prev => dateWidth !== null && dateWidth !== void 0 && dateWidth.clientWidth ? [...prev, minWidth, dateWidth.clientWidth] : prev);
  }, [setWidths, dateWidth, minWidth]);
  return /*#__PURE__*/React.createElement(StyledWrapper, {
    $hidden: hidden
  }, /*#__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"
  }, /*#__PURE__*/React.createElement(Text, {
    strikeThrough: canceled,
    weight: "medium",
    type: canceled ? "critical" : "primary"
  }, time), /*#__PURE__*/React.createElement(Text, {
    type: "secondary",
    size: "small",
    align: "right"
  }, date))), /*#__PURE__*/React.createElement(ItineraryIcon, {
    type: type
  }, icon), /*#__PURE__*/React.createElement(Stack, {
    spacing: "none"
  }, /*#__PURE__*/React.createElement(Text, {
    weight: "medium"
  }, city), /*#__PURE__*/React.createElement(Text, {
    type: "secondary",
    size: "small"
  }, station))));
};

export default ItinerarySegmentStop;