@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.

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; }

import * as React from "react";
import styled from "styled-components";
import { warning } from "@kiwicom/js";
import convertHexToRgba from "@kiwicom/orbit-design-tokens/lib/convertHexToRgba";
import defaultTheme from "../defaultTheme";
import { baseURL, CODES, SIZES, TOKENS } from "./consts";

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

const 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), ({
  theme
}) => theme.orbit.backgroundCountryFlag, ({
  theme
}) => theme.orbit.borderRadiusSmall);
StyledCountryFlag.defaultProps = {
  theme: defaultTheme
};
export const StyledImage = styled.img.attrs(({
  theme,
  size,
  code
}) => {
  const width = parseInt(getSizeToken(TOKENS.WIDTH)({
    theme,
    size
  }), 10);
  return {
    src: `${baseURL}/flags/${width}x0/flag-${code.toLowerCase()}.jpg`,
    srcSet: `${baseURL}/flags/${width * 2}x0/flag-${code.toLowerCase()}.jpg 2x`
  };
}).withConfig({
  displayName: "CountryFlag__StyledImage",
  componentId: "h98fwe-1"
})(["display:block;height:100%;width:100%;flex-shrink:0;"]);
StyledImage.defaultProps = {
  theme: defaultTheme
};
const 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:", ";"], ({
  theme
}) => convertHexToRgba(theme.orbit.paletteInkNormal, 10), ({
  theme
}) => theme.orbit.borderRadiusSmall);
StyledShadow.defaultProps = {
  theme: defaultTheme
};
export function getCountryProps(code, name) {
  const codeNormalized = code ? code.toUpperCase().replace("-", "_") : "ANYWHERE";
  const countryCodeExists = codeNormalized in CODES;
  warning(countryCodeExists, "Country code not supported: %s", code);
  const countryCode = countryCodeExists ? CODES[codeNormalized] : CODES.ANYWHERE;
  const countryName = countryCode === CODES.ANYWHERE && !name ? "Anywhere" : name;
  return {
    code: countryCode,
    name: countryName
  };
}

const CountryFlag = (_ref) => {
  let {
    dataTest,
    size = SIZES.MEDIUM
  } = _ref,
      props = _objectWithoutProperties(_ref, ["dataTest", "size"]);

  const {
    code,
    name
  } = getCountryProps(props.code, props.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));
};

export default CountryFlag;