@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";

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

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

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

var _defaultTokens = _interopRequireDefault(require("../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)) { 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; } }

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 "".concat(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 ? "".concat(_consts.BASE_URL, "/airlines/").concat(urlSizes.retina, "/").concat(code, ".png?default=").concat(type, ".png 2x") : "".concat(_consts.BASE_URL, "/airlines/").concat(urlSizes.base, "/").concat(code, ".png?default=").concat(type, ".png");
  };
};

var StyledImage = _styledComponents.default.img.attrs({
  src: getURL(),
  srcSet: getURL(true)
}).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: _defaultTokens.default
};

var StyledCarrierLogo = _styledComponents.default.div.withConfig({
  displayName: "CarrierLogo__StyledCarrierLogo",
  componentId: "d4doc9-1"
})(["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,
      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";
});

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

var CarrierLogo = function CarrierLogo(_ref11) {
  var _ref11$size = _ref11.size,
      size = _ref11$size === void 0 ? _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
    });
  }));
};

var _default = CarrierLogo;
exports.default = _default;