diff --git a/web/src/components/RealtimeTable/Cell/Cell/Cell.jsx b/web/src/components/RealtimeTable/Cell/Cell/Cell.jsx index 50a7c4a..3392699 100644 --- a/web/src/components/RealtimeTable/Cell/Cell/Cell.jsx +++ b/web/src/components/RealtimeTable/Cell/Cell/Cell.jsx @@ -30,6 +30,28 @@ const LockBadge = styled.div` border: 1px solid rgba(255, 255, 255, 0.1); `; +// Функция для определения яркости цвета +const getColorBrightness = (hexColor) => { + if (!hexColor) return 255; + + const color = hexColor.replace('#', ''); + + let r, g, b; + if (color.length === 3) { + r = parseInt(color[0] + color[0], 16); + g = parseInt(color[1] + color[1], 16); + b = parseInt(color[2] + color[2], 16); + } else if (color.length === 6) { + r = parseInt(color.substring(0, 2), 16); + g = parseInt(color.substring(2, 4), 16); + b = parseInt(color.substring(4, 6), 16); + } else { + return 255; + } + + return (0.299 * r + 0.587 * g + 0.114 * b); +}; + // Функция для подсветки текста const highlightText = (text, searchQueries) => { if (!text) return text; @@ -37,7 +59,7 @@ const highlightText = (text, searchQueries) => { if (cleanSearchQueries.length == 0) return text; const escapedQueries = cleanSearchQueries.map(query => query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')); - const regex = new RegExp(`(${ escapedQueries.join('|')})`, 'gi'); + const regex = new RegExp(`(${escapedQueries.join('|')})`, 'gi'); const parts = text.split(regex); return parts.map((part, index) => @@ -60,6 +82,35 @@ const highlightText = (text, searchQueries) => { ); }; +const highlightWithFormatting = (originalValue, formattedValue, searchQueries) => { + if (!originalValue && originalValue !== 0) return formattedValue; + + const cleanSearchQueries = searchQueries.filter(q => (q !== undefined && q !== '')); + if (cleanSearchQueries.length == 0) return formattedValue; + + const originalString = String(originalValue); + const escapedQueries = cleanSearchQueries.map(query => query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')); + const regex = new RegExp(`(${escapedQueries.join('|')})`, 'gi'); + + if (!regex.test(originalString)) { + return formattedValue; + } + + return ( + + {formattedValue} + + ); +}; + const INTEGER_COLUMN_IDS = new Set([ 'data.header.num_group', 'data.nomenclature_group_id', @@ -97,34 +148,42 @@ const Cell = React.memo(({ cell, row, column, onClick, globalFilter, columnFilte const isLocked = lockedCells.includes(cellKey); const cellValue = cell.getValue(); - let textValue = String(cellValue || ''); + let originalValue = cellValue; + let displayValue = String(cellValue || ''); const isNumeric = !isNaN(Number(cellValue)) && cellValue !== null && cellValue !== undefined && cellValue !== ''; if (isNumeric) { const asInteger = INTEGER_COLUMN_IDS.has(column.id); - textValue = formatNumber(cellValue, asInteger); + displayValue = formatNumber(cellValue, asInteger); } const highlightedContent = useMemo(() => { - return highlightText(textValue, [globalFilter, columnFilter]); - }, [textValue, globalFilter]); + if (!isNumeric) { + return highlightText(displayValue, [globalFilter, columnFilter]); + } + return highlightWithFormatting(originalValue, displayValue, [globalFilter, columnFilter]); + }, [originalValue, displayValue, globalFilter, columnFilter, isNumeric]); + // Определяем цвет текста на основе яркости фона + const getTextColor = () => { + const brightness = getColorBrightness(backgroundColor); + + // Если яркость меньше 128 (темный фон) - используем белый текст, иначе черный + return brightness < 128 ? '#ffffff' : '#000000'; + }; // Базовые стили для заблокированной ячейки const lockedStyles = isLocked ? { border: '2px solid #e0e0e0', backgroundColor: '#f5f5f5', - color: '#999999', cursor: 'not-allowed', opacity: 0.85, } : {}; - // Если isEditable false, добавляем дополнительные стили - const editableStyles = !isEditable ? { - border: '2px solid #d3d3d3', - color: backgroundColor?.toLowerCase() === '#933634' ? '#ffffff' : '#525252', - cursor: 'not-allowed', - } : {}; + + + // Определяем финальный цвет текста + const finalTextColor = isLocked ? '#999999' : getTextColor(); return (