@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 _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = exports.StyledCarrierLogo = void 0;
var React = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));
var _rtl = require("../utils/rtl");
var _consts = require("./consts");
var _useRandomId = require("../hooks/useRandomId");
const getRenderSize = ({
  theme,
  size
}) => {
  const renderSizes = {
    [_consts.SIZE_OPTIONS.SMALL]: parseInt(theme.orbit.heightIconSmall, 10),
    [_consts.SIZE_OPTIONS.MEDIUM]: parseInt(theme.orbit.heightIconMedium, 10),
    [_consts.SIZE_OPTIONS.LARGE]: parseInt(theme.orbit.heightIconLarge, 10)
  };
  return renderSizes[size];
};
const getWidth = ({
  theme,
  size,
  inlineStacked,
  totalCarriers
}) => {
  if (inlineStacked) return "min-content";
  return totalCarriers > 1 ? theme.orbit.widthCarrierLogo : `${getRenderSize({
    theme,
    size
  })}px`;
};
const getCarrierLogoSize = ({
  theme,
  carriersLength,
  size,
  inlineStacked
}) => {
  const defaultSizes = carriersLength > 1 && !inlineStacked ? getRenderSize({
    theme,
    size: _consts.SIZE_OPTIONS.SMALL
  }) : getRenderSize({
    theme,
    size
  });
  return `${defaultSizes - (carriersLength > 2 ? 1 : 0)}px`;
};
const getURLSizes = ({
  size
}) => {
  const urlSizes = {
    base: {
      [_consts.SIZE_OPTIONS.SMALL]: 16,
      [_consts.SIZE_OPTIONS.MEDIUM]: 32,
      [_consts.SIZE_OPTIONS.LARGE]: 32
    },
    retina: {
      [_consts.SIZE_OPTIONS.SMALL]: 32,
      [_consts.SIZE_OPTIONS.MEDIUM]: 64,
      [_consts.SIZE_OPTIONS.LARGE]: 64
    }
  };
  return {
    base: urlSizes.base[size],
    retina: urlSizes.retina[size]
  };
};
const StyledImage = _styledComponents.default.img.attrs(({
  carrierType = "airline",
  carriersLength,
  size,
  code,
  inlineStacked
}) => {
  const urlSizes = carriersLength > 1 && !inlineStacked ? getURLSizes({
    size: _consts.SIZE_OPTIONS.SMALL
  }) : getURLSizes({
    size
  });
  return {
    src: `${_consts.BASE_URL}/airlines/${urlSizes.base}x${urlSizes.base}/${code}.png?default=${carrierType}.png`,
    srcSet: `${_consts.BASE_URL}/airlines/${urlSizes.retina}x${urlSizes.retina}/${code}.png?default=${carrierType}.png 2x`
  };
}).withConfig({
  displayName: "CarrierLogo__StyledImage",
  componentId: "sc-1rhi78a-0"
})(["", ""], ({
  theme,
  rounded,
  inlineStacked
}) => (0, _styledComponents.css)(["background-color:", ";border-radius:", ";height:", ";width:", ";border:", ";&:not(:first-child){margin-", ":", ";}&:last-child{align-self:", ";}"], theme.orbit.backgroundCarrierLogo, rounded ? theme.orbit.borderRadiusCircle : theme.orbit.borderRadiusNormal, getCarrierLogoSize, getCarrierLogoSize, inlineStacked && `1px solid ${theme.orbit.paletteWhite}`, _rtl.left, inlineStacked && `calc(-1 * ${theme.orbit.spaceXSmall})`, !inlineStacked && "flex-end"));
StyledImage.defaultProps = {
  theme: _defaultTheme.default
};
const StyledCarrierLogo = _styledComponents.default.div.withConfig({
  displayName: "CarrierLogo__StyledCarrierLogo",
  componentId: "sc-1rhi78a-1"
})(["", ""], ({
  theme,
  carriers,
  size,
  inlineStacked
}) => (0, _styledComponents.css)(["background-color:", ";height:", ";width:", ";display:flex;flex-direction:", ";flex-wrap:", ";align-content:space-between;justify-content:space-between;"], theme.orbit.backgroundCarrierLogo, carriers.length > 1 && !inlineStacked ? theme.orbit.heightCarrierLogo : `${getRenderSize({
  theme,
  size
})}px`, getWidth({
  theme,
  size,
  inlineStacked,
  totalCarriers: carriers.length
}), carriers.length > 1 && !inlineStacked ? "column" : "row", carriers.length > 2 && !inlineStacked && "wrap"));
exports.StyledCarrierLogo = StyledCarrierLogo;
StyledCarrierLogo.defaultProps = {
  theme: _defaultTheme.default
};
const CarrierLogo = ({
  size = _consts.SIZE_OPTIONS.LARGE,
  carriers,
  dataTest,
  id,
  rounded,
  inlineStacked = false
}) => {
  const randomId = (0, _useRandomId.useRandomIdSeed)();
  return /*#__PURE__*/React.createElement(StyledCarrierLogo, {
    carriers: carriers,
    size: size,
    "data-test": dataTest,
    id: id,
    inlineStacked: inlineStacked
  }, carriers.slice(0, 4).map((carrierImage, idx) => /*#__PURE__*/React.createElement(StyledImage, {
    key: randomId(idx.toString()),
    rounded: rounded,
    carrierType: carrierImage.type,
    carriersLength: carriers.length,
    code: carrierImage.code,
    size: size,
    inlineStacked: inlineStacked,
    alt: carrierImage.name,
    title: carrierImage.name
  })));
};
var _default = CarrierLogo;
exports.default = _default;