Use custom grid element instead of VSCodeDataGrid #2990
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| import * as React from "react"; | ||
| import { ReactNode, forwardRef } from "react"; | ||
| import { styled } from "styled-components"; | ||
|
|
||
| /* | ||
| * A drop-in replacement for the VSCodeDataGrid family of components. | ||
| * | ||
| * The difference is that the `display: grid` styling is applied to `DataGrid`, whereas | ||
| * in the VS Code version that styling is applied to `VSCodeDataGridRow`. This gives | ||
| * column alignment across rows in situation with dynamic contents. It also allows | ||
| * for cells to span multiple rows and all the other features of data grids. | ||
| */ | ||
|
|
||
| const StyledDataGrid = styled.div<{ $gridTemplateColumns: string | number }>` | ||
| display: grid; | ||
| grid-template-columns: ${(props) => props.$gridTemplateColumns}; | ||
| box-sizing: border-box; | ||
| width: 100%; | ||
| background: transparent; | ||
| `; | ||
|
|
||
| interface DataGridProps { | ||
| gridTemplateColumns: string; | ||
| children: ReactNode; | ||
| } | ||
|
|
||
| /** | ||
| * The top level for a grid systemm that will contain `DataGridRow` and `DataGridCell` components. | ||
| * | ||
| * See https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns for how to use `gridTemplateColumns`. | ||
| */ | ||
| export function DataGrid({ gridTemplateColumns, children }: DataGridProps) { | ||
| return ( | ||
| <StyledDataGrid $gridTemplateColumns={gridTemplateColumns}> | ||
| {children} | ||
| </StyledDataGrid> | ||
| ); | ||
| } | ||
|
|
||
| const StyledDataGridRow = styled.div<{ $focused?: boolean }>` | ||
| display: contents; | ||
|
|
||
| &:hover > * { | ||
| background-color: var(--list-hover-background); | ||
| } | ||
|
|
||
| & > * { | ||
| // Use !important to override the background color set by the hover state | ||
| background-color: ${(props) => | ||
| props.$focused | ||
| ? "var(--vscode-editor-selectionBackground) !important" | ||
| : "inherit"}; | ||
| } | ||
| `; | ||
|
|
||
| interface DataGridRowProps { | ||
| focused?: boolean; | ||
| children: ReactNode; | ||
| "data-testid"?: string; | ||
| } | ||
|
|
||
| /** | ||
| * Optional component for encompasing a single row in a `DataGrid`. | ||
| * Implements hover and focus states that highlight all cells in the row. | ||
| * | ||
| * Note that using this component is not mandatory. Cells can be placed directly | ||
| * inside a `DataGrid`. Feel free to skip this component if your cells do not | ||
| * line up into neat rows, or you do not need the hover and focus states. | ||
| */ | ||
| export const DataGridRow = forwardRef( | ||
|
koesie10 marked this conversation as resolved.
|
||
| ( | ||
| { focused, children, "data-testid": testId }: DataGridRowProps, | ||
| ref?: React.Ref<HTMLElement | undefined>, | ||
| ) => ( | ||
| <StyledDataGridRow $focused={focused} ref={ref} data-testid={testId}> | ||
| {children} | ||
| </StyledDataGridRow> | ||
| ), | ||
| ); | ||
| DataGridRow.displayName = "DataGridRow"; | ||
|
|
||
| const StyledDataGridCell = styled.div<{ | ||
| $rowType: "default" | "header"; | ||
| $gridRow?: string | number; | ||
| $gridColumn?: string | number; | ||
| }>` | ||
| ${({ $rowType }) => ($rowType === "header" ? "font-weight: 600;" : "")} | ||
| ${({ $gridRow }) => ($gridRow ? `grid-row: ${$gridRow};` : "")} | ||
| ${({ $gridColumn }) => ($gridColumn ? `grid-column: ${$gridColumn};` : "")} | ||
| padding: 4px 12px; | ||
| `; | ||
|
|
||
| interface DataGridCellProps { | ||
| rowType?: "default" | "header"; | ||
| gridRow?: string | number; | ||
| gridColumn?: string | number; | ||
| className?: string; | ||
| children: ReactNode; | ||
| } | ||
|
|
||
| /** | ||
| * A cell in a `DataGrid`. | ||
| * | ||
| * By default, the position of cells in the grid is determined by the order in which | ||
| * they appear in the DOM. Cells will fill up the current row and then move on to the | ||
| * next row. This can be overridden using the `gridRow` and `gridColumn` to place | ||
| * cells anywhere within the grid. You can also configure cells to span multiple rows | ||
| * or columns. See https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column. | ||
| */ | ||
| export function DataGridCell({ | ||
| rowType = "default", | ||
| gridRow, | ||
| gridColumn, | ||
| className, | ||
| children, | ||
| }: DataGridCellProps) { | ||
| return ( | ||
| <StyledDataGridCell | ||
| $rowType={rowType} | ||
| $gridRow={gridRow} | ||
| $gridColumn={gridColumn} | ||
| className={className} | ||
| > | ||
| {children} | ||
| </StyledDataGridCell> | ||
| ); | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,35 +1,37 @@ | ||
| import * as React from "react"; | ||
| import { styled } from "styled-components"; | ||
| import { pluralize } from "../../common/word"; | ||
| import { DataGridCell, DataGridRow } from "../common/DataGrid"; | ||
| import { ModelEditorViewState } from "../../model-editor/shared/view-state"; | ||
|
|
||
|
robertbrignull marked this conversation as resolved.
|
||
| const HiddenMethodsCell = styled(DataGridCell)` | ||
| text-align: center; | ||
| `; | ||
|
|
||
| interface Props { | ||
| numHiddenMethods: number; | ||
| someMethodsAreVisible: boolean; | ||
| viewState: ModelEditorViewState; | ||
| } | ||
|
|
||
| export function HiddenMethodsRow({ | ||
| numHiddenMethods, | ||
| someMethodsAreVisible, | ||
| viewState, | ||
| }: Props) { | ||
| if (numHiddenMethods === 0) { | ||
| return null; | ||
| } | ||
|
|
||
| const gridColumn = viewState.showMultipleModels ? "span 6" : "span 5"; | ||
|
|
||
| return ( | ||
| <DataGridRow> | ||
| <HiddenMethodsCell gridColumn={gridColumn}> | ||
| {someMethodsAreVisible && "And "} | ||
| {pluralize(numHiddenMethods, "method", "methods")} modeled in other | ||
| CodeQL packs | ||
| </HiddenMethodsCell> | ||
| </DataGridRow> | ||
| ); | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.