github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Lens][Datatable] Fix cell style cleanup (#190618)

Browse source 
## Summary

Fixes a bug with Lens Datatable where expanding a colored cell clears color styles upon blurring selected cell.
This commit is contained in:
Nick Partridge 2024-08-15 13:00:13 -07:00 • committed by GitHub
parent dde88c8e49
commit ff5be94c13
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 11 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

19
x-pack/plugins/lens/public/visualizations/datatable/components/cell_value.tsx
View file

@ -23,7 +23,7 @@ export const createGridCell = (
theme: CoreSetup['theme'],
fitRowToContent?: boolean
) => {
return ({ rowIndex, columnId, setCellProps }: EuiDataGridCellValueElementProps) => {
return ({ rowIndex, columnId, setCellProps, isExpanded }: EuiDataGridCellValueElementProps) => {
const { table, alignments, minMaxByColumnId, getColorForValue, handleFilterClick } =
useContext(DataContext);
const IS_DARK_THEME: boolean = useObservable(theme.theme$, { darkMode: false }).darkMode;
@ -31,13 +31,14 @@ export const createGridCell = (
const rowValue = table?.rows[rowIndex]?.[columnId];
const colIndex = columnConfig.columns.findIndex(({ columnId: id }) => id === columnId);
const { colorMode, palette, oneClickFilter } = columnConfig.columns[colIndex] || {};
const { colorMode = 'none', palette, oneClickFilter } = columnConfig.columns[colIndex] || {};
const filterOnClick = oneClickFilter && handleFilterClick;
const content = formatters[columnId]?.convert(rowValue, filterOnClick ? 'text' : 'html');
const currentAlignment = alignments && alignments[columnId];
useEffect(() => {
let colorSet = false;
const originalId = getOriginalId(columnId);
if (minMaxByColumnId?.[originalId]) {
if (colorMode !== 'none' && palette?.params && getColorForValue) {
@ -52,24 +53,25 @@ export const createGridCell = (
if (colorMode === 'cell' && color) {
style.color = getContrastColor(color, IS_DARK_THEME);
}
colorSet = true;
setCellProps({
style,
});
}
}
}
// make sure to clean it up when something change
// this avoids cell's styling to stick forever
return () => {
if (minMaxByColumnId?.[originalId]) {
// Clean up styles when something changes, this avoids cell's styling to stick forever
// Checks isExpanded to prevent clearing style after expanding cell
if (colorMode !== 'none' && minMaxByColumnId?.[originalId] && colorSet && !isExpanded) {
return () => {
setCellProps({
style: {
backgroundColor: undefined,
color: undefined,
},
});
}
};
};
}
}, [
rowValue,
columnId,
@ -79,6 +81,7 @@ export const createGridCell = (
minMaxByColumnId,
getColorForValue,
IS_DARK_THEME,
isExpanded,
]);
if (filterOnClick) {