@kiwicom/orbit-components/lib/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.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

Object.defineProperty(exports, "__esModule", {
  value: 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 _Text = _interopRequireDefault(require("../../../Text"));

var _ItineraryIcon = _interopRequireDefault(require("../ItineraryIcon"));

const StyledWrapper = _styledComponents.default.div.withConfig({
  displayName: "ItinerarySegmentStop__StyledWrapper",
  componentId: "sc-1tvxqr7-0"
})(["", ""], ({
  theme,
  $hidden
}) => (0, _styledComponents.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.default
};

const StyledDate = _styledComponents.default.div.withConfig({
  displayName: "ItinerarySegmentStop__StyledDate",
  componentId: "sc-1tvxqr7-1"
})(["", ""], ({
  minWidth
}) => (0, _styledComponents.css)(["min-width:", "px;"], minWidth));

const ItinerarySegmentStop = ({
  date,
  icon,
  time,
  city,
  station,
  hidden,
  canceled,
  minWidth = 60,
  type
}) => {
  const {
    calculatedWidth,
    setWidths
  } = (0, _context.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.default, {
    flex: true,
    align: "center",
    spacing: "small"
  }, /*#__PURE__*/React.createElement(StyledDate, {
    minWidth: calculatedWidth || minWidth,
    ref: dateRef
  }, /*#__PURE__*/React.createElement(_Stack.default, {
    flex: true,
    direction: "column",
    spacing: "XXXSmall",
    align: "end"
  }, /*#__PURE__*/React.createElement(_Text.default, {
    strikeThrough: canceled,
    weight: "medium",
    type: canceled ? "critical" : "primary"
  }, time), /*#__PURE__*/React.createElement(_Text.default, {
    type: "secondary",
    size: "small",
    align: "right"
  }, date))), /*#__PURE__*/React.createElement(_ItineraryIcon.default, {
    type: type
  }, icon), /*#__PURE__*/React.createElement(_Stack.default, {
    spacing: "XXXSmall"
  }, /*#__PURE__*/React.createElement(_Text.default, {
    weight: "medium"
  }, city), /*#__PURE__*/React.createElement(_Text.default, {
    type: "secondary",
    size: "small"
  }, station))));
};

var _default = ItinerarySegmentStop;
exports.default = _default;