@kiwicom/orbit-components/lib/CarrierLogo/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";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.StyledCarrierLogo = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

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

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

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

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

var getRenderSize = function getRenderSize(_ref) {
  var _renderSizes;

  var theme = _ref.theme,
      size = _ref.size;
  var renderSizes = (_renderSizes = {}, (0, _defineProperty2.default)(_renderSizes, _consts.SIZE_OPTIONS.SMALL, parseInt(theme.orbit.heightIconSmall, 10)), (0, _defineProperty2.default)(_renderSizes, _consts.SIZE_OPTIONS.MEDIUM, parseInt(theme.orbit.heightIconMedium, 10)), (0, _defineProperty2.default)(_renderSizes, _consts.SIZE_OPTIONS.LARGE, parseInt(theme.orbit.heightIconLarge, 10)), _renderSizes);
  return renderSizes[size];
};

var getCarrierLogoSize = function getCarrierLogoSize(_ref2) {
  var theme = _ref2.theme,
      carriersLength = _ref2.carriersLength,
      size = _ref2.size;
  var defaultSizes = carriersLength > 1 ? getRenderSize({
    theme: theme,
    size: _consts.SIZE_OPTIONS.SMALL
  }) : getRenderSize({
    theme: theme,
    size: size
  });
  return "".concat(defaultSizes - (carriersLength > 2 ? 1 : 0), "px");
};

var getURLSizes = function getURLSizes(_ref3) {
  var _base, _retina;

  var size = _ref3.size;
  var urlSizes = {
    base: (_base = {}, (0, _defineProperty2.default)(_base, _consts.SIZE_OPTIONS.SMALL, 16), (0, _defineProperty2.default)(_base, _consts.SIZE_OPTIONS.MEDIUM, 32), (0, _defineProperty2.default)(_base, _consts.SIZE_OPTIONS.LARGE, 32), _base),
    retina: (_retina = {}, (0, _defineProperty2.default)(_retina, _consts.SIZE_OPTIONS.SMALL, 32), (0, _defineProperty2.default)(_retina, _consts.SIZE_OPTIONS.MEDIUM, 64), (0, _defineProperty2.default)(_retina, _consts.SIZE_OPTIONS.LARGE, 64), _retina)
  };
  return {
    base: urlSizes.base[size],
    retina: urlSizes.retina[size]
  };
};

var StyledImage = _styledComponents.default.img.attrs(function (_ref4) {
  var _ref4$carrierType = _ref4.carrierType,
      carrierType = _ref4$carrierType === void 0 ? "airline" : _ref4$carrierType,
      carriersLength = _ref4.carriersLength,
      size = _ref4.size,
      code = _ref4.code;
  var urlSizes = carriersLength > 1 ? getURLSizes({
    size: _consts.SIZE_OPTIONS.SMALL
  }) : getURLSizes({
    size: size
  });
  return {
    src: "".concat(_consts.BASE_URL, "/airlines/").concat(urlSizes.base, "/").concat(code, ".png?default=").concat(carrierType, ".png"),
    srcSet: "".concat(_consts.BASE_URL, "/airlines/").concat(urlSizes.retina, "/").concat(code, ".png?default=").concat(carrierType, ".png 2x")
  };
}).withConfig({
  displayName: "CarrierLogo__StyledImage",
  componentId: "d4doc9-0"
})(["background-color:", ";border-radius:", ";height:", ";width:", ";&:last-child{align-self:flex-end;}"], function (_ref5) {
  var theme = _ref5.theme;
  return theme.orbit.backgroundCarrierLogo;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.orbit.borderRadiusNormal;
}, getCarrierLogoSize, getCarrierLogoSize);

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

var StyledCarrierLogo = _styledComponents.default.div.withConfig({
  displayName: "CarrierLogo__StyledCarrierLogo",
  componentId: "d4doc9-1"
})(["background-color:", ";height:", ";width:", ";display:flex;flex-direction:", ";flex-wrap:", ";align-content:space-between;justify-content:space-between;"], function (_ref7) {
  var theme = _ref7.theme;
  return theme.orbit.backgroundCarrierLogo;
}, function (_ref8) {
  var theme = _ref8.theme,
      carriers = _ref8.carriers,
      size = _ref8.size;
  return carriers.length > 1 ? theme.orbit.heightIconLarge : "".concat(getRenderSize({
    theme: theme,
    size: size
  }), "px");
}, function (_ref9) {
  var theme = _ref9.theme,
      carriers = _ref9.carriers,
      size = _ref9.size;
  return carriers.length > 1 ? theme.orbit.widthIconLarge : "".concat(getRenderSize({
    theme: theme,
    size: size
  }), "px");
}, function (_ref10) {
  var carriers = _ref10.carriers;
  return carriers.length > 1 ? "column" : "row";
}, function (_ref11) {
  var carriers = _ref11.carriers;
  return carriers.length > 2 && "wrap";
});

exports.StyledCarrierLogo = StyledCarrierLogo;
StyledCarrierLogo.defaultProps = {
  theme: _defaultTheme.default
};

var CarrierLogo = function CarrierLogo(_ref12) {
  var _ref12$size = _ref12.size,
      size = _ref12$size === void 0 ? _consts.SIZE_OPTIONS.LARGE : _ref12$size,
      carriers = _ref12.carriers,
      dataTest = _ref12.dataTest;
  return /*#__PURE__*/React.createElement(StyledCarrierLogo, {
    carriers: carriers,
    size: size,
    "data-test": dataTest
  }, carriers.slice(0, 4).map(function (carrierImage) {
    return /*#__PURE__*/React.createElement(StyledImage, {
      key: carrierImage.code,
      carrierType: carrierImage.type,
      carriersLength: carriers.length,
      code: carrierImage.code,
      size: size,
      alt: carrierImage.name,
      title: carrierImage.name
    });
  }));
};

var _default = CarrierLogo;
exports.default = _default;