@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
97 lines • 2.96 kB
JavaScript
import React from "react";
import styled from "styled-components";
import { convertHexToRgba } from "@kiwicom/orbit-design-tokens";
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: "sc-m27t9u-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: "sc-m27t9u-1"
})(["display:block;height:100%;width:100%;flex-shrink:0;"]);
StyledImage.defaultProps = {
theme: defaultTheme
};
const StyledShadow = styled.div.withConfig({
displayName: "CountryFlag__StyledShadow",
componentId: "sc-m27t9u-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.paletteInkDark, 10), ({
theme
}) => theme.orbit.borderRadiusSmall);
StyledShadow.defaultProps = {
theme: defaultTheme
};
function getCountryProps(code, name) {
const codeNormalized = code ? code.toUpperCase().replace("-", "_") : "UNDEFINED";
const countryCodeExists = (codeNormalized in CODES);
if (!countryCodeExists) console.warn(`Country code not supported: ${code}`);
const countryCode = countryCodeExists ? CODES[codeNormalized] : CODES.UNDEFINED;
const countryName = countryCode === CODES.UNDEFINED && !name ? "Undefined" : name;
return {
code: countryCode,
name: countryName
};
}
const CountryFlag = ({
dataTest,
size = SIZES.MEDIUM,
id,
...props
}) => {
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));
};
export default CountryFlag;