Introduce PhoneInput component See merge request soapbox-pub/soapbox-fe!1632environments/review-develop-3zknud/deployments/554
Alex Gleason
2 years ago
commit
04ff9de05d
@ -0,0 +1,25 @@
|
||||
import React from 'react';
|
||||
|
||||
import { COUNTRY_CODES, CountryCode } from 'soapbox/utils/phone';
|
||||
|
||||
interface ICountryCodeDropdown {
|
||||
countryCode: CountryCode,
|
||||
onChange(countryCode: CountryCode): void,
|
||||
}
|
||||
|
||||
/** Dropdown menu to select a country code. */
|
||||
const CountryCodeDropdown: React.FC<ICountryCodeDropdown> = ({ countryCode, onChange }) => {
|
||||
return (
|
||||
<select
|
||||
value={countryCode}
|
||||
className='h-full py-0 pl-3 pr-7 text-base bg-transparent border-transparent focus:outline-none focus:ring-primary-500 dark:text-white sm:text-sm rounded-md'
|
||||
onChange={(event) => onChange(event.target.value as any)}
|
||||
>
|
||||
{COUNTRY_CODES.map((code) => (
|
||||
<option value={code} key={code}>+{code}</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
};
|
||||
|
||||
export default CountryCodeDropdown;
|
||||
@ -0,0 +1,81 @@
|
||||
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}
|
||||
addon={
|
||||
<CountryCodeDropdown
|
||||
countryCode={countryCode}
|
||||
onChange={setCountryCode}
|
||||
/>
|
||||
}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default PhoneInput;
|
||||
@ -1,29 +0,0 @@
|
||||
import { formatPhoneNumber } from '../phone';
|
||||
|
||||
describe('Phone unit tests', () => {
|
||||
it('Properly formats', () => {
|
||||
let number = '';
|
||||
expect(formatPhoneNumber(number)).toEqual('');
|
||||
|
||||
number = '5';
|
||||
expect(formatPhoneNumber(number)).toEqual('+1 (5');
|
||||
|
||||
number = '55';
|
||||
expect(formatPhoneNumber(number)).toEqual('+1 (55');
|
||||
|
||||
number = '555';
|
||||
expect(formatPhoneNumber(number)).toEqual('+1 (555');
|
||||
|
||||
number = '55513';
|
||||
expect(formatPhoneNumber(number)).toEqual('+1 (555) 13');
|
||||
|
||||
number = '555135';
|
||||
expect(formatPhoneNumber(number)).toEqual('+1 (555) 135');
|
||||
|
||||
number = '5551350';
|
||||
expect(formatPhoneNumber(number)).toEqual('+1 (555) 135-0');
|
||||
|
||||
number = '5551350123';
|
||||
expect(formatPhoneNumber(number)).toEqual('+1 (555) 135-0123');
|
||||
});
|
||||
});
|
||||
@ -1,33 +1,17 @@
|
||||
/** List of supported E164 country codes. */
|
||||
const COUNTRY_CODES = [
|
||||
'1',
|
||||
'44',
|
||||
] as const;
|
||||
|
||||
function removeFormattingFromNumber(number = '') {
|
||||
if (number) {
|
||||
return number.toString().replace(/\D/g, '');
|
||||
}
|
||||
/** Supported E164 country code. */
|
||||
type CountryCode = typeof COUNTRY_CODES[number];
|
||||
|
||||
return number;
|
||||
}
|
||||
/** Check whether a given value is a country code. */
|
||||
const isCountryCode = (value: any): value is CountryCode => COUNTRY_CODES.includes(value);
|
||||
|
||||
function formatPhoneNumber(phoneNumber = '') {
|
||||
let formattedPhoneNumber = '';
|
||||
let strippedPhone = removeFormattingFromNumber(phoneNumber);
|
||||
if (strippedPhone.slice(0, 1) === '1') {
|
||||
strippedPhone = strippedPhone.slice(1);
|
||||
}
|
||||
|
||||
for (let i = 0; i < strippedPhone.length && i < 10; i++) {
|
||||
const character = strippedPhone.charAt(i);
|
||||
if (i === 0) {
|
||||
const prefix = '+1 (';
|
||||
formattedPhoneNumber += prefix + character;
|
||||
} else if (i === 3) {
|
||||
formattedPhoneNumber += `) ${character}`;
|
||||
} else if (i === 6) {
|
||||
formattedPhoneNumber += `-${character}`;
|
||||
} else {
|
||||
formattedPhoneNumber += character;
|
||||
}
|
||||
}
|
||||
return formattedPhoneNumber;
|
||||
}
|
||||
|
||||
export { formatPhoneNumber };
|
||||
export {
|
||||
COUNTRY_CODES,
|
||||
CountryCode,
|
||||
isCountryCode,
|
||||
};
|
||||
|
||||
Loading…
Reference in new issue