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

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
exports.__esModule = true;
exports.default = exports.CarrierLogoWrapper = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _consts = require("./consts");
var _useRandomId = require("../hooks/useRandomId");
const WIDTH = {
  [_consts.SIZE_OPTIONS.SMALL]: "w-icon-small",
  [_consts.SIZE_OPTIONS.MEDIUM]: "w-icon-medium",
  [_consts.SIZE_OPTIONS.LARGE]: "w-icon-large",
  reduced: {
    [_consts.SIZE_OPTIONS.SMALL]: "w-[calc(theme(width.icon-small)-1px)]",
    [_consts.SIZE_OPTIONS.MEDIUM]: "w-[calc(theme(width.icon-medium)-1px)]",
    [_consts.SIZE_OPTIONS.LARGE]: "w-[calc(theme(width.icon-large)-1px)]"
  }
};
const HEIGHT = {
  [_consts.SIZE_OPTIONS.SMALL]: "h-icon-small",
  [_consts.SIZE_OPTIONS.MEDIUM]: "h-icon-medium",
  [_consts.SIZE_OPTIONS.LARGE]: "h-icon-large",
  reduced: {
    [_consts.SIZE_OPTIONS.SMALL]: "h-[calc(theme(height.icon-small)-1px)]",
    [_consts.SIZE_OPTIONS.MEDIUM]: "h-[calc(theme(height.icon-medium)-1px)]",
    [_consts.SIZE_OPTIONS.LARGE]: "h-[calc(theme(height.icon-large)-1px)]"
  }
};
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 getImgSrc = ({
  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`
  };
};
const CarrierLogoWrapper = ({
  children,
  carriers,
  size,
  inlineStacked,
  className,
  ...props
}) => {
  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
    className: (0, _clsx.default)("orbit-carrier-logo", "flex content-between justify-between bg-transparent", inlineStacked ? "w-min" : [carriers.length > 2 && "flex-wrap", carriers.length > 1 ? "w-[32px] flex-col" : ["flex-row", WIDTH[size]]], !inlineStacked && carriers.length > 1 ? "h-[32px]" : HEIGHT[size], className)
  }, props), children);
};
exports.CarrierLogoWrapper = CarrierLogoWrapper;
const CarrierLogo = ({
  size = _consts.SIZE_OPTIONS.LARGE,
  carriers,
  dataTest,
  id,
  rounded,
  inlineStacked = false
}) => {
  const randomId = (0, _useRandomId.useRandomIdSeed)();
  return /*#__PURE__*/React.createElement(CarrierLogoWrapper, {
    carriers: carriers,
    size: size,
    "data-test": dataTest,
    id: id,
    inlineStacked: inlineStacked
  }, carriers.slice(0, 4).map((carrierImage, idx) => /*#__PURE__*/React.createElement("img", (0, _extends2.default)({
    className: (0, _clsx.default)("max-w-none bg-transparent", rounded ? "rounded-circle" : "rounded-normal", inlineStacked ? "not-first:-ms-xs border border-solid border-white" : "last:self-end", carriers.length > 1 && !inlineStacked ? [carriers.length > 2 ? [HEIGHT.reduced[_consts.SIZE_OPTIONS.SMALL], WIDTH.reduced[_consts.SIZE_OPTIONS.SMALL]] : [HEIGHT[_consts.SIZE_OPTIONS.SMALL], WIDTH[_consts.SIZE_OPTIONS.SMALL]]] : [carriers.length > 2 ? [HEIGHT.reduced[size], WIDTH.reduced[size]] : [HEIGHT[size], WIDTH[size]]]),
    key: randomId(idx.toString()),
    alt: carrierImage.name,
    title: carrierImage.name
  }, getImgSrc({
    carrierType: carrierImage.type,
    carriersLength: carriers.length,
    size,
    code: carrierImage.code,
    inlineStacked
  })))));
};
var _default = CarrierLogo;
exports.default = _default;