aurora-1194

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',
+  const finalTextColor = isLocked ? '#999999' : getTextColor();
-    cursor: 'not-allowed',
-  } : {};
 
   return (
     <div
@@ -176,9 +203,8 @@ const Cell = React.memo(({ cell, row, column, onClick, globalFilter, columnFilte
         border: '2px solid transparent',
         padding: '8px',
         backgroundColor: isLocked ? '#f5f5f5' : backgroundColor,
-        color: isLocked ? '#999999' : color,
+        color: finalTextColor,
         ...lockedStyles,
-        ...editableStyles,
       }}
       onClick={isLocked ? undefined : onClick}
     >