@kiwicom/orbit-components/lib/DestinationHeader/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 = void 0;

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

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

var _ChevronLeft = _interopRequireDefault(require("../icons/ChevronLeft"));

var _Heading = _interopRequireWildcard(require("../Heading"));

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

var _Button = _interopRequireWildcard(require("../Button"));

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

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

var _LazyImage = _interopRequireDefault(require("../LazyImage"));

var _mediaQuery = _interopRequireDefault(require("../utils/mediaQuery"));

var _useTranslate = _interopRequireDefault(require("../hooks/useTranslate"));

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; } }

var StyledDestinationHeader = _styledComponents.default.div.withConfig({
  displayName: "DestinationHeader__StyledDestinationHeader",
  componentId: "sc-1yicg00-0"
})(["width:100%;height:80px;position:relative;box-sizing:border-box;border-radius:", ";overflow:hidden;", ";"], function (_ref) {
  var theme = _ref.theme;
  return theme.orbit.borderRadiusNormal;
}, _mediaQuery.default.largeMobile((0, _styledComponents.css)(["height:120px;"])));

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

var StyledOverlay = _styledComponents.default.div.withConfig({
  displayName: "DestinationHeader__StyledOverlay",
  componentId: "sc-1yicg00-1"
})(["position:absolute;height:100%;width:100%;left:0;top:0;background-image:linear-gradient(to top,rgba(16,19,21,0.75),rgba(0,0,0,0));z-index:1;border-radius:", ";"], function (_ref2) {
  var theme = _ref2.theme;
  return theme.orbit.borderRadiusNormal;
});

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

var StyledContent = _styledComponents.default.div.withConfig({
  displayName: "DestinationHeader__StyledContent",
  componentId: "sc-1yicg00-2"
})(["position:relative;z-index:2;display:flex;height:100%;flex-direction:column;justify-content:space-between;", "{align-self:flex-start;background:none;}", ";"], _Button.StyledButton, _mediaQuery.default.largeMobile((0, _styledComponents.css)(["", "{width:", ";height:", ";svg{width:", ";height:", ";}}"], _Button.StyledButton, function (_ref3) {
  var theme = _ref3.theme;
  return theme.orbit.heightButtonNormal;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.orbit.heightButtonNormal;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.orbit.widthIconMedium;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.orbit.heightIconMedium;
})));

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

var StyledHeader = _styledComponents.default.div.withConfig({
  displayName: "DestinationHeader__StyledHeader",
  componentId: "sc-1yicg00-3"
})(["box-sizing:border-box;padding:", ";", ";"], function (_ref7) {
  var theme = _ref7.theme;
  return "".concat(theme.orbit.spaceXSmall, " ").concat(theme.orbit.spaceSmall);
}, _mediaQuery.default.largeMobile((0, _styledComponents.css)(["padding:", ";", "{font-size:", ";font-weight:", ";}"], function (_ref8) {
  var theme = _ref8.theme;
  return "".concat(theme.orbit.spaceSmall, " ").concat(theme.orbit.spaceMedium);
}, _Heading.StyledHeading, function (_ref9) {
  var theme = _ref9.theme;
  return (0, _Heading.getHeadingToken)(_consts.TOKENS.sizeHeading)({
    theme: theme,
    type: _consts.TYPE_OPTIONS.TITLE1
  });
}, function (_ref10) {
  var theme = _ref10.theme;
  return (0, _Heading.getHeadingToken)(_consts.TOKENS.weightHeading)({
    theme: theme,
    type: _consts.TYPE_OPTIONS.TITLE1
  });
})));

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

var DestinationHeaderGoBackButton = function DestinationHeaderGoBackButton(_ref11) {
  var onClick = _ref11.onClick;
  var translate = (0, _useTranslate.default)();
  return React.createElement(_Button.default, {
    size: "small",
    iconLeft: React.createElement(_ChevronLeft.default, null),
    onClick: onClick,
    title: translate("breadcrumbs_back")
  });
};

var DestinationHeader = function DestinationHeader(_ref12) {
  var destinationName = _ref12.destinationName,
      goBack = _ref12.goBack,
      dataTest = _ref12.dataTest,
      image = _ref12.image;
  var destinationImage = image.toLowerCase();
  return React.createElement(StyledDestinationHeader, {
    "data-test": dataTest
  }, React.createElement(_LazyImage.default, {
    original: {
      webp: "".concat(_consts2.default, "/photos/900x120/").concat(destinationImage, ".webp"),
      jpg: "".concat(_consts2.default, "/photos/900x120/").concat(destinationImage, ".jpg")
    },
    placeholder: {
      webp: "".concat(_consts2.default, "/photos/225x30/").concat(destinationImage, ".webp"),
      jpg: "".concat(_consts2.default, "/photos/225x30/").concat(destinationImage, ".jpg")
    },
    name: destinationName
  }), React.createElement(StyledOverlay, null), React.createElement(StyledContent, null, React.createElement(DestinationHeaderGoBackButton, {
    onClick: goBack
  }), React.createElement(StyledHeader, null, React.createElement(_Heading.default, {
    inverted: true,
    type: "title2"
  }, destinationName))));
};

var _default = DestinationHeader;
exports.default = _default;