Phone

1"use client";
2
3import parsePhoneNumberFromString, {
4  CountryCode,
5  E164Number,
6  getCountries,
7  getCountryCallingCode,
8} from "libphonenumber-js";
9import * as React from "react";
10
11import {
12  Command,
13  CommandEmpty,
14  CommandGroup,
15  CommandInput,
16  CommandItem,
17  CommandList,
18} from "@/components/ui/command";
19import { Flag } from "@/components/ui/flag";
20import {
21  InputGroup,
22  InputGroupAddon,
23  InputGroupInput,
24  InputGroupText,
25} from "@/components/ui/input-group";
26import {
27  Popover,
28  PopoverContent,
29  PopoverTrigger,
30} from "@/components/ui/popover";
31import { countryNames } from "@/lib/geo";
32import { cn } from "@/lib/utils";
33
34const codes: CountryCode[] = getCountries();
35
36type PhoneProps = React.ComponentProps<"input"> & {
37  value?: string;
38  searchPlaceholder: string;
39  emptyPlaceholder: string;
40};
41
42function Phone({
43  value,
44  onChange,
45  placeholder,
46  searchPlaceholder,
47  emptyPlaceholder,
48  ...props
49}: PhoneProps) {
50  const countries = React.useMemo(
51    () =>
52      [...codes].sort((a, b) => {
53        return countryNames[a].localeCompare(countryNames[b]);
54      }),
55    [],
56  );
57
58  const [country, setCountry] = React.useState<CountryCode>("US");
59  const [number, setNumber] = React.useState<string>("");
60  const [open, setOpen] = React.useState(false);
61
62  const inputRef = React.useRef<HTMLInputElement>(null);
63
64  const handleCountryChange = (newCountry: CountryCode) => {
65    setCountry(newCountry);
66    setOpen(false);
67    const fullNumber = parsePhoneNumberFromString(number, newCountry);
68    triggerOnChange(fullNumber?.number);
69  };
70
71  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
72    const filteredValue = e.target.value.replace(/[^0-9\-() ]/g, "");
73    setNumber(filteredValue);
74    const fullNumber = parsePhoneNumberFromString(filteredValue, country);
75    triggerOnChange(fullNumber?.number);
76  };
77
78  const triggerOnChange = (newNumber: E164Number | undefined) => {
79    if (!onChange || !inputRef.current) return;
80    const syntheticEvent = {
81      target: {
82        ...inputRef.current,
83        value: newNumber?.toString(),
84      },
85      currentTarget: inputRef.current,
86    } as React.ChangeEvent<HTMLInputElement>;
87    onChange(syntheticEvent);
88  };
89
90  const { name, className, ...groupProps } = props;
91
92  return (
93    <>
94      <InputGroup className={cn(className)}>
95        <InputGroupAddon
96          align="inline-start"
97// … truncated