diff --git a/src/components/ElementSearchDialog/element-search-dialog.tsx b/src/components/ElementSearchDialog/element-search-dialog.tsx index 4666c4ce..357d2f76 100644 --- a/src/components/ElementSearchDialog/element-search-dialog.tsx +++ b/src/components/ElementSearchDialog/element-search-dialog.tsx @@ -5,21 +5,20 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import { ReactNode, useCallback, useMemo } from 'react'; -import { - Autocomplete, - Dialog, - DialogContent, - TextField, - AutocompleteInputChangeReason, - AutocompleteChangeReason, -} from '@mui/material'; +import { HTMLAttributes, ReactNode, useCallback, useMemo } from 'react'; +import { Autocomplete, Dialog, DialogContent, TextField } from '@mui/material'; import { Search, SearchOff } from '@mui/icons-material'; import { useIntl } from 'react-intl'; import { EquipmentInfos } from '../../index'; import * as React from 'react'; -interface ElementSearchDialogProps { +export type RenderElementProps = HTMLAttributes & { + element: EquipmentInfos; + inputValue: string; + onClose: () => void; +}; + +export interface ElementSearchDialogProps { open: boolean; onClose: () => void; searchingLabel?: string; @@ -27,7 +26,7 @@ interface ElementSearchDialogProps { onSearchTermChange: (searchTerm: string) => void; onSelectionChange: (selection: EquipmentInfos) => void; elementsFound: EquipmentInfos[]; - renderElement: (props: any) => ReactNode; + renderElement: (props: RenderElementProps) => ReactNode; searchTermDisabled?: boolean; searchTermDisableReason?: string; isLoading: boolean; @@ -54,9 +53,12 @@ const ElementSearchDialog = (props: ElementSearchDialogProps) => { const displayedValue = useMemo(() => { return searchTermDisabled || searchTermDisableReason - ? searchTermDisableReason - : searchTerm; - }, [searchTerm, searchTermDisabled, searchTermDisableReason]); + ? searchTermDisableReason ?? + intl.formatMessage({ + id: 'element_search/searchDisabled', + }) + : searchTerm ?? ''; + }, [searchTermDisabled, searchTermDisableReason, intl, searchTerm]); const handleClose = useCallback(() => { onSearchTermChange(''); @@ -77,48 +79,21 @@ const ElementSearchDialog = (props: ElementSearchDialogProps) => { id="element-search" forcePopupIcon={false} fullWidth - freeSolo - onInputChange={( - _event: React.SyntheticEvent, - value: string, - reason: AutocompleteInputChangeReason - ) => { - // if reason is equal to "reset", it means it programmatically changed (by selecting a result) - // we don't want to change "searchTerm" when clicking a result + onInputChange={(_event, value, reason) => { if (!searchTermDisabled && reason !== 'reset') { onSearchTermChange(value); } }} - onChange={( - _event: React.SyntheticEvent, - newValue: string | EquipmentInfos | null, - reason?: AutocompleteChangeReason - ) => { + onChange={(_event, newValue, reason) => { // when calling this method with reason == "selectOption", newValue can't be null or of type "string", since an option has been clicked on - if ( - newValue != null && - typeof newValue !== 'string' && - reason === 'selectOption' - ) { + if (newValue !== null && reason === 'selectOption') { onSelectionChange(newValue); } }} - getOptionLabel={(option: EquipmentInfos | string) => - typeof option === 'string' ? option : option.label + getOptionLabel={(option) => option.label} + isOptionEqualToValue={(option, value) => + option.id === value.id } - isOptionEqualToValue={( - option: EquipmentInfos | string, - value: EquipmentInfos | string - ) => { - if ( - typeof option === 'string' || - typeof value === 'string' - ) { - return option === value; - } else { - return option.id === value.id; - } - }} options={isLoading ? [] : elementsFound} loading={isLoading} loadingText={loadingText} @@ -126,11 +101,7 @@ const ElementSearchDialog = (props: ElementSearchDialogProps) => { noOptionsText={intl.formatMessage({ id: 'element_search/noResult', })} - renderOption={( - optionProps: any, - element: EquipmentInfos | string, - { inputValue }: { inputValue: string } - ) => + renderOption={(optionProps, element, { inputValue }) => renderElement({ ...optionProps, element, @@ -161,7 +132,7 @@ const ElementSearchDialog = (props: ElementSearchDialogProps) => { ), }} - value={displayedValue ?? ''} + value={displayedValue} /> )} disabled={searchTermDisabled} diff --git a/src/components/translations/element-search-en.ts b/src/components/translations/element-search-en.ts index c9b4bdf1..8998b966 100644 --- a/src/components/translations/element-search-en.ts +++ b/src/components/translations/element-search-en.ts @@ -8,6 +8,7 @@ const element_search_en = { 'element_search/label': 'Search for an element', 'element_search/noResult': 'No result', + 'element_search/searchDisabled': 'Search disabled', }; export default element_search_en; diff --git a/src/components/translations/element-search-fr.ts b/src/components/translations/element-search-fr.ts index 8df70413..2942a1a0 100644 --- a/src/components/translations/element-search-fr.ts +++ b/src/components/translations/element-search-fr.ts @@ -8,6 +8,7 @@ const element_search_fr = { 'element_search/label': 'Rechercher un élément', 'element_search/noResult': 'Aucun résultat', + 'element_search/searchDisabled': 'Recherche suspendue', }; export default element_search_fr;