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

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import * as React from "react";
import styled from "styled-components";
import defaultTheme from "../defaultTheme";
import { SIZE_OPTIONS, BASE_URL } from "./consts";

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

  var theme = _ref.theme,
      size = _ref.size;
  var renderSizes = (_renderSizes = {}, _defineProperty(_renderSizes, SIZE_OPTIONS.SMALL, parseInt(theme.orbit.heightIconSmall, 10)), _defineProperty(_renderSizes, SIZE_OPTIONS.MEDIUM, parseInt(theme.orbit.heightIconMedium, 10)), _defineProperty(_renderSizes, 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: 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, SIZE_OPTIONS.SMALL, 16), _defineProperty(_base, SIZE_OPTIONS.MEDIUM, 32), _defineProperty(_base, SIZE_OPTIONS.LARGE, 32), _base),
    retina: (_retina = {}, _defineProperty(_retina, SIZE_OPTIONS.SMALL, 32), _defineProperty(_retina, SIZE_OPTIONS.MEDIUM, 64), _defineProperty(_retina, SIZE_OPTIONS.LARGE, 64), _retina)
  };
  return {
    base: urlSizes.base[size],
    retina: urlSizes.retina[size]
  };
};

var StyledImage = styled.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: SIZE_OPTIONS.SMALL
  }) : getURLSizes({
    size: size
  });
  return {
    src: "".concat(BASE_URL, "/airlines/").concat(urlSizes.base, "x").concat(urlSizes.base, "/").concat(code, ".png?default=").concat(carrierType, ".png"),
    srcSet: "".concat(BASE_URL, "/airlines/").concat(urlSizes.retina, "x").concat(urlSizes.retina, "/").concat(code, ".png?default=").concat(carrierType, ".png 2x")
  };
}).withConfig({
  displayName: "CarrierLogo__StyledImage",
  componentId: "sc-1fb3c06-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); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledImage.defaultProps = {
  theme: defaultTheme
};
export var StyledCarrierLogo = styled.div.withConfig({
  displayName: "CarrierLogo__StyledCarrierLogo",
  componentId: "sc-1fb3c06-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";
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledCarrierLogo.defaultProps = {
  theme: defaultTheme
};

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

export default CarrierLogo;