@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;

exports.__esModule = true;
exports.default = void 0;

var React = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _StarFull = _interopRequireDefault(require("../../../icons/StarFull"));

var _CircleSmallEmpty = _interopRequireDefault(require("../../../icons/CircleSmallEmpty"));

var _CircleSmall = _interopRequireDefault(require("../../../icons/CircleSmall"));

var _context = require("../../context");

var _defaultTheme = _interopRequireDefault(require("../../../defaultTheme"));

var _Stack = _interopRequireDefault(require("../../../Stack"));

var _Text = _interopRequireDefault(require("../../../Text"));

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

var _context2 = require("../context");

const StyledWrapper = _styledComponents.default.div.withConfig({
  displayName: "ItinerarySegmentStop__StyledWrapper",
  componentId: "sc-1tvxqr7-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)); // $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)(["white-space:nowrap;min-width:", "px;"], minWidth));

const StyledHiddenCity = _styledComponents.default.p.withConfig({
  displayName: "ItinerarySegmentStop__StyledHiddenCity",
  componentId: "sc-1tvxqr7-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)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


StyledHiddenCity.defaultProps = {
  theme: _defaultTheme.default
};

const ItinerarySegmentStopIcon = ({
  isPrevHidden,
  isLast,
  isHidden,
  icon
}) => {
  if (icon) return icon;
  if (isHidden) return /*#__PURE__*/React.createElement(_StarFull.default, {
    color: "warning",
    size: "small"
  });
  if (isPrevHidden && isLast) return /*#__PURE__*/React.createElement(_CircleSmallEmpty.default, {
    size: "small",
    color: "tertiary"
  });
  return /*#__PURE__*/React.createElement(_CircleSmall.default, {
    size: "small",
    color: "secondary"
  });
};

const ItinerarySegmentStop = ({
  date,
  icon,
  time,
  cancelledDate,
  cancelledCity,
  cancelledStation,
  cancelledTime,
  city,
  station,
  hidden,
  hiddenCityText = "Hidden city",
  minWidth = 70,
  type
}) => {
  const {
    calculatedWidth,
    setWidths
  } = (0, _context.useWidth)();
  const {
    isPrevHidden,
    last,
    isBanner,
    index
  } = (0, _context2.usePart)();
  const [dateWidth, setDateWidth] = React.useState(null);
  const textType = type === "neutral" ? "primary" : type;
  React.useEffect(() => {
    setWidths(prev => dateWidth != null && 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(_Text.default, {
    weight: "medium",
    type: cancelledTime ? textType : "primary",
    withBackground: !!cancelledTime
  }, time), date && /*#__PURE__*/React.createElement(_Text.default, {
    type: cancelledDate ? textType : "secondary",
    size: "small",
    align: "right",
    withBackground: !!cancelledDate
  }, date), cancelledTime && /*#__PURE__*/React.createElement(_Text.default, {
    type: "secondary",
    weight: "medium",
    strikeThrough: true
  }, cancelledTime), cancelledDate && /*#__PURE__*/React.createElement(_Text.default, {
    type: "secondary",
    size: "small",
    align: "right",
    strikeThrough: true
  }, cancelledDate))), /*#__PURE__*/React.createElement(_ItineraryIcon.default, {
    type: type
  }, /*#__PURE__*/React.createElement(ItinerarySegmentStopIcon, {
    isLast: last,
    isHidden: hidden,
    isPrevHidden: isPrevHidden,
    icon: icon
  })), /*#__PURE__*/React.createElement(_Stack.default, {
    spacing: "none"
  }, hidden && hiddenCityText && /*#__PURE__*/React.createElement(StyledHiddenCity, null, hiddenCityText), /*#__PURE__*/React.createElement(_Text.default, {
    weight: "medium",
    withBackground: !!cancelledCity,
    type: cancelledCity ? textType : "primary"
  }, city), /*#__PURE__*/React.createElement(_Text.default, {
    size: "small",
    type: cancelledStation ? textType : "secondary",
    withBackground: !!cancelledStation
  }, station), cancelledCity && /*#__PURE__*/React.createElement(_Text.default, {
    weight: "medium",
    strikeThrough: true
  }, cancelledCity), cancelledStation && /*#__PURE__*/React.createElement(_Text.default, {
    type: "secondary",
    size: "small",
    strikeThrough: true
  }, cancelledStation))));
};

var _default = ItinerarySegmentStop;
exports.default = _default;