diff --git a/web/src/components/RealtimeTable/Cell/EditCell/EditCell.jsx b/web/src/components/RealtimeTable/Cell/EditCell/EditCell.jsx index 5a0687c..72fccb1 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,29 @@ const EditCell = ({ refCell, onChange, disabled, value, tableId, cellId }) => { return displayValue; }; + const finishEditing = () => { + 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]); + return ( diff --git a/web/src/components/RealtimeTable/RealtimeTable.jsx b/web/src/components/RealtimeTable/RealtimeTable.jsx index b75259b..1427d6e 100644 --- a/web/src/components/RealtimeTable/RealtimeTable.jsx +++ b/web/src/components/RealtimeTable/RealtimeTable.jsx @@ -177,6 +177,7 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => { measureElement: (el) => el?.offsetHeight || TABLE_ROW_HEIGHT, }, onEditingCellChange: (cell) => { + console.log(cell, editingCell); if (cell) { if (editingCell) return; contextStartEditing?.(cell.row, cell.column); 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,