@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
431 lines (354 loc) • 18.2 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.StyledTripSegment = exports.StyledTripSegmentMilestone = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
var StyledTripSegmentMilestone = _styledComponents.default.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;}"], (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;
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
exports.StyledTripSegmentMilestone = StyledTripSegmentMilestone;
StyledTripSegmentMilestone.defaultProps = {
theme: _defaultTheme.default
};
var StyledTripSegmentMilestoneArrow = _styledComponents.default.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;}"], _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")); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
StyledTripSegmentMilestoneArrow.defaultProps = {
theme: _defaultTheme.default
};
var StyledTripSegmentContent = _styledComponents.default.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.default
};
var StyledChevrons = _styledComponents.default.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.default
};
var Chevrons = function Chevrons(_ref14) {
var expanded = _ref14.expanded;
return /*#__PURE__*/React.createElement(StyledChevrons, null, expanded ? /*#__PURE__*/React.createElement(_ShowLess.default, {
size: "small",
color: "secondary"
}) : /*#__PURE__*/React.createElement(_ShowMore.default, {
size: "small",
color: "secondary"
}));
};
var StyledTripSegmentOverview = _styledComponents.default.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;}"], _Text.StyledText); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
StyledTripSegmentOverview.defaultProps = {
theme: _defaultTheme.default
};
var StyledTripSegmentCarrier = _styledComponents.default.div.withConfig({
displayName: "TripSegment__StyledTripSegmentCarrier",
componentId: "sc-7w8m24-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);
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
StyledTripSegmentCarrier.defaultProps = {
theme: _defaultTheme.default
};
var StyledTripSegmentOverviewWrapper = _styledComponents.default.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;
}, _CarrierLogo.StyledCarrierLogo, function (_ref17) {
var theme = _ref17.theme;
return (0, _rtl.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.default
};
var StyledTripSegmentOverviewColumn = _styledComponents.default.div.withConfig({
displayName: "TripSegment__StyledTripSegmentOverviewColumn",
componentId: "sc-7w8m24-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-7w8m24-8"
})(["padding:", ";"], function (_ref19) {
var theme = _ref19.theme;
return (0, _rtl.rtlSpacing)("0 ".concat(theme.orbit.spaceSmall, " 0 0"));
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
StyledTripSegmentOverviewTime.defaultProps = {
theme: _defaultTheme.default
};
var StyledTripSegmentChildren = _styledComponents.default.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.default
};
var StyledTripSegment = _styledComponents.default.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
exports.StyledTripSegment = StyledTripSegment;
StyledTripSegment.defaultProps = {
theme: _defaultTheme.default
};
var MilestoneIcon = function MilestoneIcon(_ref31) {
var type = _ref31.type;
switch (type) {
case "airline":
return /*#__PURE__*/React.createElement(_Airplane.default, {
size: "small",
color: "secondary"
});
case "train":
return /*#__PURE__*/React.createElement(_Train.default, {
size: "small",
color: "secondary"
});
case "bus":
return /*#__PURE__*/React.createElement(_Bus.default, {
size: "small",
color: "secondary"
});
default:
return /*#__PURE__*/React.createElement(_Airplane.default, {
size: "small",
color: "secondary"
});
}
};
var TripSegment = /*#__PURE__*/function (_React$PureComponent) {
(0, _inherits2.default)(TripSegment, _React$PureComponent);
var _super = _createSuper(TripSegment);
function TripSegment(props) {
var _this;
(0, _classCallCheck2.default)(this, TripSegment);
_this = _super.call(this, props);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "node", /*#__PURE__*/React.createRef());
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "tripSegmentID", (0, _randomID.default)("tripSegmentID"));
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleToggle", function () {
var onClick = _this.props.onClick;
_this.setState(function (prevState) {
return {
expanded: !prevState.expanded
};
});
if (onClick) {
onClick();
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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;
}
(0, _createClass2.default)(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 || _consts.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.default, {
as: "div",
align: "right"
}, departureTime)), /*#__PURE__*/React.createElement(StyledTripSegmentOverviewTime, null, /*#__PURE__*/React.createElement(_Text.default, {
as: "div",
align: "right"
}, arrivalTime))), /*#__PURE__*/React.createElement(StyledTripSegmentOverviewColumn, {
grow: true
}, /*#__PURE__*/React.createElement(_Text.default, {
as: "div",
type: "primary"
}, /*#__PURE__*/React.createElement(_Truncate.default, null, departure)), /*#__PURE__*/React.createElement(_Text.default, {
as: "div",
type: "primary"
}, /*#__PURE__*/React.createElement(_Truncate.default, null, arrival)))), /*#__PURE__*/React.createElement(StyledTripSegmentCarrier, null, /*#__PURE__*/React.createElement(_Text.default, {
as: "div",
type: "secondary",
size: "small"
}, duration), /*#__PURE__*/React.createElement(_CarrierLogo.default, {
size: "medium",
carriers: [carrier]
}), /*#__PURE__*/React.createElement(Chevrons, {
expanded: expanded
}))), /*#__PURE__*/React.createElement(_Slide.default, {
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);
var _default = TripSegment;
exports.default = _default;