@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.StyledTripSegmentMilestone = exports.StyledTripSegment = void 0;

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

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

var _defaultTokens = _interopRequireDefault(require("../defaultTokens"));

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");

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 _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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

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 StyledTripSegment = _styledComponents.default.div.withConfig({
  displayName: "TripSegment__StyledTripSegment",
  componentId: "sc-1pmcslk-0"
})(["display:flex;width:100%;"]);

exports.StyledTripSegment = StyledTripSegment;

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

var StyledTripSegmentMilestoneArrow = _styledComponents.default.div.withConfig({
  displayName: "TripSegment__StyledTripSegmentMilestoneArrow",
  componentId: "sc-1pmcslk-2"
})(["position:relative;width:6px;height:12px;right:-1px;z-index:1;&: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:2px 0 0 0;right:0;}"], function (_ref3) {
  var theme = _ref3.theme;
  return theme.orbit.durationFast;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.orbit.paletteCloudNormal;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.orbit.paletteWhite;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.orbit.paletteWhite;
});

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

var StyledTripSegmentContent = _styledComponents.default.div.withConfig({
  displayName: "TripSegment__StyledTripSegmentContent",
  componentId: "sc-1pmcslk-3"
})(["display:flex;flex-direction:row;flex-wrap:wrap;width:100%;background:", ";border-radius:", ";border:", ";transition:border-color ", " ease-in-out;"], function (_ref7) {
  var theme = _ref7.theme;
  return theme.orbit.paletteWhite;
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.orbit.borderRadiusNormal;
}, function (_ref9) {
  var theme = _ref9.theme;
  return "".concat(theme.orbit.borderWidthCard, " ").concat(theme.orbit.borderStyleCard, " ").concat(theme.orbit.paletteCloudNormal);
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.orbit.durationFast;
});

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

var StyledChevrons = _styledComponents.default.div.withConfig({
  displayName: "TripSegment__StyledChevrons",
  componentId: "sc-1pmcslk-4"
})(["display:flex;background-color:", ";flex-direction:column;> svg{transition:color ", " ease-in-out;}"], function (_ref11) {
  var theme = _ref11.theme;
  return theme.orbit.paletteWhite;
}, function (_ref12) {
  var theme = _ref12.theme;
  return theme.orbit.durationFast;
});

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

var Chevrons = function Chevrons(_ref13) {
  var expanded = _ref13.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-5"
})(["display:flex;", "{line-height:1.2;}&:hover{", "{border-color:", ";}", ",", "{svg{color:", ";}}", "{&:before{border-color:transparent ", " transparent transparent;}}}"], _Text.StyledText, StyledTripSegmentContent, function (_ref14) {
  var theme = _ref14.theme;
  return theme.orbit.paletteCloudNormalHover;
}, StyledTripSegmentMilestone, StyledChevrons, function (_ref15) {
  var theme = _ref15.theme;
  return theme.orbit.colorIconPrimary;
}, StyledTripSegmentMilestoneArrow, function (_ref16) {
  var theme = _ref16.theme;
  return theme.orbit.paletteCloudNormalHover;
});

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

var StyledTripSegmentCarrier = _styledComponents.default.div.withConfig({
  displayName: "TripSegment__StyledTripSegmentCarrier",
  componentId: "sc-1pmcslk-6"
})(["display:flex;align-items:center;position:relative;left:", ";"], function (_ref17) {
  var theme = _ref17.theme;
  return theme.orbit.spaceMedium;
});

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

var StyledTripSegmentOverviewWrapper = _styledComponents.default.div.withConfig({
  displayName: "TripSegment__StyledTripSegmentOverviewWrapper",
  componentId: "sc-1pmcslk-7"
})(["display:flex;width:100%;justify-content:space-between;align-items:center;padding:", ";cursor:pointer;", "{padding:", ";}"], function (_ref18) {
  var theme = _ref18.theme;
  return theme.orbit.spaceXSmall;
}, _CarrierLogo.StyledCarrierLogo, function (_ref19) {
  var theme = _ref19.theme;
  return "0 ".concat(theme.orbit.spaceXXSmall, " 0\n      ").concat(theme.orbit.spaceXSmall);
});

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

