@nexusui/components
Version:
These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.
103 lines (102 loc) • 3.74 kB
TypeScript
import type { FocusEvent, KeyboardEvent, MouseEvent } from 'react';
import { TextFieldProps } from '@mui/material/TextField';
import { ICountry } from './country_data';
export interface ICountryInfo extends Pick<ICountry, 'name' | 'dialCode'> {
countryCode: string;
}
export interface IPhoneNumberProps extends Omit<TextFieldProps, 'onChange' | 'onBlur' | 'onClick'> {
/**
* Auto format phone number as the user types, e.g. 1234567890 -> (123) 456-7890
* @default true
*/
autoFormat?: boolean;
/**
* Allow user to edit country code inline in the input field to change the selected country.
* @default true
*/
countryCodeEditable?: boolean;
/**
* Default country to select, e.g., 'us' or 'cn'
* @default ''
*/
defaultCountry?: string;
/**
* Disable area codes,
* If this is set to false, each area code in the US will show as a separate entry in the country picker dropdown. If true, the US will be represented by a single entry in the dropdown.
* @default true
*/
disableAreaCodes?: boolean;
/**
* Disables the country code — it will not appear in the input
* @default false
*/
disableCountryCode?: boolean;
/**
* Disable country code dropdown. If you set it to true, the country flag/icon will also not be shown.
* @default false
*/
disableDropdown?: boolean;
/**
* Allow numbers longer than the selected country standard length. e.g., US phone numbers are 10 digits — setting this to true will allow you to enter more than 10 digits.
* @default false
*/
enableLongNumbers?: boolean;
/**
* The exclude countries is the array of country codes you want to exclude from the list
* e.g. ['us', 'uk', 'ua']
*/
excludeCountries?: ReadonlyArray<string>;
/**
* The high priority countries are the array of country codes you want to prioritize at the top of the list
* e.g. ['us', 'uk', 'ua']
* @default ['us', 'cn', 'fr', 'gb', 'es']
*/
highPriorityCountries?: ReadonlyArray<string>;
/**
* The function validates the phone number
* @param value
*/
isValid?: (value: string) => boolean;
/**
* List of allowable county codes to include in the list
* e.g. ['us', 'uk', 'ua']
*/
includeCountries?: ReadonlyArray<string>;
/**
* The regions to include in the input,
* e.g. regions: ['america', 'europe', 'asia', 'oceania', 'africa']
* subregions: ['north-america', 'south-america', 'central-america', 'caribbean', 'european-union', 'ex-ussr', 'middle-east', 'north-africa', 'sub-saharan-africa', 'south-east-asia', 'south-asia', 'east-asia', 'central-asia', 'oceania']
*/
regions?: string | ReadonlyArray<string>;
/**
* The onBlur event handler
* @param event
* @param country
*/
onBlur?: (event: FocusEvent<HTMLInputElement>, country: ICountryInfo) => void;
/**
* The onChange event handler
* @param value
* @param country
*/
onChange?: (value: string, country: ICountryInfo) => void;
/**
* The onClick event handler
* @param event
* @param country
*/
onClick?: (event: MouseEvent<HTMLInputElement>, country: ICountryInfo) => void;
/**
* The onEnterKeyPress event handler
* @param event
*/
onEnterKeyPress?: (event: KeyboardEvent<HTMLInputElement>) => void;
/**
* The onKeyDown event handler
* @param event
*/
onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
}
declare const PhoneNumber: (props: IPhoneNumberProps) => import("react/jsx-runtime").JSX.Element;
export default PhoneNumber;
export { PhoneNumber };