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 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | 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 3x 3x 3x 3x 1x 1x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 2x 2x 2x 2x 2x | /**
* @file DeleteSupplierSearchResults.tsx
* @module dialogs/DeleteSupplierDialog/DeleteSupplierSearchResults
*
* @summary
* Search results list component.
* Displays supplier search results in interactive list.
*
* @enterprise
* - Pure presentation component
* - Interactive selection with hover effects
* - Displays supplier name and contact name
*/
import * as React from 'react';
import { Paper, Stack, Box, Typography } from '@mui/material';
import type { SupplierRow } from '../../../../api/suppliers/types';
/**
* Props for DeleteSupplierSearchResults component.
*
* @interface DeleteSupplierSearchResultsProps
*/
interface DeleteSupplierSearchResultsProps {
/** List of suppliers to display */
suppliers: SupplierRow[];
/** Called when user clicks on a supplier */
onSelectSupplier: (supplier: SupplierRow) => void;
}
/**
* Search results list for supplier deletion.
*
* Displays suppliers in interactive list with hover effects.
* Each item shows supplier name and contact name.
*
* @component
* @param props - Component props
* @returns JSX element with results list, or null if no results
*
* @example
* ```tsx
* <DeleteSupplierSearchResults
* suppliers={results}
* onSelectSupplier={handleSelect}
* />
* ```
*/
export const DeleteSupplierSearchResults: React.FC<DeleteSupplierSearchResultsProps> = ({
suppliers,
onSelectSupplier,
}) => {
if (suppliers.length === 0) {
return null;
}
return (
<Paper
variant="outlined"
sx={{
maxHeight: 300,
overflow: 'auto',
backgroundColor: '#fafafa',
}}
>
<Stack spacing={0}>
{suppliers.map((supplier) => (
<Box
key={supplier.id}
onClick={() => onSelectSupplier(supplier)}
sx={{
p: 1.5,
cursor: 'pointer',
borderBottom: '1px solid #e0e0e0',
transition: 'background-color 0.2s',
'&:hover': {
backgroundColor: '#e3f2fd',
},
'&:last-child': {
borderBottom: 'none',
},
}}
>
<Typography variant="body2" fontWeight={500}>
{supplier.name}
</Typography>
{supplier.contactName && (
<Typography variant="caption" color="text.secondary">
{supplier.contactName}
</Typography>
)}
</Box>
))}
</Stack>
</Paper>
);
};
|