@turnkey/react-wallet-kit
Version:
The easiest and most powerful way to integrate Turnkey's Embedded Wallets into your React applications.
109 lines (106 loc) • 6.2 kB
JavaScript
import { jsxs, jsx } from 'react/jsx-runtime';
import { defaultCountries, parseCountry, usePhoneInput, FlagImage as FlagImage$1 } from 'react-international-phone';
import { Listbox, ListboxButton, ListboxOptions, ListboxOption, Input } from '@headlessui/react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
import parsePhoneNumberFromString from 'libphonenumber-js';
var FlagImage = FlagImage$1;
// Supported country dial codes
var supported_country_codes = ["+1", "+33", "+420", "+358", "+49", "+30", "+36", "+354", "+353", "+39", "+371", "+370", "+352", "+356", "+373", "+382", "+31", "+47", "+48", "+351", "+40", "+381", "+386", "+34", "+46", "+41", "+355", "+376", "+244", "+54", "+374", "+61", "+43", "+994", "+1242", "+973", "+880", "+1246", "+32", "+501", "+229", "+591", "+387", "+267", "+55", "+1284", "+673", "+237", "+238", "+1345", "+235", "+56", "+57", "+506", "+385", "+599", "+357", "+243", "+45", "+253", "+1767", "+593", "+503", "+240", "+372", "+298", "+679", "+689", "+220", "+995", "+233", "+350", "+1473", "+502", "+590", "+224", "+592", "+509", "+504", "+852", "+91", "+62", "+972", "+225", "+1876", "+81", "+383", "+965", "+996", "+856", "+961", "+266", "+231", "+261", "+60", "+960", "+223", "+230", "+52", "+373", "+976", "+212", "+258", "+264", "+977", "+64", "+505", "+227", "+234", "+92", "+507", "+51", "+63", "+1787", "+1939", "+974", "+262", "+1758", "+1784", "+685", "+966", "+221", "+248", "+232", "+65", "+27", "+82", "+597", "+268", "+992", "+255", "+66", "+228", "+1868", "+216", "+598", "+998", "+58"];
var countries = defaultCountries.filter(function (country) {
var _parseCountry = parseCountry(country),
dialCode = _parseCountry.dialCode;
return supported_country_codes.includes("+".concat(dialCode));
});
var isValidPhone = function isValidPhone(phone) {
var _phoneNumber$isValid;
var phoneNumber = parsePhoneNumberFromString(phone);
return (_phoneNumber$isValid = phoneNumber === null || phoneNumber === void 0 ? void 0 : phoneNumber.isValid()) !== null && _phoneNumber$isValid !== void 0 ? _phoneNumber$isValid : false;
};
function PhoneInputBox(props) {
var value = props.value,
_onChange = props.onChange,
onFocus = props.onFocus,
onBlur = props.onBlur,
onEnter = props.onEnter;
var _usePhoneInput = usePhoneInput({
value: value,
defaultCountry: "us",
disableDialCodeAndPrefix: true,
countries: countries,
onChange: function onChange(data) {
_onChange(data.phone, "+".concat(data.country.dialCode, " ").concat(data.inputValue), isValidPhone(data.phone));
}
}),
inputValue = _usePhoneInput.inputValue,
handlePhoneValueChange = _usePhoneInput.handlePhoneValueChange,
inputRef = _usePhoneInput.inputRef,
country = _usePhoneInput.country,
setCountry = _usePhoneInput.setCountry;
return jsxs("div", {
className: "w-full flex items-center gap-2 rounded-md text-inherit bg-button-light dark:bg-button-dark border border-modal-background-dark/20 dark:border-modal-background-light/20 focus-within:outline-primary-light focus-within:dark:outline-primary-dark focus-within:outline-[1px] focus-within:outline-offset-0 box-border transition-all",
children: [jsx(Listbox, {
as: "div",
value: country.iso2,
onChange: setCountry,
children: jsxs("div", {
className: "relative",
children: [jsxs(ListboxButton, {
className: "flex flex-row min-w-20 gap-2 px-3 cursor-pointer bg-button-light dark:bg-button-dark border-none rounded-md text-left items-center",
children: [jsxs("div", {
className: "flex flex-row space-x-2 items-center",
children: [jsx(FlagImage, {
iso2: country.iso2,
className: "w-5 h-4 rounded-sm"
}), jsxs("div", {
className: "text-sm text-modal-text-light dark:text-modal-text-dark",
children: ["+", country.dialCode]
})]
}), jsx(FontAwesomeIcon, {
icon: faChevronDown,
className: "size-3 text-icon-text-light dark:text-icon-text-dark"
})]
}), jsx(ListboxOptions, {
transition: true,
className: "absolute tk-scrollbar z-50 mt-1 border border-modal-background-dark/20 dark:border-modal-background-light/20 rounded-md shadow-lg max-h-72 overflow-y-auto overflow-x-hidden text-sm \n transition duration-200 ease-out data-closed:-translate-y-2 data-closed:opacity-0",
children: countries.map(function (c) {
var _parseCountry2 = parseCountry(c),
iso2 = _parseCountry2.iso2,
name = _parseCountry2.name,
dialCode = _parseCountry2.dialCode;
return jsxs(ListboxOption, {
value: iso2,
className: function className(_ref) {
var active = _ref.active;
return "cursor-pointer select-none py-2 px-3 bg-button-light dark:bg-button-dark flex items-center gap-2 ".concat(active ? "bg-modal-background-light dark:bg-modal-background-dark" : "");
},
children: [jsx(FlagImage, {
iso2: iso2,
className: "w-5 h-4 rounded-sm"
}), jsx("span", {
children: name
}), jsxs("span", {
className: "ml-auto text-xs text-icon-text-light dark:text-icon-text-dark",
children: ["+", dialCode]
})]
}, iso2);
})
})]
})
}), jsx(Input, {
type: "tel",
value: inputValue,
ref: inputRef,
onChange: handlePhoneValueChange,
onFocus: onFocus,
onBlur: onBlur,
onKeyDown: function onKeyDown(e) {
if (e.key === "Enter") onEnter === null || onEnter === void 0 ? void 0 : onEnter();
},
placeholder: "Phone number",
className: "w-full py-3 bg-transparent border-none text-inherit placeholder-icon-text-light dark:placeholder-icon-text-dark focus:outline-none focus:ring-0 focus:border-none"
})]
});
}
export { PhoneInputBox };
//# sourceMappingURL=Inputs.mjs.map