@kiwicom/orbit-components/lib/CountryFlag/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.StyledImage = void 0;

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

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

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

var _js = require("@adeira/js");

var _orbitDesignTokens = require("@kiwicom/orbit-design-tokens");

var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));

var _consts = require("./consts");

const _excluded = ["dataTest", "size", "id"];

const getSizeToken = name => ({
  theme,
  size
}) => {
  const tokens = {
    [_consts.TOKENS.WIDTH]: {
      [_consts.SIZES.SMALL]: "16px",
      [_consts.SIZES.MEDIUM]: theme.orbit.widthCountryFlag
    },
    [_consts.TOKENS.HEIGHT]: {
      [_consts.SIZES.SMALL]: "9px",
      [_consts.SIZES.MEDIUM]: "13px"
    }
  };
  return tokens[name][size];
};

const StyledCountryFlag = _styledComponents.default.div.withConfig({
  displayName: "CountryFlag__StyledCountryFlag",
  componentId: "sc-ltfn8f-0"
})(["position:relative;height:", ";width:", ";background-color:", ";border-radius:", ";overflow:hidden;flex-shrink:0;"], getSizeToken(_consts.TOKENS.HEIGHT), getSizeToken(_consts.TOKENS.WIDTH), ({
  theme
}) => theme.orbit.backgroundCountryFlag, ({
  theme
}) => theme.orbit.borderRadiusSmall); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


StyledCountryFlag.defaultProps = {
  theme: _defaultTheme.default
};

const StyledImage = _styledComponents.default.img.attrs(({
  theme,
  size,
  code
}) => {
  const width = parseInt(getSizeToken(_consts.TOKENS.WIDTH)({
    theme,
    size
  }), 10);
  return {
    src: `${_consts.baseURL}/flags/${width}x0/flag-${code.toLowerCase()}.jpg`,
    srcSet: `${_consts.baseURL}/flags/${width * 2}x0/flag-${code.toLowerCase()}.jpg 2x`
  };
}).withConfig({
  displayName: "CountryFlag__StyledImage",
  componentId: "sc-ltfn8f-1"
})(["display:block;height:100%;width:100%;flex-shrink:0;"]);

exports.StyledImage = StyledImage;
StyledImage.defaultProps = {
  theme: _defaultTheme.default
};

const StyledShadow = _styledComponents.default.div.withConfig({
  displayName: "CountryFlag__StyledShadow",
  componentId: "sc-ltfn8f-2"
})(["position:absolute;display:block;height:100%;width:100%;top:0;right:0;bottom:0;left:0;box-shadow:inset 0 0 0 1px ", ";border-radius:", ";"], ({
  theme
}) => (0, _orbitDesignTokens.convertHexToRgba)(theme.orbit.paletteInkNormal, 10), ({
  theme
}) => theme.orbit.borderRadiusSmall); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


StyledShadow.defaultProps = {
  theme: _defaultTheme.default
};

function getCountryProps(code, name) {
  const codeNormalized = code ? code.toUpperCase().replace("-", "_") : "UNDEFINED";
  const countryCodeExists = (codeNormalized in _consts.CODES);
  process.env.NODE_ENV !== "production" ? (0, _js.warning)(countryCodeExists, "Country code not supported: %s", code) : void 0;
  const countryCode = countryCodeExists ? _consts.CODES[codeNormalized] : _consts.CODES.UNDEFINED;
  const countryName = countryCode === _consts.CODES.UNDEFINED && !name ? "Undefined" : name;
  return {
    code: countryCode,
    name: countryName
  };
}

const CountryFlag = _ref => {
  let {
    dataTest,
    size = _consts.SIZES.MEDIUM,
    id
  } = _ref,
      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  const {
    code,
    name
  } = getCountryProps(props.code, props.name);
  return /*#__PURE__*/React.createElement(StyledCountryFlag, {
    size: size
  }, /*#__PURE__*/React.createElement(StyledImage, {
    key: code,
    alt: name,
    title: name,
    code: code,
    id: id,
    "data-test": dataTest,
    size: size
  }), /*#__PURE__*/React.createElement(StyledShadow, null));
};

var _default = CountryFlag;
exports.default = _default;