@kiwicom/smart-faq/lib/shared/StaticFAQ/breadcrumbs/CustomBreadcrumbs.js

Smart FAQ

"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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));

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 _getPrototypeOf3 = _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 _reactResponsive = _interopRequireDefault(require("react-responsive"));

var _Breadcrumb = _interopRequireDefault(require("./Breadcrumb"));

var _BackArrow = _interopRequireDefault(require("./BackArrow"));

var _responsiveStyleHelperClasses = _interopRequireDefault(require("../../../SmartFAQ/common/responsiveStyleHelperClasses"));

var _BookingState = require("../../../SmartFAQ/context/BookingState");

var _User = require("../../../SmartFAQ/context/User");

// @flow
var style = new String("[dir='rtl']{margin-left:16px;}.breadcrumbs{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin-bottom:24px;}@media only screen and (max-width:901px){.breadcrumbs{padding:30px 16px;margin-bottom:0px;}}");
style.__hash = "2071888332";
style.__scoped = "[dir='rtl'] .jsx-1678981485{margin-left:16px;}.breadcrumbs.jsx-1678981485{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin-bottom:24px;}@media only screen and (max-width:901px){.breadcrumbs.jsx-1678981485{padding:30px 16px;margin-bottom:0px;}}";
style.__scopedHash = "1678981485";
/*:: type Props = {|
  loginToken: ?string,
  simpleToken: ?string,
  kwAuthToken: ?string,
  breadcrumbs: Array<{ +id?: string, +title: ?string }>,
|};*/

var CustomBreadcrumbs =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(CustomBreadcrumbs, _React$Component);

  function CustomBreadcrumbs() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, CustomBreadcrumbs);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(CustomBreadcrumbs)).call.apply(_getPrototypeOf2, [this].concat(args)));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "renderBreadCrumbs", function (breadcrumbs, maxBreadcrumbsLength) {
      var breadcrubsLength = breadcrumbs.map(function (b) {
        return b.title;
      }).join().length;

      if (maxBreadcrumbsLength && breadcrubsLength > maxBreadcrumbsLength) {
        var length = breadcrumbs.length;
        breadcrumbs = breadcrumbs.map(function (b, i) {
          if (i !== 0 && i !== length - 1 && i !== length - 2) {
            return (0, _objectSpread2.default)({}, b, {
              title: '...'
            });
          }

          return b;
        });
      }

      return breadcrumbs.slice(1, breadcrumbs.length - 1).map(function (breadcrumb) {
        return breadcrumb.title ? React.createElement(_Breadcrumb.default, {
          key: breadcrumb.id,
          breadcrumb: {
            id: breadcrumb.id,
            title: breadcrumb.title
          }
        }) : null;
      });
    });
    return _this;
  }

  (0, _createClass2.default)(CustomBreadcrumbs, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          breadcrumbs = _this$props.breadcrumbs,
          loginToken = _this$props.loginToken,
          simpleToken = _this$props.simpleToken,
          kwAuthToken = _this$props.kwAuthToken;
      var firstCategory = (0, _toConsumableArray2.default)(breadcrumbs).shift();
      var lastCategory = (0, _toConsumableArray2.default)(breadcrumbs).pop();
      var previousCategory = (0, _toConsumableArray2.default)(breadcrumbs).slice(-2)[0];
      var id = previousCategory && previousCategory.id;
      var isLoggedIn = loginToken || simpleToken || kwAuthToken;
      var maxBreadcrumbsLengthMobile = 55;
      return React.createElement("div", {
        "data-cy": "faq-breadcrumbs",
        className: "jsx-".concat(style.__scopedHash, " jsx-").concat(_responsiveStyleHelperClasses.default.__scopedHash) + " " + "breadcrumbs"
      }, React.createElement(_BookingState.BookingState.Consumer, null, function (_ref) {
        var showBooking = _ref.showBooking;

        if (isLoggedIn && showBooking) {
          return React.createElement("span", {
            "data-cy": "back-button",
            className: "jsx-".concat(style.__scopedHash, " jsx-").concat(_responsiveStyleHelperClasses.default.__scopedHash) + " " + "desktopOnly"
          }, React.createElement(_BackArrow.default, {
            id: id
          }));
        }

        return null;
      }), firstCategory.title && React.createElement(_Breadcrumb.default, {
        breadcrumb: {
          title: firstCategory.title
        }
      }), React.createElement(_reactResponsive.default, {
        maxWidth: "600px"
      }, this.renderBreadCrumbs(breadcrumbs, maxBreadcrumbsLengthMobile)), React.createElement(_reactResponsive.default, {
        minWidth: "600px"
      }, this.renderBreadCrumbs(breadcrumbs)), lastCategory.title && React.createElement(_Breadcrumb.default, {
        breadcrumb: {
          title: lastCategory.title
        },
        isCurrent: true
      }), React.createElement(_style.default, {
        styleId: style.__scopedHash,
        css: style.__scoped
      }), React.createElement(_style.default, {
        styleId: _responsiveStyleHelperClasses.default.__scopedHash,
        css: _responsiveStyleHelperClasses.default.__scoped
      }));
    }
  }]);
  return CustomBreadcrumbs;
}(React.Component);

var _default = (0, _User.withToken)(CustomBreadcrumbs);

exports.default = _default;