{"version":3,"sources":["../source/CountrySelect.js"],"names":["React","useCallback","useMemo","PropTypes","classNames","getUnicodeFlagIcon","CountrySelect","value","onChange","options","rest","onChange_","event","target","undefined","selectedOption","getSelectedOption","map","label","divider","DIVIDER_STYLE","propTypes","string","func","isRequired","arrayOf","shape","bool","fontSize","backgroundColor","color","CountrySelectWithIcon","className","Icon","iconComponent","getIconAspectRatio","Arrow","arrowComponent","unicodeFlags","elementType","defaultProps","option"],"mappings":"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","sourcesContent":["import React, { useCallback, useMemo } from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport classNames from 'classnames'\r\nimport getUnicodeFlagIcon from 'country-flag-icons/unicode'\r\n\r\nexport default function CountrySelect({\r\n\tvalue,\r\n\tonChange,\r\n\toptions,\r\n\t...rest\r\n}) {\r\n\tconst onChange_ = useCallback((event) => {\r\n\t\tconst value = event.target.value\r\n\t\tonChange(value === 'ZZ' ? undefined : value)\r\n\t}, [onChange])\r\n\r\n\tconst selectedOption = useMemo(() => {\r\n\t\treturn getSelectedOption(options, value)\r\n\t}, [options, value])\r\n\r\n\t// \"ZZ\" means \"International\".\r\n\t// (HTML requires each `<option/>` have some string `value`).\r\n\treturn (\r\n\t\t<select\r\n\t\t\t{...rest}\r\n\t\t\tvalue={value || 'ZZ'}\r\n\t\t\tonChange={onChange_}>\r\n\t\t\t{options.map(({ value, label, divider }) => (\r\n\t\t\t\t<option\r\n\t\t\t\t\tkey={divider ? '|' : value || 'ZZ'}\r\n\t\t\t\t\tvalue={divider ? '|' : value || 'ZZ'}\r\n\t\t\t\t\tdisabled={divider ? true : false}\r\n\t\t\t\t\tstyle={divider ? DIVIDER_STYLE : undefined}>\r\n\t\t\t\t\t{label}\r\n\t\t\t\t</option>\r\n\t\t\t))}\r\n\t\t</select>\r\n\t)\r\n}\r\n\r\nCountrySelect.propTypes = {\r\n\t/**\r\n\t * A two-letter country code.\r\n\t * Example: \"US\", \"RU\", etc.\r\n\t */\r\n\tvalue: PropTypes.string,\r\n\r\n\t/**\r\n\t * Updates the `value`.\r\n\t */\r\n\tonChange: PropTypes.func.isRequired,\r\n\r\n\t// `<select/>` options.\r\n\toptions: PropTypes.arrayOf(PropTypes.shape({\r\n\t\tvalue: PropTypes.string,\r\n\t\tlabel: PropTypes.string,\r\n\t\tdivider: PropTypes.bool\r\n\t})).isRequired\r\n}\r\n\r\nconst DIVIDER_STYLE = {\r\n\tfontSize: '1px',\r\n\tbackgroundColor: 'currentColor',\r\n\tcolor: 'inherit'\r\n}\r\n\r\nexport function CountrySelectWithIcon({\r\n\tvalue,\r\n\toptions,\r\n\tclassName,\r\n\ticonComponent: Icon,\r\n\tgetIconAspectRatio,\r\n\tarrowComponent: Arrow,\r\n\tunicodeFlags,\r\n\t...rest\r\n}) {\r\n\tconst selectedOption = useMemo(() => {\r\n\t\treturn getSelectedOption(options, value)\r\n\t}, [options, value])\r\n\r\n\treturn (\r\n\t\t<div className=\"PhoneInputCountry\">\r\n\t\t\t<CountrySelect\r\n\t\t\t\t{...rest}\r\n\t\t\t\tvalue={value}\r\n\t\t\t\toptions={options}\r\n\t\t\t\tclassName={classNames('PhoneInputCountrySelect', className)}/>\r\n\r\n\t\t\t{/* Either a Unicode flag icon. */}\r\n\t\t\t{(unicodeFlags && value) &&\r\n\t\t\t\t<div className=\"PhoneInputCountryIconUnicode\">\r\n\t\t\t\t\t{getUnicodeFlagIcon(value)}\r\n\t\t\t\t</div>\r\n\t\t\t}\r\n\r\n\t\t\t{/* Or an SVG flag icon. */}\r\n\t\t\t{!(unicodeFlags && value) &&\r\n\t\t\t\t<Icon\r\n\t\t\t\t\tcountry={value}\r\n\t\t\t\t\tlabel={selectedOption && selectedOption.label}\r\n\t\t\t\t\taspectRatio={unicodeFlags ? 1 : undefined}/>\r\n\t\t\t}\r\n\r\n\t\t\t<Arrow/>\r\n\t\t</div>\r\n\t)\r\n}\r\n\r\nCountrySelectWithIcon.propTypes = {\r\n\t// Country flag component.\r\n\ticonComponent: PropTypes.elementType,\r\n\r\n\t// Select arrow component.\r\n\tarrowComponent: PropTypes.elementType.isRequired,\r\n\r\n\t// Set to `true` to render Unicode flag icons instead of SVG images.\r\n\tunicodeFlags: PropTypes.bool\r\n}\r\n\r\nCountrySelectWithIcon.defaultProps = {\r\n\t// Is \"International\" icon square?\r\n\tarrowComponent: () => <div className=\"PhoneInputCountrySelectArrow\"/>\r\n}\r\n\r\nfunction getSelectedOption(options, value) {\r\n\tfor (const option of options) {\r\n\t\tif (!option.divider && option.value === value) {\r\n\t\t\treturn option\r\n\t\t}\r\n\t}\r\n}"],"file":"CountrySelect.js"}