@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(["min-width:", "px;"], minWidth));

const ItinerarySegmentStop = ({
  date,
  icon,
  time,
  city,
  station,
  hidden,
  canceled,
  minWidth = 60,
  type
}) => {
  const {
    calculatedWidth,
    setWidths
  } = useWidth();
  const dateRef = React.useRef(null);
  React.useEffect(() => {
    setWidths(prev => dateRef.current ? [...prev, dateRef.current.clientWidth] : prev);
  }, [setWidths]);
  return /*#__PURE__*/React.createElement(StyledWrapper, {
    $hidden: hidden
  }, /*#__PURE__*/React.createElement(Stack, {
    flex: true,
    align: "center",
    spacing: "small"
  }, /*#__PURE__*/React.createElement(StyledDate, {
    minWidth: calculatedWidth || minWidth,
    ref: dateRef
  }, /*#__PURE__*/React.createElement(Stack, {
    flex: true,
    direction: "column",
    spacing: "XXXSmall",
    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: "XXXSmall"
  }, /*#__PURE__*/React.createElement(Text, {
    weight: "medium"
  }, city), /*#__PURE__*/React.createElement(Text, {
    type: "secondary",
    size: "small"
  }, station))));
};

export default ItinerarySegmentStop;