import React from 'react'; import { InputProps, SelectProps, TypographyProps } from '@bigbinary/neetoui'; import { CountryCode } from 'libphonenumber-js'; import { StringSchema } from 'yup'; interface PhoneNumberInputProps extends InputProps { value?: string; onChange?: (value: string) => any; className?: string; selectProps?: SelectProps; error?: string; initialCountryCode?: string; } interface FormikPhoneNumberInputProps extends PhoneNumberInputProps { name: string; } interface PhoneNumberProps extends TypographyProps { className?: string; defaultCountry?: string; children?: React.ReactNode; showEmoji?: boolean; linkable?: boolean; linkPrefix?: string; showCopyButton?: boolean; value?: string; } declare const PhoneNumberInput: React.ForwardRefExoticComponent; declare const FormikPhoneNumberInput: React.ForwardRefExoticComponent; /** * * An input component to input and validate phone numbers with a country code * * picker. The default country code will be detected automatically based on the * * location of the user's ip address. We are leveraging neetoIpLookupWeb for the * * same. * * ![PhoneNumberInput](https://user-images.githubusercontent.com/35297280/231367938-93aa94b0-2a8c-44b3-b1c7-8c60843e40c4.png|height=200|width=300) * * @example * * import { useState } from "react"; * * import { PhoneNumberInput } from "@bigbinary/neeto-molecules/PhoneNumber"; * * const App = () => { * const [phoneNumber, setPhoneNumber] = useState(""); * * return ; * }; * @endexample * A typography component to display phone numbers along with the flag of the * * country associated with it. * * ![PhoneNumber](https://user-images.githubusercontent.com/35297280/231367945-ee5f0921-92e3-4086-a8e2-f9ab63cf9a37.png|height=200|width=300) * * @example * * import { PhoneNumber } from "@bigbinary/neeto-molecules/PhoneNumber"; * * const App = () => ; * @endexample * The PhoneNumberInput component wrapped in Formik. * * @example * * import { FormikPhoneNumberInput, validation } from "@bigbinary/neeto-molecules/PhoneNumber"; * import { Form } from "@bigbinary/neetoui/formik"; * * const App = () => ( * return ( *
alert(phoneNumber), * }} * > * * * ); * ); * @endexample * A utility function that exports a Yup validation schema to be used in Formik. It * * accepts a string as an optional argument to override the default validation * * message. * * @example * * import { validation } from "@bigbinary/neeto-molecules/PhoneNumber"; * import * as yup from "yup"; * * const VALIDATION_SCHEMA = yup.object({ * phoneNumber: validation("Phone number is invalid"), * }); * @endexample * A utility function to check whether a phone number is valid. It accepts a phone * * number and a default country as argument and returns a boolean value specifying * * whether the phone number is valid or not. * */ declare const PhoneNumber: React.FC; declare const isPhoneNumberValid: (phoneNumber: string, defaultCountry?: CountryCode | { defaultCountry?: CountryCode; defaultCallingCode?: string; }) => boolean; declare const validation: (message?: string) => StringSchema; export { FormikPhoneNumberInput, PhoneNumber, PhoneNumberInput, isPhoneNumberValid, validation }; export type { FormikPhoneNumberInputProps, PhoneNumberInputProps, PhoneNumberProps };