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

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

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

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

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

var _convertHexToRgba = _interopRequireDefault(require("@kiwicom/orbit-design-tokens/lib/convertHexToRgba"));

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

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

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

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, _consts.TOKENS.WIDTH, (_TOKENS$WIDTH = {}, _defineProperty(_TOKENS$WIDTH, _consts.SIZES.SMALL, "16px"), _defineProperty(_TOKENS$WIDTH, _consts.SIZES.MEDIUM, theme.orbit.widthCountryFlag), _TOKENS$WIDTH)), _defineProperty(_tokens, _consts.TOKENS.HEIGHT, (_TOKENS$HEIGHT = {}, _defineProperty(_TOKENS$HEIGHT, _consts.SIZES.SMALL, "9px"), _defineProperty(_TOKENS$HEIGHT, _consts.SIZES.MEDIUM, "13px"), _TOKENS$HEIGHT)), _tokens);
    return tokens[name][size];
  };
};

var StyledCountryFlag = _styledComponents.default.div.withConfig({
  displayName: "CountryFlag__StyledCountryFlag",
  componentId: "h98fwe-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;
});

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: "h98fwe-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: "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 (0, _convertHexToRgba.default)(theme.orbit.paletteInkNormal, 10);
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.orbit.borderRadiusSmall;
});

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

function getCountryProps(code, name) {
  var codeNormalized = code ? code.toUpperCase().replace("-", "_") : "ANYWHERE";
  var countryCodeExists = codeNormalized in _consts.CODES;
  (0, _js.warning)(countryCodeExists, "Country code not supported: %s", code);
  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 = _objectWithoutProperties(_ref7, ["dataTest", "size"]);

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

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

var _default = CountryFlag;
exports.default = _default;