@kiwicom/orbit-components/es/deprecated/TripSegment/index.js

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

import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

import * as React from "react";
import styled, { css } from "styled-components";
import defaultTheme from "../../defaultTheme";
import CarrierLogo, { StyledCarrierLogo } from "../../CarrierLogo";
import Airplane from "../../icons/Airplane";
import ShowMore from "../../icons/ShowMore";
import ShowLess from "../../icons/ShowLess";
import Bus from "../../icons/Bus";
import Train from "../../icons/Train";
import Text, { StyledText } from "../../Text";
import { CARRIER_TYPE_OPTIONS } from "../../CarrierLogo/consts";
import { getSize } from "../../Icon";
import { ICON_SIZES } from "../../Icon/consts";
import { right, rtlSpacing } from "../../utils/rtl";
import KEY_CODE_MAP from "../../common/keyMaps";
import Slide from "../../utils/Slide";
import Truncate from "../../Truncate";
import randomID from "../../utils/randomID";
export var StyledTripSegmentMilestone = styled.div.withConfig({
  displayName: "TripSegment__StyledTripSegmentMilestone",
  componentId: "sc-7w8m24-0"
})(["display:flex;height:50px;width:", ";align-items:center;justify-content:space-between;flex:0 0 auto;cursor:pointer;z-index:1;> svg{z-index:1;height:", ";background:", ";transition:color ", " ease-in-out;}"], getSize(ICON_SIZES.MEDIUM), getSize(ICON_SIZES.MEDIUM), function (_ref) {
  var theme = _ref.theme;
  return theme.orbit.paletteWhite;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.orbit.durationFast;
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledTripSegmentMilestone.defaultProps = {
  theme: defaultTheme
};
var StyledTripSegmentMilestoneArrow = styled.div.withConfig({
  displayName: "TripSegment__StyledTripSegmentMilestoneArrow",
  componentId: "sc-7w8m24-1"
})(["position:relative;width:6px;height:12px;", ":-1px;z-index:1;transform:", ";&:before,&:after{position:absolute;content:\" \";width:0;height:0;border-style:solid;transition:border-color ", " ease-in-out;}&:before{border-width:6px 6px 6px 0;border-color:transparent ", " transparent transparent;}&:after{border-color:transparent ", " transparent transparent;border-width:4px 4px 4px 0;border-color:transparent ", " transparent transparent;margin:", ";right:0;}"], right, function (_ref3) {
  var theme = _ref3.theme;
  return theme.rtl && "rotate(180deg)";
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.orbit.durationFast;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.orbit.paletteCloudNormal;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.orbit.paletteWhite;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.orbit.paletteWhite;
}, rtlSpacing("2px 0 0 0")); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledTripSegmentMilestoneArrow.defaultProps = {
  theme: defaultTheme
};
var StyledTripSegmentContent = styled.div.withConfig({
  displayName: "TripSegment__StyledTripSegmentContent",
  componentId: "sc-7w8m24-2"
})(["display:flex;flex-direction:row;flex-wrap:wrap;width:100%;background:", ";border-radius:", ";border:", ";transition:border-color ", " ease-in-out;"], function (_ref8) {
  var theme = _ref8.theme;
  return theme.orbit.paletteWhite;
}, function (_ref9) {
  var theme = _ref9.theme;
  return theme.orbit.borderRadiusNormal;
}, function (_ref10) {
  var theme = _ref10.theme;
  return "".concat(theme.orbit.borderWidthCard, " ").concat(theme.orbit.borderStyleCard, " ").concat(theme.orbit.paletteCloudNormal);
}, function (_ref11) {
  var theme = _ref11.theme;
  return theme.orbit.durationFast;
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledTripSegmentContent.defaultProps = {
  theme: defaultTheme
};
var StyledChevrons = styled.div.withConfig({
  displayName: "TripSegment__StyledChevrons",
  componentId: "sc-7w8m24-3"
})(["display:flex;background-color:", ";flex-direction:column;> svg{transition:color ", " ease-in-out;}"], function (_ref12) {
  var theme = _ref12.theme;
  return theme.orbit.paletteWhite;
}, function (_ref13) {
  var theme = _ref13.theme;
  return theme.orbit.durationFast;
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledChevrons.defaultProps = {
  theme: defaultTheme
};

var Chevrons = function Chevrons(_ref14) {
  var expanded = _ref14.expanded;
  return /*#__PURE__*/React.createElement(StyledChevrons, null, expanded ? /*#__PURE__*/React.createElement(ShowLess, {
    size: "small",
    color: "secondary"
  }) : /*#__PURE__*/React.createElement(ShowMore, {
    size: "small",
    color: "secondary"
  }));
};

var StyledTripSegmentOverview = styled.div.withConfig({
  displayName: "TripSegment__StyledTripSegmentOverview",
  componentId: "sc-7w8m24-4"
})(["display:flex;flex:0 1 auto;width:calc(100% - 96px);min-width:0;", "{line-height:1.2;}"], StyledText); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledTripSegmentOverview.defaultProps = {
  theme: defaultTheme
};
var StyledTripSegmentCarrier = styled.div.withConfig({
  displayName: "TripSegment__StyledTripSegmentCarrier",
  componentId: "sc-7w8m24-5"
})(["display:flex;align-items:center;position:absolute;", ":", ";top:0;height:100%;"], right, function (_ref15) {
  var theme = _ref15.theme;
  return "-".concat(theme.orbit.spaceXSmall);
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledTripSegmentCarrier.defaultProps = {
  theme: defaultTheme
};
var StyledTripSegmentOverviewWrapper = styled.div.withConfig({
  displayName: "TripSegment__StyledTripSegmentOverviewWrapper",
  componentId: "sc-7w8m24-6"
})(["display:flex;width:100%;justify-content:space-between;align-items:center;padding:", ";cursor:pointer;position:relative;", "{margin:", ";}"], function (_ref16) {
  var theme = _ref16.theme;
  return theme.orbit.spaceXSmall;
}, StyledCarrierLogo, function (_ref17) {
  var theme = _ref17.theme;
  return rtlSpacing("0 ".concat(theme.orbit.spaceXXSmall, " 0\n      ").concat(theme.orbit.spaceXSmall));
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledTripSegmentOverviewWrapper.defaultProps = {
  theme: defaultTheme
};
var StyledTripSegmentOverviewColumn = styled.div.withConfig({
  displayName: "TripSegment__StyledTripSegmentOverviewColumn",
  componentId: "sc-7w8m24-7"
})(["display:flex;flex-direction:column;", ";"], function (_ref18) {
  var grow = _ref18.grow;
  return grow && css(["min-width:0;flex:1;"]);
});
var StyledTripSegmentOverviewTime = styled.div.withConfig({
  displayName: "TripSegment__StyledTripSegmentOverviewTime",
  componentId: "sc-7w8m24-8"
})(["padding:", ";"], function (_ref19) {
  var theme = _ref19.theme;
  return rtlSpacing("0 ".concat(theme.orbit.spaceSmall, " 0 0"));
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledTripSegmentOverviewTime.defaultProps = {
  theme: defaultTheme
};
var StyledTripSegmentChildren = styled.div.withConfig({
  displayName: "TripSegment__StyledTripSegmentChildren",
  componentId: "sc-7w8m24-9"
})(["padding:", ";margin:", ";border-top:", ";transition:padding ", " linear,border-top ", " linear;"], function (_ref20) {
  var theme = _ref20.theme,
      expanded = _ref20.expanded;
  return expanded ? "".concat(theme.orbit.spaceXSmall, " 0") : "0";
}, function (_ref21) {
  var theme = _ref21.theme;
  return "0 ".concat(theme.orbit.spaceXSmall);
}, function (_ref22) {
  var theme = _ref22.theme,
      expanded = _ref22.expanded;
  return expanded ? "1px solid ".concat(theme.orbit.paletteCloudNormal) : "0px solid ".concat(theme.orbit.paletteCloudNormal);
}, function (_ref23) {
  var theme = _ref23.theme;
  return theme.orbit.durationFast;
}, function (_ref24) {
  var theme = _ref24.theme;
  return theme.orbit.durationFast;
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledTripSegmentChildren.defaultProps = {
  theme: defaultTheme
};
export var StyledTripSegment = styled.div.withConfig({
  displayName: "TripSegment__StyledTripSegment",
  componentId: "sc-7w8m24-10"
})(["display:flex;width:100%;&:focus{outline:0;", "{border-color:", ";}", ",", "{svg{color:", ";}}", "{&:before{border-color:transparent ", " transparent transparent;}}}&:hover{", "{border-color:", ";}", ",", "{svg{color:", ";}}", "{&:before{border-color:transparent ", " transparent transparent;}}}"], StyledTripSegmentContent, function (_ref25) {
  var theme = _ref25.theme;
  return theme.orbit.borderColorInputFocus;
}, StyledTripSegmentMilestone, StyledChevrons, function (_ref26) {
  var theme = _ref26.theme;
  return theme.orbit.colorIconPrimary;
}, StyledTripSegmentMilestoneArrow, function (_ref27) {
  var theme = _ref27.theme;
  return theme.orbit.borderColorInputFocus;
}, StyledTripSegmentContent, function (_ref28) {
  var theme = _ref28.theme;
  return theme.orbit.paletteCloudNormalHover;
}, StyledTripSegmentMilestone, StyledChevrons, function (_ref29) {
  var theme = _ref29.theme;
  return theme.orbit.colorIconPrimary;
}, StyledTripSegmentMilestoneArrow, function (_ref30) {
  var theme = _ref30.theme;
  return theme.orbit.paletteCloudNormalHover;
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledTripSegment.defaultProps = {
  theme: defaultTheme
};

var MilestoneIcon = function MilestoneIcon(_ref31) {
  var type = _ref31.type;

  switch (type) {
    case "airline":
      return /*#__PURE__*/React.createElement(Airplane, {
        size: "small",
        color: "secondary"
      });

    case "train":
      return /*#__PURE__*/React.createElement(Train, {
        size: "small",
        color: "secondary"
      });

    case "bus":
      return /*#__PURE__*/React.createElement(Bus, {
        size: "small",
        color: "secondary"
      });

    default:
      return /*#__PURE__*/React.createElement(Airplane, {
        size: "small",
        color: "secondary"
      });
  }
};

var TripSegment = /*#__PURE__*/function (_React$PureComponent) {
  _inherits(TripSegment, _React$PureComponent);

  var _super = _createSuper(TripSegment);

  function TripSegment(props) {
    var _this;

    _classCallCheck(this, TripSegment);

    _this = _super.call(this, props);

    _defineProperty(_assertThisInitialized(_this), "node", /*#__PURE__*/React.createRef());

    _defineProperty(_assertThisInitialized(_this), "tripSegmentID", randomID("tripSegmentID"));

    _defineProperty(_assertThisInitialized(_this), "setHeight", function () {
      var _this$node$current;

      _this.setState({
        contentHeight: (_this$node$current = _this.node.current) === null || _this$node$current === void 0 ? void 0 : _this$node$current.clientHeight
      });
    });

    _defineProperty(_assertThisInitialized(_this), "handleToggle", function () {
      var onClick = _this.props.onClick;

      _this.setState(function (prevState) {
        return {
          expanded: !prevState.expanded
        };
      });

      if (onClick) {
        onClick();
      }
    });

    _defineProperty(_assertThisInitialized(_this), "handleOnKeyDown", function (ev) {
      if (ev.keyCode === KEY_CODE_MAP.ENTER) {
        _this.handleToggle();
      } else if (ev.keyCode === KEY_CODE_MAP.SPACE) {
        ev.preventDefault();

        _this.handleToggle();
      }
    });

    _this.state = {
      contentHeight: _this.props.initialExpanded ? null : 0,
      expanded: _this.props.initialExpanded || false
    };
    return _this;
  }

  _createClass(TripSegment, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.setHeight();
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      if (this.props.children !== prevProps.children) {
        this.setHeight();
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          children = _this$props.children,
          departure = _this$props.departure,
          departureTime = _this$props.departureTime,
          arrival = _this$props.arrival,
          arrivalTime = _this$props.arrivalTime,
          duration = _this$props.duration,
          carrier = _this$props.carrier,
          dataTest = _this$props.dataTest,
          _this$props$tabIndex = _this$props.tabIndex,
          tabIndex = _this$props$tabIndex === void 0 ? "0" : _this$props$tabIndex;
      var _this$state = this.state,
          expanded = _this$state.expanded,
          contentHeight = _this$state.contentHeight;
      return /*#__PURE__*/React.createElement(StyledTripSegment, {
        dataTest: dataTest,
        tabIndex: tabIndex,
        role: "button",
        "aria-expanded": expanded,
        onKeyDown: this.handleOnKeyDown
      }, /*#__PURE__*/React.createElement(StyledTripSegmentMilestone, {
        onClick: this.handleToggle
      }, /*#__PURE__*/React.createElement(MilestoneIcon, {
        type: carrier.type || CARRIER_TYPE_OPTIONS.AIRLINE
      }), /*#__PURE__*/React.createElement(StyledTripSegmentMilestoneArrow, null)), /*#__PURE__*/React.createElement(StyledTripSegmentContent, null, /*#__PURE__*/React.createElement(StyledTripSegmentOverviewWrapper, {
        onClick: this.handleToggle,
        "aria-controls": this.tripSegmentID
      }, /*#__PURE__*/React.createElement(StyledTripSegmentOverview, null, /*#__PURE__*/React.createElement(StyledTripSegmentOverviewColumn, null, /*#__PURE__*/React.createElement(StyledTripSegmentOverviewTime, null, /*#__PURE__*/React.createElement(Text, {
        as: "div",
        align: "right"
      }, departureTime)), /*#__PURE__*/React.createElement(StyledTripSegmentOverviewTime, null, /*#__PURE__*/React.createElement(Text, {
        as: "div",
        align: "right"
      }, arrivalTime))), /*#__PURE__*/React.createElement(StyledTripSegmentOverviewColumn, {
        grow: true
      }, /*#__PURE__*/React.createElement(Text, {
        as: "div",
        type: "primary"
      }, /*#__PURE__*/React.createElement(Truncate, null, departure)), /*#__PURE__*/React.createElement(Text, {
        as: "div",
        type: "primary"
      }, /*#__PURE__*/React.createElement(Truncate, null, arrival)))), /*#__PURE__*/React.createElement(StyledTripSegmentCarrier, null, /*#__PURE__*/React.createElement(Text, {
        as: "div",
        type: "secondary",
        size: "small"
      }, duration), /*#__PURE__*/React.createElement(CarrierLogo, {
        size: "medium",
        carriers: [carrier]
      }), /*#__PURE__*/React.createElement(Chevrons, {
        expanded: expanded
      }))), /*#__PURE__*/React.createElement(Slide, {
        maxHeight: contentHeight,
        expanded: expanded,
        id: this.tripSegmentID
      }, /*#__PURE__*/React.createElement(StyledTripSegmentChildren, {
        expanded: expanded
      }, /*#__PURE__*/React.createElement("div", {
        ref: this.node
      }, children)))));
    }
  }]);

  return TripSegment;
}(React.PureComponent);

export default TripSegment;