Pass className through DataGridCell

This commit is contained in:
Robert
2023-10-18 12:07:10 +01:00
parent 54db867d15
commit ec64b59b96
3 changed files with 78 additions and 85 deletions

View File

@@ -65,14 +65,19 @@ const StyledDataGridCell = styled.div<{
interface DataGridCellProps {
gridRow: string | number;
gridColumn: string | number;
className?: string;
children: React.ReactNode;
}
export function DataGridCell(props: DataGridCellProps) {
const { gridRow, gridColumn, children } = props;
const { gridRow, gridColumn, className, children } = props;
return (
<StyledDataGridCell $gridRow={gridRow} $gridColumn={gridColumn}>
<StyledDataGridCell
$gridRow={gridRow}
$gridColumn={gridColumn}
className={className}
>
{children}
</StyledDataGridCell>
);

View File

@@ -4,7 +4,7 @@ import { pluralize } from "../../common/word";
import { DataGridCell, DataGridRow } from "../common/DataGrid";
import { ModelEditorViewState } from "../../model-editor/shared/view-state";
const HiddenMethodsText = styled.div`
const HiddenMethodsText = styled(DataGridCell)`
text-align: center;
`;
@@ -29,13 +29,11 @@ export function HiddenMethodsRow({
return (
<DataGridRow>
<DataGridCell gridRow={gridRow} gridColumn={gridColumn}>
<HiddenMethodsText>
{someMethodsAreVisible && "And "}
{pluralize(numHiddenMethods, "method", "methods")} modeled in other
CodeQL packs
</HiddenMethodsText>
</DataGridCell>
<HiddenMethodsText gridRow={gridRow} gridColumn={gridColumn}>
{someMethodsAreVisible && "And "}
{pluralize(numHiddenMethods, "method", "methods")} modeled in other
CodeQL packs
</HiddenMethodsText>
</DataGridRow>
);
}

View File

@@ -25,7 +25,7 @@ import { Codicon } from "../common";
import { canAddNewModeledMethod } from "../../model-editor/shared/multiple-modeled-methods";
import { DataGridCell, DataGridRow } from "../common/DataGrid";
const MultiModelColumn = styled.div`
const MultiModelColumn = styled(DataGridCell)`
display: flex;
flex-direction: column;
gap: 0.5em;
@@ -203,81 +203,71 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
)}
{!props.modelingInProgress && (
<>
<DataGridCell gridRow={gridRow} gridColumn={2}>
<MultiModelColumn>
{modeledMethods.map((modeledMethod, index) => (
<ModelTypeDropdown
key={index}
method={method}
modeledMethod={modeledMethod}
onChange={modeledMethodChangedHandlers[index]}
/>
))}
</MultiModelColumn>
</DataGridCell>
<DataGridCell gridRow={gridRow} gridColumn={3}>
<MultiModelColumn>
{modeledMethods.map((modeledMethod, index) => (
<ModelInputDropdown
key={index}
method={method}
modeledMethod={modeledMethod}
onChange={modeledMethodChangedHandlers[index]}
/>
))}
</MultiModelColumn>
</DataGridCell>
<DataGridCell gridRow={gridRow} gridColumn={4}>
<MultiModelColumn>
{modeledMethods.map((modeledMethod, index) => (
<ModelOutputDropdown
key={index}
method={method}
modeledMethod={modeledMethod}
onChange={modeledMethodChangedHandlers[index]}
/>
))}
</MultiModelColumn>
</DataGridCell>
<DataGridCell gridRow={gridRow} gridColumn={5}>
<MultiModelColumn>
{modeledMethods.map((modeledMethod, index) => (
<ModelKindDropdown
key={index}
method={method}
modeledMethod={modeledMethod}
onChange={modeledMethodChangedHandlers[index]}
/>
))}
</MultiModelColumn>
</DataGridCell>
<MultiModelColumn gridRow={gridRow} gridColumn={2}>
{modeledMethods.map((modeledMethod, index) => (
<ModelTypeDropdown
key={index}
method={method}
modeledMethod={modeledMethod}
onChange={modeledMethodChangedHandlers[index]}
/>
))}
</MultiModelColumn>
<MultiModelColumn gridRow={gridRow} gridColumn={3}>
{modeledMethods.map((modeledMethod, index) => (
<ModelInputDropdown
key={index}
method={method}
modeledMethod={modeledMethod}
onChange={modeledMethodChangedHandlers[index]}
/>
))}
</MultiModelColumn>
<MultiModelColumn gridRow={gridRow} gridColumn={4}>
{modeledMethods.map((modeledMethod, index) => (
<ModelOutputDropdown
key={index}
method={method}
modeledMethod={modeledMethod}
onChange={modeledMethodChangedHandlers[index]}
/>
))}
</MultiModelColumn>
<MultiModelColumn gridRow={gridRow} gridColumn={5}>
{modeledMethods.map((modeledMethod, index) => (
<ModelKindDropdown
key={index}
method={method}
modeledMethod={modeledMethod}
onChange={modeledMethodChangedHandlers[index]}
/>
))}
</MultiModelColumn>
{viewState.showMultipleModels && (
<DataGridCell gridRow={gridRow} gridColumn={6}>
<MultiModelColumn>
{modeledMethods.map((_, index) =>
index === modeledMethods.length - 1 ? (
<CodiconRow
key={index}
appearance="icon"
aria-label="Add new model"
onClick={handleAddModelClick}
disabled={addModelButtonDisabled}
>
<Codicon name="add" />
</CodiconRow>
) : (
<CodiconRow
key={index}
appearance="icon"
aria-label="Remove model"
onClick={removeModelClickedHandlers[index]}
>
<Codicon name="trash" />
</CodiconRow>
),
)}
</MultiModelColumn>
</DataGridCell>
<MultiModelColumn gridRow={gridRow} gridColumn={6}>
{modeledMethods.map((_, index) =>
index === modeledMethods.length - 1 ? (
<CodiconRow
key={index}
appearance="icon"
aria-label="Add new model"
onClick={handleAddModelClick}
disabled={addModelButtonDisabled}
>
<Codicon name="add" />
</CodiconRow>
) : (
<CodiconRow
key={index}
appearance="icon"
aria-label="Remove model"
onClick={removeModelClickedHandlers[index]}
>
<Codicon name="trash" />
</CodiconRow>
),
)}
</MultiModelColumn>
)}
</>
)}