From 57aa7b6167a8ad3d5a45fc93b8d5188967e2f63a Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Thu, 9 Sep 2021 13:00:05 -0600 Subject: [PATCH] Added lineHeight configuration to rowHeightOptions --- src-docs/src/views/datagrid/row_height_options.js | 15 ++++++++------- .../__snapshots__/data_grid_body.test.tsx.snap | 2 ++ .../__snapshots__/data_grid_cell.test.tsx.snap | 1 + src/components/datagrid/body/data_grid_cell.tsx | 9 +++++++-- src/components/datagrid/data_grid.test.tsx | 4 ++++ src/components/datagrid/data_grid.tsx | 7 +++++-- src/components/datagrid/data_grid_types.ts | 4 ++++ src/components/datagrid/row_height_utils.ts | 9 ++++++++- 8 files changed, 39 insertions(+), 12 deletions(-) diff --git a/src-docs/src/views/datagrid/row_height_options.js b/src-docs/src/views/datagrid/row_height_options.js index 62fda818ff6..5d8b2660973 100644 --- a/src-docs/src/views/datagrid/row_height_options.js +++ b/src-docs/src/views/datagrid/row_height_options.js @@ -83,16 +83,17 @@ export default () => { const rowHeightsOptions = useMemo( () => ({ + lineHeight: '3rem', defaultHeight: { lineCount: 2, }, - rowHeights: { - 1: { - lineCount: 5, - }, - 4: 140, - 5: 80, - }, + // rowHeights: { + // 1: { + // lineCount: 5, + // }, + // 4: 140, + // 5: 80, + // }, }), [] ); diff --git a/src/components/datagrid/body/__snapshots__/data_grid_body.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_body.test.tsx.snap index 39b3e41a30e..1550bf01715 100644 --- a/src/components/datagrid/body/__snapshots__/data_grid_body.test.tsx.snap +++ b/src/components/datagrid/body/__snapshots__/data_grid_body.test.tsx.snap @@ -996,6 +996,7 @@ exports[`EuiDataGridBody renders 1`] = ` Object { "height": 34, "left": 0, + "lineHeight": undefined, "position": "absolute", "top": "0px", "width": 20, @@ -1230,6 +1231,7 @@ exports[`EuiDataGridBody renders 1`] = ` Object { "height": 34, "left": 20, + "lineHeight": undefined, "position": "absolute", "top": "0px", "width": undefined, diff --git a/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap index 09eea256ef4..028117b60ac 100644 --- a/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap +++ b/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap @@ -22,6 +22,7 @@ exports[`EuiDataGridCell renders 1`] = ` role="gridcell" style={ Object { + "lineHeight": undefined, "width": undefined, } } diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx index 85b6ef33dc1..347e0eb76fd 100644 --- a/src/components/datagrid/body/data_grid_cell.tsx +++ b/src/components/datagrid/body/data_grid_cell.tsx @@ -333,7 +333,7 @@ export class EuiDataGridCell extends Component< style, ...rest } = this.props; - const { rowIndex } = rest; + const { rowIndex, rowHeightsOptions } = rest; const showCellButtons = this.state.isFocused || @@ -359,7 +359,12 @@ export class EuiDataGridCell extends Component< className: classNames(cellClasses, this.state.cellProps.className), }; - cellProps.style = { ...style, width, ...cellProps.style }; + cellProps.style = { + ...style, // from react-window + width, // column width, can be undefined + lineHeight: rowHeightsOptions?.lineHeight ?? undefined, // lineHeight configuration + ...cellProps.style, // apply anything from setCellProps({style}) + }; const handleCellKeyDown = (event: KeyboardEvent) => { if (isExpandable) { diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx index 82b5704842a..0f258a05758 100644 --- a/src/components/datagrid/data_grid.test.tsx +++ b/src/components/datagrid/data_grid.test.tsx @@ -572,6 +572,7 @@ describe('EuiDataGrid', () => { "color": "red", "height": 34, "left": 0, + "lineHeight": undefined, "position": "absolute", "top": "100px", "width": 100, @@ -591,6 +592,7 @@ describe('EuiDataGrid', () => { "color": "blue", "height": 34, "left": 100, + "lineHeight": undefined, "position": "absolute", "top": "100px", "width": 100, @@ -610,6 +612,7 @@ describe('EuiDataGrid', () => { "color": "red", "height": 34, "left": 0, + "lineHeight": undefined, "position": "absolute", "top": "134px", "width": 100, @@ -629,6 +632,7 @@ describe('EuiDataGrid', () => { "color": "blue", "height": 34, "left": 100, + "lineHeight": undefined, "position": "absolute", "top": "134px", "width": 100, diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index 3ad87891195..15a1b168306 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -688,8 +688,11 @@ export const EuiDataGrid: FunctionComponent = (props) => { const [rowHeightUtils] = useState(new RowHeightUtils()); useEffect(() => { - rowHeightUtils.computeStylesForGridCell(gridStyles); - }, [gridStyles, rowHeightUtils]); + rowHeightUtils.computeStylesForGridCell( + gridStyles, + rowHeightsOptions?.lineHeight + ); + }, [gridStyles, rowHeightUtils, rowHeightsOptions?.lineHeight]); const classes = classNames( 'euiDataGrid', diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts index 41241f4c28b..62915e9235c 100644 --- a/src/components/datagrid/data_grid_types.ts +++ b/src/components/datagrid/data_grid_types.ts @@ -705,4 +705,8 @@ export interface EuiDataGridRowHeightsOptions { * Defines the height for a specific row. It can be line count or just height. */ rowHeights?: Record; + /** + * Defines a global lineHeight style to apply to all cells + */ + lineHeight?: string; } diff --git a/src/components/datagrid/row_height_utils.ts b/src/components/datagrid/row_height_utils.ts index 8b47170375a..352e90bebd9 100644 --- a/src/components/datagrid/row_height_utils.ts +++ b/src/components/datagrid/row_height_utils.ts @@ -42,12 +42,19 @@ export class RowHeightUtils { } = {}; private fakeCell = document.createElement('div'); - computeStylesForGridCell(gridStyles: EuiDataGridStyle) { + computeStylesForGridCell( + gridStyles: EuiDataGridStyle, + lineHeight: string | undefined + ) { this.fakeCell.className = ` euiDataGridRowCell ${cellPaddingsToClassMap[gridStyles.cellPadding!]} ${fontSizesToClassMap[gridStyles.fontSize!]} `; + + // @ts-ignore it is valid to set `lineHeight` to undefined + this.fakeCell.style.lineHeight = lineHeight; + document.body.appendChild(this.fakeCell); const allStyles = getComputedStyle(this.fakeCell); this.styles = {