123 lines
3.0 KiB
JavaScript
123 lines
3.0 KiB
JavaScript
import { FormControl, MenuItem, Select } from '@mui/material';
|
|
import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
import { useRealtimeActions, useVspOptions } from '../../contexts/RealtimeContext';
|
|
|
|
const EDITOR_STYLES = {
|
|
position: 'absolute',
|
|
zIndex: 12,
|
|
top: 0,
|
|
};
|
|
|
|
const VspDropdownEditCell = memo(({ refCell, onChange, disabled, value, table }) => {
|
|
const { endEditing: contextEndEditing } = useRealtimeActions();
|
|
const vspOptions = useVspOptions();
|
|
|
|
const [selectedValue, setSelectedValue] = useState(() => value ?? '');
|
|
const [position, setPosition] = useState();
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const refFinished = useRef(false);
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
setOpen(true);
|
|
}, 80);
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
|
|
useLayoutEffect(() => {
|
|
if (!refCell?.current) return;
|
|
|
|
const td = refCell.current.offsetParent;
|
|
const tr = td?.offsetParent;
|
|
|
|
if (td && tr) {
|
|
setPosition({
|
|
left: td.offsetLeft,
|
|
width: td.offsetWidth,
|
|
translateY: tr.style.transform || '',
|
|
});
|
|
}
|
|
}, [refCell]);
|
|
|
|
const finishEditing = useCallback(() => {
|
|
if (refFinished.current) return;
|
|
refFinished.current = true;
|
|
table.setEditingCell(null);
|
|
const editingCell = table.getState().editingCell;
|
|
if (editingCell) {
|
|
contextEndEditing?.(editingCell.row, editingCell.column);
|
|
}
|
|
}, [table, contextEndEditing]);
|
|
|
|
const handleSelectChange = useCallback(
|
|
(e) => {
|
|
const val = e.target.value;
|
|
if (val == null || val === '') return;
|
|
refFinished.current = true;
|
|
setSelectedValue(val);
|
|
onChange?.(val);
|
|
const editingCell = table.getState().editingCell;
|
|
if (editingCell) {
|
|
contextEndEditing?.(editingCell.row, editingCell.column);
|
|
}
|
|
},
|
|
[onChange, table, contextEndEditing],
|
|
);
|
|
|
|
const handleSelectClose = useCallback(
|
|
(_event, reason) => {
|
|
if (reason === 'selectOption') return;
|
|
finishEditing();
|
|
},
|
|
[finishEditing],
|
|
);
|
|
|
|
const editorStyles = useMemo(
|
|
() => ({
|
|
...EDITOR_STYLES,
|
|
left: position?.left || 0,
|
|
width: position?.width || 0,
|
|
transform: position?.translateY || 0,
|
|
}),
|
|
[position],
|
|
);
|
|
|
|
return (
|
|
<tr>
|
|
<td>
|
|
{position && (
|
|
<div style={editorStyles}>
|
|
<FormControl fullWidth size='small'>
|
|
<Select
|
|
value={selectedValue}
|
|
onChange={handleSelectChange}
|
|
open={open}
|
|
onClose={handleSelectClose}
|
|
displayEmpty
|
|
disabled={disabled}
|
|
MenuProps={{
|
|
anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
|
|
transformOrigin: { vertical: 'top', horizontal: 'left' },
|
|
}}>
|
|
<MenuItem value='' disabled>
|
|
Выберите ВСП
|
|
</MenuItem>
|
|
{vspOptions.map((option) => (
|
|
<MenuItem key={option.id} value={option.id}>
|
|
{option.registration_number}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
</div>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
);
|
|
});
|
|
|
|
VspDropdownEditCell.displayName = 'VspDropdownEditCell';
|
|
|
|
export default VspDropdownEditCell;
|