Text Autocomplete

Il componente Autocomplete viene utilizzato all’interno di form dove viene richiesto all’utente di scegliere tra dei valori predefiniti. Il componente è formato da <Autocomplete> come wrapper e da <RenderInputAutocomplete> contenente la lista dei valori

Codice

Sede operativa

interface Sede {
	codice: number
	descrizione: string
}
 
const sede_mockup: Sede[] = [
	{codice: 2039, descrizione: "Trebaseleghe"},
	{codice: 2340, descrizione: "Bassano"},
	{codice: 3265, descrizione: "Bergamo"}
]
 
const [sedeSelezionata, setSedeSelezionata] = useState<Sede | undefined>({codice: 2340, descrizione: "Bassano"})
 
const handleChangeSede = (_: unknown, sede: Sede | null) => {
  if (sede) {
    setSedeSelezionata(sede)
    return
  }
  setSedeSelezionata(undefined)
}
 
return (
  <Autocomplete
    value={sedeSelezionata}
    onChange={handleChangeSede}
    size="small"
    options={sede_mockup}
    getOptionLabel={(opt: Sede) => `${opt.codice} - ${opt.descrizione}`}
    renderInput={params => (
      <RenderInputAutocomplete
        label="Sede operativa"
        name="sedeOperativa"
        placeholder={"Selezionare"}
        {...params}
      />
    )}
    noOptionsText="Nessun risultato"
  />
)

Autocomplete

Proprietà obbligatorie

Name	Signature	Description
options	`array`	Lista oggetti tra i quali scegliere
renderInput	`(params: object) => ReactNode`	Componente input da renderizzare

Proprietà aggiuntive

Name	Signature	Description
value	`object`	oggetto preselezionato
onChange	`function(event: React.SyntheticEvent, value: Value \| Array, reason: string, details?: string) => void`	Funzione lanciata dopo un cambio di valore
size	`'small' \| 'medium' \| string`	Dimensione del componente
getOptionLabel	`func`	Funzione utilizzata per il render grafico degli elementi all’interno della lista

RenderInputAutocomplete

Proprietà obbligatorie

Name	Signature	Description
name	`string`	nome del campo
placeholder	`string`	Etichetta visualizzata prima dell’input utente

Proprietà aggiuntive

Name	Signature	Description
label	`string`	Etichetta del campo

Text input ToastProvider