Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x | /**
* @file DeleteSupplierSearchInput.tsx
* @module dialogs/DeleteSupplierDialog/DeleteSupplierSearchInput
*
* @summary
* Search input field component.
* Pure presentation with debounced input handling.
*
* @enterprise
* - Reusable search input component
* - Shows loading indicator during search
* - Disabled state during loading
*/
import * as React from 'react';
import { TextField, Box, CircularProgress } from '@mui/material';
import { useTranslation } from 'react-i18next';
/**
* Props for DeleteSupplierSearchInput component.
*
* @interface DeleteSupplierSearchInputProps
*/
interface DeleteSupplierSearchInputProps {
/** Current search query value */
value: string;
/** Called when user types in the input */
onChange: (query: string) => Promise<void>;
/** Whether search is loading */
isLoading: boolean;
}
/**
* Search input field for supplier deletion.
*
* Displays text input with loading indicator.
* Disabled during loading state.
*
* @component
* @param props - Component props
* @returns JSX element with search input
*
* @example
* ```tsx
* <DeleteSupplierSearchInput
* value={query}
* onChange={handleChange}
* isLoading={loading}
* />
* ```
*/
export const DeleteSupplierSearchInput: React.FC<DeleteSupplierSearchInputProps> = ({
value,
onChange,
isLoading,
}) => {
const { t } = useTranslation(['suppliers']);
return (
<Box sx={{ mb: 2 }}>
<TextField
fullWidth
size="small"
placeholder={t('suppliers:search.placeholder', 'Enter supplier name (min 2 chars)...')}
value={value}
onChange={(e) => onChange(e.target.value)}
disabled={isLoading}
InputProps={{
endAdornment: isLoading ? <CircularProgress size={20} /> : null,
}}
sx={{
'& .MuiOutlinedInput-root': {
backgroundColor: '#fafafa',
},
}}
/>
</Box>
);
};
|