@kiwicom/orbit-components/lib/TripSegment/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";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.StyledTripSegment = exports.StyledTripSegmentMilestone = void 0;

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

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

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

var _CarrierLogo = _interopRequireWildcard(require("../CarrierLogo"));

var _Airplane = _interopRequireDefault(require("../icons/Airplane"));

var _ShowMore = _interopRequireDefault(require("../icons/ShowMore"));

var _ShowLess = _interopRequireDefault(require("../icons/ShowLess"));

var _Bus = _interopRequireDefault(require("../icons/Bus"));

var _Train = _interopRequireDefault(require("../icons/Train"));

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

var _consts = require("../CarrierLogo/consts");

var _Icon = require("../Icon");

var _consts2 = require("../Icon/consts");

var _rtl = require("../utils/rtl");

var _keyMaps = _interopRequireDefault(require("../common/keyMaps"));

var _Slide = _interopRequireDefault(require("../utils/Slide"));

var _Truncate = _interopRequireDefault(require("../Truncate"));

var _randomID = _interopRequireDefault(require("../utils/randomID"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var StyledTripSegmentMilestone = _styledComponents.default.div.withConfig({
  displayName: "TripSegment__StyledTripSegmentMilestone",
  componentId: "sc-1pmcslk-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;}"], (0, _Icon.getSize)(_consts2.ICON_SIZES.MEDIUM), (0, _Icon.getSize)(_consts2.ICON_SIZES.MEDIUM), function (_ref) {
  var theme = _ref.theme;
  return theme.orbit.paletteWhite;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.orbit.durationFast;
});

exports.StyledTripSegmentMilestone = StyledTripSegmentMilestone;
StyledTripSegmentMilestone.defaultProps = {
  theme: _defaultTheme.default
};

var StyledTripSegmentMilestoneArrow = _styledComponents.default.div.withConfig({
  displayName: "TripSegment__StyledTripSegmentMilestoneArrow",
  componentId: "sc-1pmcslk-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;}"], _rtl.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;
}, (0, _rtl.rtlSpacing)("2px 0 0 0"));

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

var StyledTripSegmentContent = _styledComponents.default.div.withConfig({
  displayName: "TripSegment__StyledTripSegmentContent",
  componentId: "sc-1pmcslk-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;
});

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

var StyledChevrons = _styledComponents.default.div.withConfig({
  displayName: "TripSegment__StyledChevrons",
  componentId: "sc-1pmcslk-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;
});

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

var Chevrons = function Chevrons(_ref14) {
  var expanded = _ref14.expanded;
  return React.createElement(StyledChevrons, null, expanded ? React.createElement(_ShowLess.default, {
    size: "small",
    color: "secondary"
  }) : React.createElement(_ShowMore.default, {
    size: "small",
    color: "secondary"
  }));
};

var StyledTripSegmentOverview = _styledComponents.default.div.withConfig({
  displayName: "TripSegment__StyledTripSegmentOverview",
  componentId: "sc-1pmcslk-4"
})(["display:flex;flex:0 1 auto;width:calc(100% - 96px);min-width:0;", "{line-height:1.2;}"], _Text.StyledText);

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

var StyledTripSegmentCarrier = _styledComponents.default.div.withConfig({
  displayName: "TripSegment__StyledTripSegmentCarrier",
  componentId: "sc-1pmcslk-5"
})(["display:flex;align-items:center;position:absolute;", ":", ";top:0;height:100%;"], _rtl.right, function (_ref15) {
  var theme = _ref15.theme;
  return "-".concat(theme.orbit.spaceXSmall);
});

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

var StyledTripSegmentOverviewWrapper = _styledComponents.default.div.withConfig({
  displayName: "TripSegment__StyledTripSegmentOverviewWrapper",
  componentId: "sc-1pmcslk-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;
}, _CarrierLogo.StyledCarrierLogo, function (_ref17) {
  var theme = _ref17.theme;
  return (0, _rtl.rtlSpacing)("0 ".concat(theme.orbit.spaceXXSmall, " 0\n      ").concat(theme.orbit.spaceXSmall));
});

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

var StyledTripSegmentOverviewColumn = _styledComponents.default.div.withConfig({
  displayName: "TripSegment__StyledTripSegmentOverviewColumn",
  componentId: "sc-1pmcslk-7"
})(["display:flex;flex-direction:column;", ";"], function (_ref18) {
  var grow = _ref18.grow;
  return grow && (0, _styledComponents.css)(["min-width:0;flex:1;"]);
});

var StyledTripSegmentOverviewTime = _styledComponents.default.div.withConfig({
  displayName: "TripSegment__StyledTripSegmentOverviewTime",
  componentId: "sc-1pmcslk-8"
})(["padding:", ";"], function (_ref19) {
  var theme = _ref19.theme;
  return (0, _rtl.rtlSpacing)("0 ".concat(theme.orbit.spaceSmall, " 0 0"));
});

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

var StyledTripSegmentChildren = _styledComponents.default.div.withConfig({
  displayName: "TripSegment__StyledTripSegmentChildren",
  componentId: "sc-1pmcslk-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;
});

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

var StyledTripSegment = _styledComponents.default.div.withConfig({
  displayName: "TripSegment__StyledTripSegment",
  componentId: "sc-1pmcslk-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;
});

exports.StyledTripSegment = StyledTripSegment;
StyledTripSegment.defaultProps = {
  theme: _defaultTheme.default
};

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

  switch (type) {
    case "airline":
      return React.createElement(_Airplane.default, {
        size: "small",
        color: "secondary"
      });

    case "train":
      return React.createElement(_Train.default, {
        size: "small",
        color: "secondary"
      });

    case "bus":
      return React.createElement(_Bus.default, {
        size: "small",
        color: "secondary"
      });

    default:
      return React.createElement(_Airplane.default, {
        size: "small",
        color: "secondary"
      });
  }
};

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

  function TripSegment(props) {
    var _this;

    _classCallCheck(this, TripSegment);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(TripSegment).call(this, props));

    _defineProperty(_assertThisInitialized(_this), "node", React.createRef());

    _defineProperty(_assertThisInitialized(_this), "tripSegmentID", (0, _randomID.default)("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 === _keyMaps.default.ENTER) {
        _this.handleToggle();
      } else if (ev.keyCode === _keyMaps.default.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 React.createElement(StyledTripSegment, {
        dataTest: dataTest,
        tabIndex: tabIndex,
        role: "button",
        "aria-expanded": expanded,
        onKeyDown: this.handleOnKeyDown
      }, React.createElement(StyledTripSegmentMilestone, {
        onClick: this.handleToggle
      }, React.createElement(MilestoneIcon, {
        type: carrier.type || _consts.CARRIER_TYPE_OPTIONS.AIRLINE
      }), React.createElement(StyledTripSegmentMilestoneArrow, null)), React.createElement(StyledTripSegmentContent, null, React.createElement(StyledTripSegmentOverviewWrapper, {
        onClick: this.handleToggle,
        "aria-controls": this.tripSegmentID
      }, React.createElement(StyledTripSegmentOverview, null, React.createElement(StyledTripSegmentOverviewColumn, null, React.createElement(StyledTripSegmentOverviewTime, null, React.createElement(_Text.default, {
        element: "div",
        align: "right"
      }, departureTime)), React.createElement(StyledTripSegmentOverviewTime, null, React.createElement(_Text.default, {
        element: "div",
        align: "right"
      }, arrivalTime))), React.createElement(StyledTripSegmentOverviewColumn, {
        grow: true
      }, React.createElement(_Text.default, {
        element: "div",
        type: "primary"
      }, React.createElement(_Truncate.default, null, departure)), React.createElement(_Text.default, {
        element: "div",
        type: "primary"
      }, React.createElement(_Truncate.default, null, arrival)))), React.createElement(StyledTripSegmentCarrier, null, React.createElement(_Text.default, {
        element: "div",
        type: "secondary",
        size: "small"
      }, duration), React.createElement(_CarrierLogo.default, {
        size: "medium",
        carriers: [carrier]
      }), React.createElement(Chevrons, {
        expanded: expanded
      }))), React.createElement(_Slide.default, {
        maxHeight: contentHeight,
        expanded: expanded,
        id: this.tripSegmentID
      }, React.createElement(StyledTripSegmentChildren, {
        expanded: expanded
      }, React.createElement("div", {
        ref: this.node
      }, children)))));
    }
  }]);

  return TripSegment;
}(React.PureComponent);

var _default = TripSegment;
exports.default = _default;