بیایید ورودی شماره تلفن بین المللی را با React ، Tailwind CSS و UI بدون سر ایجاد کنیم

import { Field } from '@headlessui/react';

import { countryList } from './countryList.ts';
import { CountryCodeInput } from './CountryCodeInput';
import { PhoneNumberInput } from './PhoneNumberInput';

const App = () => {
  // ...
  return (
    <Field className="flex flex-col gap-2">
      <label className="cursor-pointer text-sm/6 font-medium" htmlFor={id}>
        Phone number:
      label>
      <div className="flex gap-3">
        <CountryCodeInput
          countryList={countryList}
          value={countryCode}
          onChange={handleCodeChange}
        />
        <PhoneNumberInput
          id={id}
          onChange={handlePhoneChange}
          value={phoneNumber}
        />
      div>
    Field>
  );
};

export default App;

import { useCallback, useState } from 'react';
import { countryList, CountryConfig } from './countryList.ts';

// phone number logic
const [phoneNumber, setPhoneNumber] = useState('');
const handlePhoneChange = useCallback((value: string) => {
  setPhoneNumber(value);
}, []);

// country code logic
const [countryCode, setCountryCode] = useState<CountryConfig['code']>('+1');

const handleCodeChange = useCallback((nextCode?: CountryConfig['code']) => {
  if (nextCode) {
    setCountryCode(nextCode);
  }
}, []);

type Code = `+${number | string}`;

export type CountryConfig = {
  flag: string;
  code: Code;
  name: string;
  mask?: string;
};

import { ChangeEvent, FC, useCallback } from 'react';
import classNames from 'classnames';
import { Input } from '@headlessui/react';
import { useMask } from './useMask.ts';

export type Props = {
  id: string;
  mask?: string;
  onChange: (value: string) => void;
  value: string;
};

export const PhoneNumberInput: FC<Props> = ({
  id,
  mask = '______________',
  onChange,
  value: valueProp,
}) => {
  const { options, hasEmptyMask, inputRef } = useMask({ mask });


  return (
    <Input
      placeholder={hasEmptyMask ? 'Phone number' : mask}
      ref={inputRef}
      id={id}
      className={classNames(
        'w-36 rounded-md bg-stone-100 px-2 py-1.5 text-sm/6 tabular-nums text-black',
        'focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-black/25',
      )}
      type="tel"
      onChange={handleChange}
      value={value}
    />
  );
};

import { format } from '@react-input/mask';

// ...

const value = format(valueProp, options);

const handleChange = useCallback(
  (event: ChangeEvent<HTMLInputElement>) => {
    onChange(format(event.target.value, options));
  },
  [onChange, options],
);

// src/PhoneNumberInput/PhoneNumberInput.tsx
const { options, hasEmptyMask, inputRef } = useMask({ mask });

import { useMemo } from 'react';
import { useMask as useMaskVanilla,  } from '@react-input/mask';

export type Props = {
  mask: string;
};

export const useMask = ({ mask }: Props) => {
  const options = useMemo(
    () => ({
      mask,
      replacement: { _: /\d/ },

    }),
    [mask],
  );

  const inputRef = useMaskVanilla(options);

  const hasEmptyMask = mask.split('').every((char) => {
    return char === '_';
  });

  return { options, inputRef, hasEmptyMask };
};

export type Props = {
  countryList: CountryConfig[];
  value: CountryConfig['code'];
  onChange: (value?: CountryConfig['code']) => void;
};

const [countryList, setCountryList] = useState(countryListProp);

useEffect(() => {
  setCountryList(countryListProp);
}, [countryListProp]);

