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

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

import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import * as React from "react";
import styled from "styled-components";
import { warning } from "@adeira/js";
import convertHexToRgba from "@kiwicom/orbit-design-tokens/lib/convertHexToRgba";
import defaultTheme from "../defaultTheme";
import { baseURL, CODES, SIZES, TOKENS } from "./consts";

var getSizeToken = function getSizeToken(name) {
  return function (_ref) {
    var _TOKENS$WIDTH, _TOKENS$HEIGHT, _tokens;

    var theme = _ref.theme,
        size = _ref.size;
    var tokens = (_tokens = {}, _defineProperty(_tokens, TOKENS.WIDTH, (_TOKENS$WIDTH = {}, _defineProperty(_TOKENS$WIDTH, SIZES.SMALL, "16px"), _defineProperty(_TOKENS$WIDTH, SIZES.MEDIUM, theme.orbit.widthCountryFlag), _TOKENS$WIDTH)), _defineProperty(_tokens, TOKENS.HEIGHT, (_TOKENS$HEIGHT = {}, _defineProperty(_TOKENS$HEIGHT, SIZES.SMALL, "9px"), _defineProperty(_TOKENS$HEIGHT, SIZES.MEDIUM, "13px"), _TOKENS$HEIGHT)), _tokens);
    return tokens[name][size];
  };
};

var StyledCountryFlag = styled.div.withConfig({
  displayName: "CountryFlag__StyledCountryFlag",
  componentId: "h98fwe-0"
})(["position:relative;height:", ";width:", ";background-color:", ";border-radius:", ";overflow:hidden;flex-shrink:0;"], getSizeToken(TOKENS.HEIGHT), getSizeToken(TOKENS.WIDTH), function (_ref2) {
  var theme = _ref2.theme;
  return theme.orbit.backgroundCountryFlag;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.orbit.borderRadiusSmall;
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledCountryFlag.defaultProps = {
  theme: defaultTheme
};
export var StyledImage = styled.img.attrs(function (_ref4) {
  var theme = _ref4.theme,
      size = _ref4.size,
      code = _ref4.code;
  var width = parseInt(getSizeToken(TOKENS.WIDTH)({
    theme: theme,
    size: size
  }), 10);
  return {
    src: "".concat(baseURL, "/flags/").concat(width, "x0/flag-").concat(code.toLowerCase(), ".jpg"),
    srcSet: "".concat(baseURL, "/flags/").concat(width * 2, "x0/flag-").concat(code.toLowerCase(), ".jpg 2x")
  };
}).withConfig({
  displayName: "CountryFlag__StyledImage",
  componentId: "h98fwe-1"
})(["display:block;height:100%;width:100%;flex-shrink:0;"]);
StyledImage.defaultProps = {
  theme: defaultTheme
};
var StyledShadow = styled.div.withConfig({
  displayName: "CountryFlag__StyledShadow",
  componentId: "h98fwe-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:", ";"], function (_ref5) {
  var theme = _ref5.theme;
  return convertHexToRgba(theme.orbit.paletteInkNormal, 10);
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.orbit.borderRadiusSmall;
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledShadow.defaultProps = {
  theme: defaultTheme
};

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

var CountryFlag = function CountryFlag(_ref7) {
  var dataTest = _ref7.dataTest,
      _ref7$size = _ref7.size,
      size = _ref7$size === void 0 ? SIZES.MEDIUM : _ref7$size,
      props = _objectWithoutProperties(_ref7, ["dataTest", "size"]);

  var _getCountryProps = getCountryProps(props.code, props.name),
      code = _getCountryProps.code,
      name = _getCountryProps.name;

  return /*#__PURE__*/React.createElement(StyledCountryFlag, {
    size: size
  }, /*#__PURE__*/React.createElement(StyledImage, {
    key: code,
    alt: name,
    title: name,
    code: code,
    "data-test": dataTest,
    size: size
  }), /*#__PURE__*/React.createElement(StyledShadow, null));
};

export default CountryFlag;