Phone Input

1"use client";
2 
3import {
4  Popover,
5  PopoverContent,
6  PopoverTrigger,
7} from "@/components/ui/popover";
8import { useDisclosure } from "@/hooks/use-disclosure";
9import { Input, type InputProps } from "@/components/ui/input";
10import { Check, ChevronDown } from "lucide-react";
11import { useEffect, useState } from "react";
12 
13interface PhoneCode {
14  name: string;
15  flag: string;
16  dialCode: string;
17  mask?: string;
18}
19 
20interface PhoneInputProps
21  extends Omit<InputProps, "value" | "onChange" | "startContent"> {
22  items: PhoneCode[];
23  value?: string;
24  onChange?: (value: string) => void;
25}
26 
27const PhoneInput = ({
28  items,
29  variant,
30  placeholder,
31  disabled,
32  value,
33  onChange,
34  ...props
35}: PhoneInputProps) => {
36  const [selectedItem, setSelectedItem] = useState(items[0]);
37  const [phoneNumber, setPhoneNumber] = useState("");
38  const { open, onClose, onOpenChange } = useDisclosure();
39 
40  const handleCountrySelect = (country: PhoneCode) => {
41    setSelectedItem(country);
42    onClose();
43    onChange?.(`${country.dialCode} ${phoneNumber}`);
44  };
45 
46  const handlePhoneNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
47    const newNumber = e.target.value;
48    if (newNumber !== "" && !/^[0-9]+$/.test(newNumber)) {
49      return;
50    }
51    setPhoneNumber(newNumber);
52    onChange?.(`${selectedItem.dialCode} ${newNumber}`);
53  };
54 
55  useEffect(() => {
56    if (value) {
57      const match = value.match(/^\+\d{1,3}\s\d{7,14}$/);
58      if (match) {
59        const [dialCode, phoneNumber] = match[0].split(" ");
60        setSelectedItem(items.find((c) => c.dialCode === dialCode) || items[0]);
61        setPhoneNumber(phoneNumber);
62      }
63    }
64  }, []);
65 
66  return (
67    <Input
68      {...props}
69      value={phoneNumber}
70      onChange={handlePhoneNumberChange}
71      disabled={disabled}
72      variant={variant}
73      placeholder={placeholder ?? selectedItem.mask}
74      startContent={
75        <div className="h-full flex items-center">
76          <Popover open={open} onOpenChange={onOpenChange}>
77            <PopoverTrigger asChild disabled={disabled}>
78              <button
79                type="button"
80                data-disabled={disabled?.toString()}
81                className="flex items-center justify-between gap-1 text-sm cursor-pointer data-[disabled=true]:cursor-not-allowed"
82              >
83                <div className="flex items-center gap-1">
84                  <span className="text-base">{selectedItem.flag}</span>
85// … truncated