Autocomplete
Import
import { Autocomplete } from '@resultadosdigitais/tangram-components'
Properties
value
| Type | object | array |
|---|
Description
Sets the Autocomplete value. Providing an empty object will set no value.
Used for controlled component.
defaultValue
| Type | object | array |
|---|
Description
Sets the Autocomplete default value. Providing an empty object will set no value.
Used for uncontrolled component.
options
| Type | arrayOf(object) |
|---|---|
| Default | [] |
Description
Sets all options displayed by the Autocomplete's dropdown.
const options = [{value: '104f597f-63cc-4717-84b2-ac0086d13a9a', label: 'Joel'}, {value: '9a18a955-e615-405b-90c8-a939daaefe51', label: 'Ellie'}]
getOptionLabel
| Type | func |
|---|---|
| Param | option Object - The option. |
| Returns | (String|Number) - A string or number to be used as label. |
Description
A function used to customize and return the label of each option.
If this property is undefined, your option must have a label property.
Only works when options property is defined.
const options = [{id: '104f597f-63cc-4717-84b2-ac0086d13a9a', name: 'Joel'}, {id: '9a18a955-e615-405b-90c8-a939daaefe51', name: 'Ellie'}]
const getOptionLabel = (option) => option.name
getOptionValue
| Type | func |
|---|---|
| Param | option Object - The option. |
| Returns | (String|Number) - A string or number to be used as value. |
Description
A function used to customize and return the value of each option.
If this property is undefined, your option must have a value property.
Only works when options property is defined.
const options = [{id: '104f597f-63cc-4717-84b2-ac0086d13a9a', name: 'Joel'}, {id: '9a18a955-e615-405b-90c8-a939daaefe51', name: 'Ellie'}]
const getOptionValue = (option) => option.id
placeholder
multiple
| Type | bool |
|---|---|
| Default | false |
Description
Sets multiple selection.
When it is true, the value or the defaultValue must be an array.
kind
loading
disabled
| Type | bool |
|---|---|
| Default | false |
Description
When it is true, makes the element not mutable, focusable, or even submitted with the form.
The user can neither edit nor focus on the control.
id
| Type | string | number |
|---|
Description
This property is used to implement accessibility logic. If you don't provide a value for this property then it will be generated randomly.
name
hideClear
renderNoOption
| Type | string | func |
|---|---|
| Param | inputValue String - The input value. |
Description
Sets the text to be displayed when an option with the label typed in the input does not exists. If you want to customize the renderization of this property, you must pass a component instead.
renderNoOption="No option found"
renderNoOption={(inputValue) => <Text>No "{inputValue}" found</Text>}
renderFooter
| Type | string | func |
|---|---|
| Param | props Object - Object with information available for rendering the footer in case the attribute value is a function. |
Description
Sets the footer.
// Can be a string:
renderFooter="My footer"
// Or a function:
renderFooter={({ inputValue, hasOption, close, selectedOption }) => <Button onClick={() => myFunction(selectedOption)}>Add "{inputValue}"</Button>}
onChange
| Type | func |
|---|---|
| Param | event React.SyntheticEvent - The event source of the callback. |
| Param | value (Object|Object[]) - The selected value. When multiple is true, the value is an array. |
| Param | payload Object - Additional information about component status. |
Description
Callback triggered when the value requests to be changed.
onClear
| Type | func |
|---|---|
| Param | event React.SyntheticEvent - The event source of the callback. |
Description
Callback triggered when the clear button is clicked.
onInputChange
| Type | func |
|---|---|
| Param | event React.SyntheticEvent - The event source of the callback. |
| Param | inputValue String - The input value. |
| Param | payload Object - Additional information about component status. |
Description
Callback triggered when the inputValue changes.
onClose
| Type | func |
|---|---|
| Param | event React.SyntheticEvent - The event source of the callback. |
| Param | reason String - Can be Autocomplete.closeReasons.clear, Autocomplete.closeReasons.blur, Autocomplete.closeReasons.escape or Autocomplete.closeReasons.clickOption. |
Description
Callback triggered when the Autocomplete closes.
onOpen
| Type | func |
|---|---|
| Param | event React.SyntheticEvent - The event source of the callback. |
Description
Callback triggered when the Autocomplete opens.
<AutocompleteDivider />
Import
import { AutocompleteDivider } from '@resultadosdigitais/tangram-components'
<AutocompleteOption />
Import
import { AutocompleteOption } from '@resultadosdigitais/tangram-components'
Properties
disabled
label 📍
value
auxiliaryText
truncate
| Type | bool |
|---|
Description
Identifies that the label and the auxiliary text will be truncated when it exceeds the available size.
icon
| Type | node |
|---|
Description
Sets icon to be displayed at the beginning of the item.
This property is ignored when the Autocomplete multiple property is true.
suffix
<AutocompleteTitle />
Import
import { AutocompleteTitle } from '@resultadosdigitais/tangram-components'