<div className="w-24">
  <Listbox value={selected} onChange={handleSelect}>
    <ListboxButton
      className={classNames(
        'relative w-full rounded-md bg-stone-100 px-2 py-1.5 text-sm/6 text-black',
        'flex items-center gap-1',
        'focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-black/25',
      )}
    >
      <span>{selectedFlag}span>
      <span className="ml-auto grow-0">{selected}span>

      <Icon className="group pointer-events-none size-3.5 shrink-0 text-black/60" name="caret-down" />
    ListboxButton>
    <ListboxOptions
      anchor={ANCHOR_PROP}
      transition
      className={classNames(
        'w-56 rounded-md border border-stone-300 bg-stone-100 focus-visible:outline-none',
        'flex flex-col',
        'origin-top transition duration-200 ease-in data-[closed]:scale-95 data-[closed]:opacity-0',
        'shadow-md shadow-black/20',
      )}
    >
      {countryListProp.length > 5 && (
        <div className=" border-b-2 border-b-black/10 p-2">
          <Input
            value={filter}
            onChange={setFilter}
            placeholder="Country name"
            className={classNames(
              'max-w-full rounded-full bg-stone-200 px-4 py-1 text-sm/6 text-black ',
              'focus:bg-white focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-black/25',
            )}
          />
        div>
      )}
      <div className="max-h-48 grow overflow-auto">
        {countryList.map(({ code, flag, name }) => (
          <ListboxOption
            key={code}
            value={code}
            className="group flex cursor-pointer select-none items-center gap-1 p-1.5 data-[focus]:bg-black/10"
          >
            <div className="size-4">
              <Icon className="invisible size-4 text-black group-data-[selected]:visible" name="check" />
            div>
            {flag}
            <div className="w-9 shrink-0 text-right text-sm/6 tabular-nums text-black">
              {code}
            div>
            <div className="truncate text-sm/6 text-black/65 group-data-[hover]:text-black">
              {name}
            div>
          ListboxOption>
        ))}
      div>
    ListboxOptions>
  Listbox>
div>

// src/CountryCodeInput/CountryCodeInput.tsx
const { selectedFlag, handleSelect, selected } = useCountrySelect({
  onChange,
  countryListProp,
  value,
});

import {
  useCallback,
  useEffect,
  useMemo,
  useState,
} from 'react';
import { CountryConfig } from '../countryList.ts';

export type Props = {
  countryListProp: CountryConfig[];
  value: CountryConfig['code'];
  onChange: (value?: CountryConfig['code']) => void;
};

export const useCountrySelect = ({
  value,
  onChange,
  countryListProp,
}: Props) => {
  const [selected, setSelected] = useState(value);

  useEffect(() => {
    setSelected(value);
  }, [value]);

  const handleSelect = useCallback(
    (selectedCode: CountryConfig['code']) => {
      onChange(selectedCode);
      setSelected(selectedCode);
    },
    [onChange],
  );

  const selectedFlag = useMemo(
    () => countryListProp.find(({ code }) => code === selected)?.flag,
    [countryListProp, selected],
  );

  return { selected, handleSelect, selectedFlag };
};

// src/CountryCodeInput/CountryCodeInput.tsx
const { filter, setFilter } = useCountryFilter({
  setCountryList,
  countryListProp,
});

import { ChangeEvent, useCallback, useState, Dispatch, SetStateAction } from 'react';
import { CountryConfig } from '../countryList.ts';

export type Props = {
  countryListProp: CountryConfig[];
  setCountryList: Dispatch<SetStateAction<CountryConfig[]>>;
}

export const useCountryFilter = ({setCountryList, countryListProp}: Props) => {
  const [filter, setFilterState] = useState('');

  const setFilter = useCallback(
    (event: ChangeEvent<HTMLInputElement>) => {
      setFilterState(event.target.value);
      const nextCountries = countryListProp.filter(({ name }) =>
        name.toLowerCase().includes(event.target.value.toLowerCase()),
      );
      if (event.target.value !== '') {
        setCountryList(nextCountries);
      } else {
        setCountryList(countryListProp);
      }
    },
    [countryListProp, setCountryList],
  );

  return {filter, setFilter}
}

{countryList.length === 0 && (
  <div className="py-1.5 text-center text-sm/6 text-black/65">
    No results.
  div>
)}