@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 * as React from "react";
import styled from "styled-components";
import defaultTokens from "../defaultTokens";
import { SIZE_OPTIONS, BASE_URL } from "./consts";

const getRenderSize = ({
  theme,
  size
}) => {
  const renderSizes = {
    [SIZE_OPTIONS.SMALL]: parseInt(theme.orbit.heightIconSmall, 10),
    [SIZE_OPTIONS.MEDIUM]: parseInt(theme.orbit.heightIconMedium, 10),
    [SIZE_OPTIONS.LARGE]: parseInt(theme.orbit.heightIconLarge, 10)
  };
  return renderSizes[size];
};

const getCarrierLogoSize = ({
  theme,
  carriersLength,
  size
}) => {
  const defaultSizes = carriersLength > 1 ? getRenderSize({
    theme,
    size: SIZE_OPTIONS.SMALL
  }) : getRenderSize({
    theme,
    size
  });
  return `${defaultSizes - (carriersLength > 2 ? 1 : 0)}px`;
};

const getURLSizes = ({
  size
}) => {
  const urlSizes = {
    base: {
      [SIZE_OPTIONS.SMALL]: 16,
      [SIZE_OPTIONS.MEDIUM]: 32,
      [SIZE_OPTIONS.LARGE]: 32
    },
    retina: {
      [SIZE_OPTIONS.SMALL]: 32,
      [SIZE_OPTIONS.MEDIUM]: 64,
      [SIZE_OPTIONS.LARGE]: 64
    }
  };
  return {
    base: urlSizes.base[size],
    retina: urlSizes.retina[size]
  };
};

const getURL = (retina = false) => ({
  code,
  carrierType,
  carriersLength,
  size
}) => {
  const type = carrierType === undefined ? "airline" : carrierType;
  const urlSizes = carriersLength > 1 ? getURLSizes({
    size: SIZE_OPTIONS.SMALL
  }) : getURLSizes({
    size
  });
  return retina ? `${BASE_URL}/airlines/${urlSizes.retina}/${code}.png?default=${type}.png 2x` : `${BASE_URL}/airlines/${urlSizes.base}/${code}.png?default=${type}.png`;
};

const StyledImage = styled.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;}"], ({
  theme
}) => theme.orbit.backgroundCarrierLogo, ({
  theme
}) => theme.orbit.borderRadiusNormal, getCarrierLogoSize, getCarrierLogoSize);
StyledImage.defaultProps = {
  theme: defaultTokens
};
export const StyledCarrierLogo = styled.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;"], ({
  theme
}) => theme.orbit.backgroundCarrierLogo, ({
  theme,
  carriers,
  size
}) => carriers.length > 1 ? theme.orbit.heightIconLarge : `${getRenderSize({
  theme,
  size
})}px`, ({
  theme,
  carriers,
  size
}) => carriers.length > 1 ? theme.orbit.widthIconLarge : `${getRenderSize({
  theme,
  size
})}px`, ({
  carriers
}) => carriers.length > 1 ? "column" : "row");
StyledCarrierLogo.defaultProps = {
  theme: defaultTokens
};

const CarrierLogo = ({
  size = SIZE_OPTIONS.LARGE,
  carriers,
  dataTest
}) => React.createElement(StyledCarrierLogo, {
  carriers: carriers,
  size: size,
  "data-test": dataTest
}, carriers.slice(0, 4).map(carrierImage => 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;