{"version":3,"sources":["../source/CountrySelect.js"],"names":["CountrySelect","value","onChange","options","rest","onChange_","event","target","undefined","selectedOption","getSelectedOption","map","label","divider","DIVIDER_STYLE","propTypes","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"}