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

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@iconify/react");
var _utils = require("./utils");
var _styled = require("./styled");
var _jsxRuntime = require("react/jsx-runtime");
var _Icon;
/* eslint-disable react/jsx-one-expression-per-line */
/* eslint-disable no-unused-vars */
var RenderComponent = function RenderComponent(option) {
  if (!option) {
    return _Icon || (_Icon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
      icon: "ic:round-language",
      width: "24",
      color: "#B2BEDA"
    }));
  }
  return /*#__PURE__*/(0, _jsxRuntime.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["default"].useState(null),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    state = _React$useState2[0],
    setState = _React$useState2[1];
  var handleChange = function handleChange(newVal) {
    setState(newVal);
    if (onChange && newVal) onChange(newVal);
  };
  _react["default"].useEffect(function () {
    if (value) {
      setState(value);
    }
  }, [value]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.Select, {
    value: state,
    multiple: false,
    onChange: function onChange(e, _v) {
      return handleChange(_v);
    },
    renderValue: RenderComponent,
    slotProps: {
      popup: {
        keepMounted: true
      }
    },
    children: _utils.countries.map(function (c) {
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.Option, {
        value: c,
        children: [/*#__PURE__*/(0, _jsxRuntime.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);
    })
  });
};
var _default = exports["default"] = SelectCountry;