@cimpress/react-components/dist/esm/src/Phone.d.ts

React components to support the MCP styleguide

import React, { Component, CSSProperties } from 'react';
import { CountryCode, ParsedNumber } from 'libphonenumber-js';
import { PublicComponentProps } from './types';
export interface PhoneProps extends PublicComponentProps {
    disableStatus: any;
    /**
     * Optional set of country groups.
     * Every country group is represented by a member that has a name (that will be used as a label for this group)
     *   and a list of country codes to include (or * for all countries)
     */
    countryGroups?: {
        Frequent: string[];
        All: string[] | string;
    };
    /**
     * Overrides the label for the country code select dropdown.
     */
    countrySelectLabel?: string;
    /**
     * Additional CSS classes to apply to the country code select dropdown.
     */
    countrySelectClassName?: string;
    /**
     * Styles to be applied to the country select drop down menu.
     */
    countrySelectMenuStyle?: CSSProperties;
    /**
     * Set to true to prevent bootstrap styling on text inputs when phone number is invalid.
     */
    disableBsStatus?: boolean;
    /**
     * Overrides the label for the phone number text input.
     */
    extensionTextInputLabel?: string;
    /**
     * Additional CSS classes to apply to the extension text input.
     */
    extensionTextInputClassName?: string;
    /**
     * If included, the phone component will parse and prepopulate with the initial value on mount.
     */
    initialValue?: string;
    /**
     * Callback function that is fired when any part of the phone component changes.
     *
     * Note: Properly formatted numbers that do not exist will be considered invalid.
     */
    onChange: (value?: {
        number: string;
        isValid: boolean;
    }) => void;
    /**
     * Overrides the label for the phone number text input.
     */
    phoneTextInputLabel?: string;
    /**
     * Additional CSS classes to apply to the phone number text input.
     */
    phoneTextInputClassName?: string;
    /**
     * Selector component to use for the country selection (i.e. react-select-plus).
     *
     * If not specified - react-select will be used.
     */
    selectedSelect?: any;
    /**
     * Treats mounting the component as a change event. Useful for when passing an initial value.
     */
    triggerChangeOnMount?: boolean;
    /**
     * Deprecated: Set to true to prevent validation styling on text inputs when phone number is invalid.
     */
    disableBsStyling?: boolean;
}
interface PhoneStates {
    countryCode: CountryCode;
    minimumPhoneNumber: ParsedNumber | string;
    phone: string;
    extension: string;
    isFocusPhoneNumber: boolean;
}
/**
 * Builds a list (or a grouped structure) of select options to display in the country selector
 * @param {*} countryGroups - optional set of country code groups
 *            Example:
 *            {
 *              'Frequent': ['us', 'gb'],
 *              'All': '*'
 *            }
 * @returns the list/group structure of select options to be displayed in the country selector
 */
export declare const buildCountryList: (countryGroups?: {
    Frequent: string[];
    All: string[] | string;
}) => any;
export declare const getCountryCallingCode: (countryCode: string) => string;
export declare class Phone extends Component<PhoneProps, PhoneStates> {
    caretCorrection: any;
    wasDeletePressed: boolean;
    phoneNumberRef: React.RefObject<HTMLInputElement>;
    constructor(props: Readonly<PhoneProps>);
    componentDidMount(): void;
    componentDidUpdate(prevProps: Readonly<PhoneProps>): void;
    onChangeCountryCode(event: any): void;
    onPhoneNumberKeyPress(event: {
        key: string;
    }): void;
    onPhoneNumberChange(event: {
        target: any;
    }): void;
    onExtensionChange(event: {
        target: {
            value: string;
        };
    }): void;
    onChange(phone: string, extension: string): void;
    getNewCaretLocation(digitsBeforeCaret: number, phone: string): number;
    parseInitialPhoneNumber(number: string): any;
    render(): React.JSX.Element;
}
export {};
//# sourceMappingURL=Phone.d.ts.map