Phone
Import
import { Phone } from '@resultadosdigitais/tangram-components'
Properties
value
| Type | any |
|---|
Description
Sets input's value. Equivalent to the defaultValue, the component Phone is not controllable.
If present, this property must always come with the + sign and country calling code,
for example: "+5522999213445", "+55 (22) 99921-3445" are correct,
but "5522999213445", "55 (22) 99921-3445", "(22) 99921-3445"
are incorrect.
defaultValue
| Type | any |
|---|
Description
Sets input's value.
If present, this property must always come with the + sign and country calling code,
for example: "+5522999213445", "+55 (22) 99921-3445" are correct,
but "5522999213445", "55 (22) 99921-3445", "(22) 99921-3445"
are incorrect.
defaultCountry
| Type | Phone.allowedCountries |
|---|
Description
Country code initially selected when value and defaultValue are not present.
If this property is not present, as well as value and defaultValue,
the component will try to infer the country code through browser language,
or will initialize with the Brazil code ("BR") by default.
disabled
error
onChange
| Type | func |
|---|---|
| Param | event React.SyntheticEvent - The event source of the callback. |
| Param | phone string - The input phone number, without mask, with the country calling code. |
| Param | infos object - Additional information about component status. |
Description
Callback fired when the value changes.
onClear
| Type | func |
|---|---|
| Param | event React.SyntheticEvent - The event source of the callback. |
| Param | phone string - The input phone number. In this event, it will always be an empty string (''). |
| Param | infos object - Additional information about component status. |
Description
A callback called when the clear button is clicked.
onBlur
| Type | func |
|---|---|
| Param | event React.SyntheticEvent - The event source of the callback. |
| Param | phone string - The input phone number, without mask, with the country calling code. |
| Param | infos object - Additional information about component status. |
Description
Callback fired when the input is blurred.
onFocus
| Type | func |
|---|---|
| Param | event React.SyntheticEvent - The event source of the callback. |
| Param | phone string - The input phone number, without mask, with the country calling code. |
| Param | infos object - Additional information about component status. |
Description
Callback fired when the input is focused.
countryNames
| Type | objectOf |
|---|---|
| Default | Phone.translations.en.countryNames |
Description
Custom name for countries.
It should be an object in the format { US: 'Estados Unidos', BR: 'Brasil', ... }.
The list with the allowed country codes by the component can be consulted
under Phone.allowedCountries.
Preset values for English, Brazilian Portuguese and Spanish are available
in Phone.translations.en.countryNames, Phone.translations.ptBR.countryNames and
Phone.translations.es.countryNames.
countryCallingCodeLabelText
| Type | string |
|---|---|
| Default | Phone.translations.en.countryCallingCode |
Description
Custom text for the label that identifies the country calling code in the component. This text is not displayed on the screen.
Preset values for English, Brazilian Portuguese and Spanish are available
in Phone.translations.en.countryCallingCode,
Phone.translations.ptBR.countryCallingCode and
Phone.translations.es.countryCallingCode.
selectedCountryLabelText
| Type | string |
|---|---|
| Default | Phone.translations.en.selectedCountry |
Description
Custom text for the label that identifies the country list in the component. This text is not displayed on the screen.
Preset values for English, Brazilian Portuguese and Spanish are available
in Phone.translations.en.selectedCountry,
Phone.translations.ptBR.selectedCountry and
Phone.translations.es.selectedCountry.
clearLabelText
| Type | string |
|---|---|
| Default | Phone.translations.en.clear |
Description
Custom text for the label that identifies the clear icon in the component. This text is not displayed on the screen.
Preset values for English, Brazilian Portuguese and Spanish are available
in Phone.translations.en.clear,
Phone.translations.ptBR.clear and
Phone.translations.es.clear.
unidentifiedCountryTooltip
| Type | string |
|---|---|
| Default | Phone.translations.en.unidentifiedCountry |
Description
Custom text for the tooltip displayed when the country cannot be identified.
Preset values for English, Brazilian Portuguese and Spanish are available
in Phone.translations.en.unidentifiedCountry,
Phone.translations.ptBR.unidentifiedCountry and
Phone.translations.es.unidentifiedCountry.