@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 _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.StyledImage = void 0;

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

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

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");

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

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

var 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), 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.default
};

var StyledImage = _styledComponents.default.img.attrs(function (_ref4) {
  var theme = _ref4.theme,
      size = _ref4.size,
      code = _ref4.code;
  var width = parseInt(getSizeToken(_consts.TOKENS.WIDTH)({
    theme: theme,
    size: size
  }), 10);
  return {
    src: "".concat(_consts.baseURL, "/flags/").concat(width, "x0/flag-").concat(code.toLowerCase(), ".jpg"),
    srcSet: "".concat(_consts.baseURL, "/flags/").concat(width * 2, "x0/flag-").concat(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
};

var 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:", ";"], function (_ref5) {
  var theme = _ref5.theme;
  return (0, _orbitDesignTokens.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.default
};

function getCountryProps(code, name) {
  var codeNormalized = code ? code.toUpperCase().replace("-", "_") : "ANYWHERE";
  var countryCodeExists = (codeNormalized in _consts.CODES);
  process.env.NODE_ENV !== "production" ? (0, _js.warning)(countryCodeExists, "Country code not supported: %s", code) : void 0;
  var countryCode = countryCodeExists ? _consts.CODES[codeNormalized] : _consts.CODES.ANYWHERE;
  var countryName = countryCode === _consts.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 ? _consts.SIZES.MEDIUM : _ref7$size,
      props = (0, _objectWithoutProperties2.default)(_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));
};

var _default = CountryFlag;
exports.default = _default;