diff --git a/web/src/components/RealtimeTable/Cell/EditCell/EditCell.jsx b/web/src/components/RealtimeTable/Cell/EditCell/EditCell.jsx index 5a0687c..5cc4386 100644 --- a/web/src/components/RealtimeTable/Cell/EditCell/EditCell.jsx +++ b/web/src/components/RealtimeTable/Cell/EditCell/EditCell.jsx @@ -2,15 +2,18 @@ import { useEffect, useRef, useLayoutEffect, useState } from 'react'; import { isFormula, extractFormula, calculateFormula, formatNumber } from '../../utils/formulaUtils'; import { saveToStorage, loadFromStorage } from '../../utils/localStorageUtils'; +import { useRealtime } from '../../contexts/RealtimeContext'; + +const EditCell = ({ refCell, onChange, disabled, value, tableId, cellId, table }) => { + const { endEditing: contextEndEditing } = useRealtime(); -const EditCell = ({ refCell, onChange, disabled, value, tableId, cellId }) => { const [curValue, setCurValue] = useState(value); const [displayValue, setDisplayValue] = useState(value); const [isFormulaMode, setIsFormulaMode] = useState(false); - + // Ключ для хранения формул в localStorage const storageKey = `formula_${tableId}_${cellId}`; - + const trFrag = refCell.current.offsetParent.offsetParent; const tdFrag = refCell.current.offsetParent; const left = tdFrag.offsetLeft; @@ -69,7 +72,7 @@ const EditCell = ({ refCell, onChange, disabled, value, tableId, cellId }) => { if (isFormula(curValue)) { // Сохраняем формулу в localStorage saveToStorage(storageKey, curValue); - + // Вычисляем и сохраняем результат try { const formula = extractFormula(curValue); @@ -108,6 +111,32 @@ const EditCell = ({ refCell, onChange, disabled, value, tableId, cellId }) => { return displayValue; }; + const finishEditing = () => { + if (!disabled) { + handleSave(); + } + const editingCell = table.getState().editingCell || null; + if (editingCell) { + contextEndEditing?.(editingCell.row, editingCell.column); + } + }; + + useEffect(() => { + const handleClickOutside = (event) => { + // Проверяем, был ли клик внутри элемента редактирования + const editElement = ref.current; + if (editElement && !editElement.contains(event.target)) { + finishEditing(); + } + }; + + document.addEventListener('mousedown', handleClickOutside); + + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, [ref, finishEditing]); + return ( @@ -150,16 +179,10 @@ const EditCell = ({ refCell, onChange, disabled, value, tableId, cellId }) => { }} onChange={handleChangeValue} value={curValue} - onBlur={handleSave} onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); - handleSave(); - // Закрываем редактирование - if (onChange) { - // Симулируем завершение редактирования - document.activeElement?.blur(); - } + finishEditing(); } }} placeholder={isFormulaMode ? 'Введите формулу (начинается с =)' : ''} diff --git a/web/src/components/RealtimeTable/RealtimeTable.jsx b/web/src/components/RealtimeTable/RealtimeTable.jsx index b75259b..c40ca7e 100644 --- a/web/src/components/RealtimeTable/RealtimeTable.jsx +++ b/web/src/components/RealtimeTable/RealtimeTable.jsx @@ -63,7 +63,6 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => { addRow: contextAddRow, deleteRow: contextDeleteRow, startEditing: contextStartEditing, - endEditing: contextEndEditing, } = useRealtime(); const { @@ -180,8 +179,6 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => { if (cell) { if (editingCell) return; contextStartEditing?.(cell.row, cell.column); - } else { - contextEndEditing?.(editingCell.row, editingCell.column); } }, columnVirtualizerOptions: ({ table }) => ({ diff --git a/web/src/components/RealtimeTable/tableColumns.jsx b/web/src/components/RealtimeTable/tableColumns.jsx index 2c6dd4e..1353217 100644 --- a/web/src/components/RealtimeTable/tableColumns.jsx +++ b/web/src/components/RealtimeTable/tableColumns.jsx @@ -3,6 +3,7 @@ import { createPortal } from 'react-dom'; import { columns as mockColumns } from '../../mocks/mockTable'; import { config } from './constants/FORM_2/AHR'; import { useParams } from 'react-router'; +import { useRealtime } from './contexts/RealtimeContext'; function EditCellPortal({ cell, @@ -20,6 +21,8 @@ function EditCellPortal({ const [isSaving, setIsSaving] = useState(false); const isDisabled = false; + const { endEditing: contextEndEditing } = useRealtime(); + useEffect(() => { if (ref.current) { const tbodyRef = ref.current.offsetParent?.offsetParent?.offsetParent; @@ -68,6 +71,7 @@ function EditCellPortal({ disabled={!isEditable} onChange={handleChange} tableId={tableKey} + table={table} cellId={cell.row.id + '_' + cell.column.id} />, refTbody,