@kiwicom/orbit-components/lib/CarrierLogo/index.js

<div align="center"> <a href="https://orbit.kiwi" target="_blank"> <img alt="orbit-components" src="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components.png" srcset="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components@2x.png 2x"

"use strict";

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

var _react = require("react");

var React = _interopRequireWildcard(_react);

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _defaultTokens = require("../defaultTokens");

var _defaultTokens2 = _interopRequireDefault(_defaultTokens);

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

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)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

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

  var theme = _ref.theme,
      size = _ref.size;

  var renderSizes = (_renderSizes = {}, _defineProperty(_renderSizes, _consts.SIZE_OPTIONS.SMALL, parseInt(theme.orbit.heightIconSmall, 10)), _defineProperty(_renderSizes, _consts.SIZE_OPTIONS.MEDIUM, parseInt(theme.orbit.heightIconMedium, 10)), _defineProperty(_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 defaultSizes - (carriersLength > 2 ? 1 : 0) + "px";
};

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

  var size = _ref3.size;

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

var getURL = function getURL() {
  var retina = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
  return function (_ref4) {
    var code = _ref4.code,
        carrierType = _ref4.carrierType,
        carriersLength = _ref4.carriersLength,
        size = _ref4.size;

    var type = carrierType === undefined ? "airline" : carrierType;
    var urlSizes = carriersLength > 1 ? getURLSizes({ size: _consts.SIZE_OPTIONS.SMALL }) : getURLSizes({ size: size });
    return retina ? _consts.BASE_URL + "/airlines/" + urlSizes.retina + "/" + code + ".png?default=" + type + ".png 2x" : _consts.BASE_URL + "/airlines/" + urlSizes.base + "/" + code + ".png?default=" + type + ".png";
  };
};

var StyledImage = _styledComponents2.default.img.attrs({
  src: getURL(),
  srcSet: getURL(true)
}).withConfig({
  displayName: "CarrierLogo__StyledImage"
})(["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: _defaultTokens2.default
};

var StyledCarrierLogo = exports.StyledCarrierLogo = _styledComponents2.default.div.withConfig({
  displayName: "CarrierLogo__StyledCarrierLogo"
})(["background-color:", ";height:", ";width:", ";display:flex;flex-direction:", ";flex-wrap: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;
  return carriers.length > 1 ? "" + theme.orbit.heightIconLarge : getRenderSize;
}, function (_ref9) {
  var theme = _ref9.theme,
      carriers = _ref9.carriers;
  return carriers.length > 1 ? "" + theme.orbit.widthIconLarge : getRenderSize;
}, function (_ref10) {
  var carriers = _ref10.carriers;
  return carriers.length > 1 ? "column" : "row";
});

StyledCarrierLogo.defaultProps = {
  theme: _defaultTokens2.default
};

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