@kiwicom/smart-faq
Version:
Smart FAQ
127 lines (101 loc) • 6.1 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 = void 0;
var _style = _interopRequireDefault(require("styled-jsx/style"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var React = _interopRequireWildcard(require("react"));
var _reactRelay = require("react-relay");
var _Stack = _interopRequireDefault(require("@kiwicom/orbit-components/lib/Stack"));
var _TextLink = _interopRequireDefault(require("@kiwicom/orbit-components/lib/TextLink"));
var _Translate = _interopRequireDefault(require("@kiwicom/nitro/lib/components/Translate"));
var _MulticityTrip = _interopRequireDefault(require("./MulticityTrip"));
// @flow
var MulticityOverlayTrip =
/*#__PURE__*/
function (_React$Component) {
(0, _inherits2.default)(MulticityOverlayTrip, _React$Component);
function MulticityOverlayTrip(props) {
var _this;
(0, _classCallCheck2.default)(this, MulticityOverlayTrip);
_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(MulticityOverlayTrip).call(this, props));
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "toggleOverlapping", function (e) {
e.preventDefault();
_this.setState(function (prevState) {
return {
overlapping: !prevState.overlapping
};
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "setVisibleTripsHeight", function (height
/*: number*/
) {
_this.setState({
visibleTripsHeight: height
});
});
_this.state = {
overlapping: true,
visibleTripsHeight: 0
};
return _this;
}
(0, _createClass2.default)(MulticityOverlayTrip, [{
key: "render",
value: function render() {
var booking = this.props.booking;
var trips = booking.trips;
var buttonText = this.state.overlapping ? React.createElement(_Translate.default, {
t: "smartfaq.single_booking_page.show_more_trips"
}) : React.createElement(_Translate.default, {
t: "smartfaq.single_booking_page.show_less_trips"
});
return trips && trips.length > 2 ? React.createElement("div", {
className: _style.default.dynamic([["2922183374", [this.state.visibleTripsHeight, this.state.visibleTripsHeight]]])
}, React.createElement("div", {
className: _style.default.dynamic([["2922183374", [this.state.visibleTripsHeight, this.state.visibleTripsHeight]]]) + " " + ((this.state.overlapping ? 'multicityWrapper' : 'multicityWrapper multicityWrapperIsActive') || "")
}, React.createElement(_MulticityTrip.default, {
booking: booking,
setVisibleTripsHeight: this.setVisibleTripsHeight
}), React.createElement("div", {
className: _style.default.dynamic([["2922183374", [this.state.visibleTripsHeight, this.state.visibleTripsHeight]]]) + " " + ((this.state.overlapping ? 'multicityOverlay' : 'multicityOverlay multicityOverlayIsActive') || "")
})), React.createElement(_Stack.default, {
flex: true,
justify: "center",
spaceAfter: "large"
}, React.createElement(_TextLink.default, {
href: "",
onClick: this.toggleOverlapping,
type: "secondary",
size: "normal",
dataTest: "toggleDisplayedTrips"
}, buttonText)), React.createElement(_style.default, {
styleId: "2922183374",
css: ".multicityWrapper.__jsx-style-dynamic-selector{position:relative;height:".concat(this.state.visibleTripsHeight, "px;max-height:").concat(this.state.visibleTripsHeight, "px;overflow:hidden;}.multicityWrapperIsActive.__jsx-style-dynamic-selector{height:auto;max-height:10000px;}.multicityOverlay.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;position:absolute;top:0;left:0;width:100%;height:inherit;pointer-events:none;background:linear-gradient( rgba(255,255,255,0), rgba(255,255,255,0) 40%, rgba(255,255,255,1) );z-index:1;}@-webkit-keyframes overlay-__jsx-style-dynamic-selector{0%{opacity:1;}100%{opacity:0;z-index:-1;}}@keyframes overlay-__jsx-style-dynamic-selector{0%{opacity:1;}100%{opacity:0;z-index:-1;}}"),
dynamic: [this.state.visibleTripsHeight, this.state.visibleTripsHeight]
})) : React.createElement(_MulticityTrip.default, {
booking: booking
});
}
}]);
return MulticityOverlayTrip;
}(React.Component);
var _default = (0, _reactRelay.createFragmentContainer)(MulticityOverlayTrip, {
booking: function booking() {
var node = require("./__generated__/MulticityOverlayTrip_booking.graphql");
if (node.hash && node.hash !== "fa2e9943c930537f38303cab2e9c229f") {
console.error("The definition of 'MulticityOverlayTrip_booking' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data.");
}
return require("./__generated__/MulticityOverlayTrip_booking.graphql");
}
});
exports.default = _default;