front-fixes #33
@ -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 (
|
||||
<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}
|
||||
>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user