React Autocomplete

import React, { useCallback, useState } from 'react'; import { CustomStore } from 'devextreme-react/common/data'; import { Autocomplete, type AutocompleteTypes } from 'devextreme-react/autocomplete'; import 'whatwg-fetch'; import { names, surnames, positions } from './data.ts'; import AspNetData from 'devextreme-aspnet-data-nojquery'; function isNotEmpty(value: string) { return value !== undefined && value !== null && value !== ''; } const positionLabel = { 'aria-label': 'Position' }; const position = positions[0]; const states = AspNetData.createStore({ loadUrl: 'https://js.devexpress.com/Demos/NetCore/api/DataGridStatesLookup', key: 'ID', }); const clientsStore = new CustomStore({ key: 'Value', useDefaultSearch: true, load: (loadOptions) => { let params = '?'; ['skip', 'take', 'filter'].forEach((option) => { if (option in loadOptions && isNotEmpty(loadOptions[option])) { params += `${option}=${JSON.stringify(loadOptions[option])}&`; } }); params = params.slice(0, -1); return fetch(`https://js.devexpress.com/Demos/NetCore/api/DataGridWebApi/CustomersLookup${params}`) .then((response) => response.json()) .then((data) => ({ data: data.data, })) .catch(() => { throw new Error('Data Loading Error'); }); }, }); const renderState = (data) => ( <span> {data.Name} ({data.Short}) </span> ); function App() { const [firstName, setFirstName] = useState(''); const [lastName, setLastName] = useState(''); const [state, setState] = useState(''); const [currentClient, setCurrentClient] = useState(''); const handleFirstNameChange = useCallback((e: AutocompleteTypes.ValueChangedEvent) => { setFirstName(e.value); }, []); const handleLastNameChange = useCallback((e: AutocompleteTypes.ValueChangedEvent) => { setLastName(e.value); }, []); const handleStateChange = useCallback((e: AutocompleteTypes.ValueChangedEvent) => { setState(e.value); }, []); const handleCurrentClientChange = useCallback((e: AutocompleteTypes.ValueChangedEvent) => { setCurrentClient(e.value); }, []); let fullInfo = ''; fullInfo += `${firstName || ''} ${lastName || ''}`.trim(); fullInfo += fullInfo && position ? `, ${position}` : position || ''; fullInfo += fullInfo && state ? `, ${state}` : state || ''; fullInfo += fullInfo && currentClient ? `, ${currentClient}` : currentClient || ''; return ( <div className="form"> <div className="dx-fieldset"> <div className="dx-fieldset-header">Default Mode</div> <div className="dx-field"> <div className="dx-field-label">First Name</div> <div className="dx-field-value"> <Autocomplete dataSource={names} value={firstName} onValueChanged={handleFirstNameChange} placeholder="Type first name..." /> </div> </div> </div> <div className="dx-fieldset"> <div className="dx-fieldset-header">With Clear Button</div> <div className="dx-field"> <div className="dx-field-label">Last Name</div> <div className="dx-field-value"> <Autocomplete dataSource={surnames} value={lastName} onValueChanged={handleLastNameChange} showClearButton={true} placeholder="Type last name..." /> </div> </div> </div> <div className="dx-fieldset"> <div className="dx-fieldset-header">Disabled</div> <div className="dx-field"> <div className="dx-field-label">Position</div> <div className="dx-field-value"> <Autocomplete dataSource={positions} value={position} disabled={true} inputAttr={positionLabel} /> </div> </div> </div> <div className="dx-fieldset"> <div className="dx-fieldset-header">Custom Item Template and Data Source Usage</div> <div className="dx-field"> <div className="dx-field-label">State</div> <div className="dx-field-value"> <Autocomplete dataSource={states} value={state} valueExpr="Name" onValueChanged={handleStateChange} placeholder="Type state name..." itemRender={renderState} /> </div> </div> </div> <div className="dx-fieldset"> <div className="dx-fieldset-header">Custom Store and Search Options</div> <div className="dx-field"> <div className="dx-field-label">Current Client</div> <div className="dx-field-value"> <Autocomplete dataSource={clientsStore} value={currentClient} valueExpr="Text" onValueChanged={handleCurrentClientChange} minSearchLength={2} searchTimeout={500} placeholder="Type client name..." /> </div> </div> </div> <div className="dx-fieldset"> <div className="dx-fieldset-header">Event Handling</div> <div className="employees-data"> Employee data: <span>{fullInfo}</span> </div> </div> </div> ); } export default App;