var StyledTripSegmentOverviewColumn = _styledComponents.default.div.withConfig({
  displayName: "TripSegment__StyledTripSegmentOverviewColumn",
  componentId: "sc-1pmcslk-8"
})(["display:flex;flex-direction:column;"]);

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

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

var StyledTripSegmentChildren = _styledComponents.default.div.withConfig({
  displayName: "TripSegment__StyledTripSegmentChildren",
  componentId: "sc-1pmcslk-10"
})(["width:100%;padding:", ";margin:", ";border-top:", ";max-height:", ";transition:max-height ", " linear,padding ", " linear,border-top ", " linear;overflow:hidden;"], function (_ref21) {
  var theme = _ref21.theme,
      expanded = _ref21.expanded;
  return expanded ? "".concat(theme.orbit.spaceXSmall, " 0") : "0";
}, function (_ref22) {
  var theme = _ref22.theme;
  return "0 ".concat(theme.orbit.spaceXSmall);
}, function (_ref23) {
  var theme = _ref23.theme,
      expanded = _ref23.expanded;
  return expanded ? "1px solid ".concat(theme.orbit.paletteCloudNormal) : "0px solid ".concat(theme.orbit.paletteCloudNormal);
}, function (_ref24) {
  var initialExpanded = _ref24.initialExpanded,
      contentHeight = _ref24.contentHeight,
      expanded = _ref24.expanded;
  return initialExpanded && (expanded ? "".concat(contentHeight, "px") : "0");
}, function (_ref25) {
  var theme = _ref25.theme;
  return theme.orbit.durationFast;
}, function (_ref26) {
  var theme = _ref26.theme;
  return theme.orbit.durationFast;
}, function (_ref27) {
  var theme = _ref27.theme;
  return theme.orbit.durationFast;
});

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

var MilestoneIcon = function MilestoneIcon(_ref28) {
  var type = _ref28.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(_assertThisInitialized(_this)), "handleToggle", function () {
      var onClick = _this.props.onClick;

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

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

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "contentHeight", void 0);

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "node", void 0);

    _this.contentHeight = 0;
    _this.node = React.createRef();
    _this.state = {
      expanded: _this.props.initialExpanded || false,
      initialExpanded: !_this.props.initialExpanded
    };
    return _this;
  }

  _createClass(TripSegment, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;

      setTimeout(function () {
        _this2.setHeight();
      }, 500);
    }
  }, {
    key: "setHeight",
    value: function setHeight() {
      var _this$node;

      this.contentHeight = (_this$node = this.node) === null || _this$node === void 0 ? void 0 : _this$node.current.clientHeight;
    }
  }, {
    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;
      var _this$state = this.state,
          expanded = _this$state.expanded,
          initialExpanded = _this$state.initialExpanded;
      var contentHeight = this.contentHeight;
      return React.createElement(StyledTripSegment, {
        dataTest: dataTest
      }, 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
      }, React.createElement(StyledTripSegmentOverview, null, React.createElement(StyledTripSegmentOverviewColumn, null, React.createElement(StyledTripSegmentOverviewTime, null, React.createElement(_Text.default, {
        type: "attention",
        align: "right"
      }, departureTime)), React.createElement(StyledTripSegmentOverviewTime, null, React.createElement(_Text.default, {
        type: "attention",
        align: "right"
      }, arrivalTime))), React.createElement(StyledTripSegmentOverviewColumn, null, React.createElement(_Text.default, {
        type: "primary"
      }, departure), React.createElement(_Text.default, {
        type: "primary"
      }, arrival))), React.createElement(StyledTripSegmentCarrier, null, React.createElement(_Text.default, {
        type: "secondary",
        size: "small"
      }, duration), React.createElement(_CarrierLogo.default, {
        size: "medium",
        carriers: [carrier]
      }), React.createElement(Chevrons, {
        expanded: expanded
      }))), React.createElement(StyledTripSegmentChildren, {
        expanded: expanded,
        contentHeight: contentHeight,
        initialExpanded: initialExpanded
      }, React.createElement("div", {
        ref: this.node
      }, children))));
    }
  }]);

  return TripSegment;
}(React.PureComponent);

var _default = TripSegment;
exports.default = _default;