kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
82 wiersze
2.6 KiB
TypeScript
82 wiersze
2.6 KiB
TypeScript
import { parsePhoneNumber, AsYouType } from 'libphonenumber-js';
|
|
import React, { useState, useEffect } from 'react';
|
|
|
|
import { CountryCode } from 'soapbox/utils/phone';
|
|
|
|
import Input from '../input/input';
|
|
|
|
import CountryCodeDropdown from './country-code-dropdown';
|
|
|
|
interface IPhoneInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'required' | 'autoFocus'> {
|
|
/** E164 phone number. */
|
|
value?: string
|
|
/** Change handler which receives the E164 phone string. */
|
|
onChange?: (phone: string | undefined) => void
|
|
/** Country code that's selected on mount. */
|
|
defaultCountryCode?: CountryCode
|
|
}
|
|
|
|
/** Internationalized phone input with country code picker. */
|
|
const PhoneInput: React.FC<IPhoneInput> = (props) => {
|
|
const { value, onChange, defaultCountryCode = '1', ...rest } = props;
|
|
|
|
const [countryCode, setCountryCode] = useState<CountryCode>(defaultCountryCode);
|
|
const [nationalNumber, setNationalNumber] = useState<string>('');
|
|
|
|
const handleChange: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
|
|
// HACK: AsYouType is not meant to be used this way. But it works!
|
|
const asYouType = new AsYouType({ defaultCallingCode: countryCode });
|
|
const formatted = asYouType.input(target.value);
|
|
|
|
// If the new value is the same as before, we might be backspacing,
|
|
// so use the actual event value instead of the formatted value.
|
|
if (formatted === nationalNumber && target.value !== nationalNumber) {
|
|
setNationalNumber(target.value);
|
|
} else {
|
|
setNationalNumber(formatted);
|
|
}
|
|
};
|
|
|
|
// When the internal state changes, update the external state.
|
|
useEffect(() => {
|
|
if (onChange) {
|
|
try {
|
|
const opts = { defaultCallingCode: countryCode, extract: false } as any;
|
|
const result = parsePhoneNumber(nationalNumber, opts);
|
|
|
|
// Throw if the number is invalid, but catch it below.
|
|
// We'll only ever call `onChange` with a valid E164 string or `undefined`.
|
|
if (!result.isPossible()) {
|
|
throw result;
|
|
}
|
|
|
|
onChange(result.format('E.164'));
|
|
} catch (e) {
|
|
// The value returned is always a valid E164 string.
|
|
// If it's not valid, it'll return undefined.
|
|
onChange(undefined);
|
|
}
|
|
}
|
|
}, [countryCode, nationalNumber]);
|
|
|
|
useEffect(() => {
|
|
handleChange({ target: { value: nationalNumber } } as any);
|
|
}, [countryCode, nationalNumber]);
|
|
|
|
return (
|
|
<Input
|
|
onChange={handleChange}
|
|
value={nationalNumber}
|
|
prepend={
|
|
<CountryCodeDropdown
|
|
countryCode={countryCode}
|
|
onChange={setCountryCode}
|
|
/>
|
|
}
|
|
{...rest}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default PhoneInput;
|