@dnb/eufemia/es/components/country-flag/CountryFlag.js

DNB Eufemia Design System UI Library

"use client";

import React, { useContext, useMemo } from 'react';
import clsx from 'clsx';
import SharedContext from "../../shared/Context.js";
import { COUNTRY as defaultCountry } from "../../shared/defaults.js";
import useCountries from "../../extensions/forms/Field/SelectCountry/useCountries.js";
import Space from "../space/Space.js";
import withComponentMarkers from "../../shared/helpers/withComponentMarkers.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const CountryFlag = props => {
  const {
    iso = defaultCountry,
    size,
    shape,
    className,
    ...rest
  } = props;
  const {
    locale
  } = useContext(SharedContext);
  const {
    countries
  } = useCountries();
  const countryName = useMemo(() => {
    return countries.find(item => item.iso === iso)?.i18n[locale.split('-')[0]];
  }, [countries, iso, locale]);
  return _jsxs(Space, {
    element: "span",
    className: clsx('dnb-country-flag', 'dnb-country-flag__size--' + (size || 'auto'), className, shape && 'dnb-country-flag__shape--' + shape),
    ...rest,
    children: [_jsx("span", {
      className: "dnb-sr-only",
      children: countryName
    }), _jsx("span", {
      className: `dnb-country-flag__flag fis fi-${iso.toLowerCase()}`
    })]
  });
};
withComponentMarkers(CountryFlag, {
  _supportsSpacingProps: true
});
export default CountryFlag;
//# sourceMappingURL=CountryFlag.js.map