72 lines
3.0 KiB
JavaScript
72 lines
3.0 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import './Dialog.css';
|
|
|
|
const SelectionDialog = ({ show, handleClose, items, columns, onSelect }) => {
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [filteredItems, setFilteredItems] = useState(items);
|
|
|
|
useEffect(() => {
|
|
setFilteredItems(
|
|
items.filter(item =>
|
|
columns.some(column =>
|
|
item[column.key].toString().toLowerCase().includes(searchTerm.toLowerCase())
|
|
)
|
|
)
|
|
);
|
|
}, [searchTerm, items, columns]);
|
|
|
|
if (!show) return null;
|
|
|
|
return (
|
|
<>
|
|
<div className="modal-backdrop fade show"></div>
|
|
<div className="modal show d-block" tabIndex="-1">
|
|
<div className="modal-dialog">
|
|
<div className="modal-content">
|
|
<div className="modal-header">
|
|
<h5 className="modal-title">Выбор</h5>
|
|
<button type="button" className="close" onClick={handleClose}>
|
|
<span>×</span>
|
|
</button>
|
|
</div>
|
|
<div className="modal-body">
|
|
<input
|
|
type="text"
|
|
className="form-control mb-3"
|
|
placeholder="Поиск..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
/>
|
|
<table className="table table-bordered">
|
|
<thead>
|
|
<tr>
|
|
{columns.map(column => (
|
|
<th key={column.key}>{column.label}</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{filteredItems.map(item => (
|
|
<tr key={item.id} onClick={() => onSelect(item)}>
|
|
{columns.map(column => (
|
|
<td key={column.key}>{item[column.key]}</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div className="modal-footer">
|
|
<button type="button" className="btn btn-secondary" onClick={handleClose}>
|
|
Закрыть
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default SelectionDialog;
|