@wulperstudio/cms/modern/components/SelectCountry/SelectCountry.js

Wulper Studio Library Components CMS

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
var _Icon;
/* eslint-disable react/jsx-one-expression-per-line */
/* eslint-disable no-unused-vars */
import React from 'react';
import { Icon } from '@iconify/react';
import { countries } from './utils';
import { Option, Select } from './styled';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var RenderComponent = function RenderComponent(option) {
  if (!option) {
    return _Icon || (_Icon = /*#__PURE__*/_jsx(Icon, {
      icon: "ic:round-language",
      width: "24",
      color: "#B2BEDA"
    }));
  }
  return /*#__PURE__*/_jsx("img", {
    loading: "lazy",
    width: "24",
    height: "auto",
    src: "https://flagcdn.com/w20/".concat(option == null ? void 0 : option.value.code.toLowerCase(), ".png"),
    srcSet: "https://flagcdn.com/w40/".concat(option == null ? void 0 : option.value.code.toLowerCase(), ".png 2x"),
    alt: "Flag of ".concat(option == null ? void 0 : option.value.label)
  });
};
var SelectCountry = function SelectCountry(_ref) {
  var onChange = _ref.onChange,
    value = _ref.value;
  var _React$useState = React.useState(null),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    state = _React$useState2[0],
    setState = _React$useState2[1];
  var handleChange = function handleChange(newVal) {
    setState(newVal);
    if (onChange && newVal) onChange(newVal);
  };
  React.useEffect(function () {
    if (value) {
      setState(value);
    }
  }, [value]);
  return /*#__PURE__*/_jsx(Select, {
    value: state,
    multiple: false,
    onChange: function onChange(e, _v) {
      return handleChange(_v);
    },
    renderValue: RenderComponent,
    slotProps: {
      popup: {
        keepMounted: true
      }
    },
    children: countries.map(function (c) {
      return /*#__PURE__*/_jsxs(Option, {
        value: c,
        children: [/*#__PURE__*/_jsx("img", {
          loading: "lazy",
          width: "24",
          height: "auto",
          src: "https://flagcdn.com/w20/".concat(c.code.toLowerCase(), ".png"),
          srcSet: "https://flagcdn.com/w40/".concat(c.code.toLowerCase(), ".png 2x"),
          alt: "Flag of ".concat(c.label)
        }), c.label, " (", c.code, ") ", c.prefix]
      }, c.code);
    })
  });
};
export default SelectCountry;