[OuiDataGrid][Research] Understand how rowHeightsOptions allows configuring row heights

[ananzh]

The OuiDataGrid component from the OUI framework implements rowHeightsOptions to enable adjustable row heights, particularly for handling multiline cell content. This functionality is achieved through a combination of React components and utility classes. Here's a breakdown of how it works:

Related Classes and Components

RowHeightUtils Class

• Purpose: This utility class is crucial for calculating row heights based on various criteria like line count, padding, line height, etc.

• Key Methods:

  • computeStylesForGridCell(gridStyles): Determines the styles for grid cells. It uses a fake cell, applies styles, and appends it to the document to compute the effective styles (padding, line height).
  • calculateHeightForLineCount(lineCount): Calculates the height of a cell based on the number of lines it should display.
  • getCalculatedHeight(heightOption, defaultHeight): Determines the calculated height of a row based on the provided height option (could be a line count or specific height) and a default height.

OuiDataGrid Component

• Usage of RowHeightUtils: The grid component imports and uses RowHeightUtils. It calls computeStylesForGridCell to initialize the styles based on the grid's current styles.
• Passing Props to Child Components: The OuiDataGrid passes rowHeightUtils, rowHeightsOptions, and gridStyles to the OuiDataGridBody.

OuiDataGridBody Component

• Handling Row Heights: This component is responsible for rendering the grid rows. It uses getRowHeight (a method that utilizes RowHeightUtils) to determine the height of each row.
• Adjusting Heights: The grid rows' heights are adjusted dynamically based on the rowHeightsOptions passed to the component.

OuiDataGridCell Component

• Dynamic Update: The cell component decides whether to update based on changes in its style and height. If the height changes, it triggers a re-render to adjust to the new height.
• Rendering Content: The OuiDataGridCellContent component, used within OuiDataGridCell, renders the actual cell content. It applies styles calculated for the row height, controlling how content is displayed (e.g., number of lines, overflow handling).

OuiDataGridCellContent Component

• Styling Cells: This component applies styles based on rowHeightsOptions and the row index. It handles how the content is displayed within the cell, including truncation and line clamping for multiline content.

Overall Flow

• Initialization: OuiDataGrid initializes RowHeightUtils with the current grid styles.
• Passing Down Props: rowHeightUtils, rowHeightsOptions, and gridStyles are passed down to OuiDataGridBody.
• Row Height Calculation: OuiDataGridBody uses these utilities to calculate and adjust row heights.
• Cell Rendering: OuiDataGridCell responds to changes in styles or heights and re-renders if necessary.
• Content Display: OuiDataGridCellContent applies the appropriate styles for displaying the cell content based on the row height settings.