diff --git a/web/src/components/RealtimeTable/Cell/Cell/Cell.jsx b/web/src/components/RealtimeTable/Cell/Cell/Cell.jsx index 0dc770e..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; @@ -142,21 +164,26 @@ const Cell = React.memo(({ cell, row, column, onClick, globalFilter, columnFilte 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 (