Use one grid cell per input

This commit is contained in:
Robert
2023-10-18 15:17:07 +01:00
parent c528a389e5
commit 09a8d29ea5

View File

@@ -25,12 +25,6 @@ import { Codicon } from "../common";
import { canAddNewModeledMethod } from "../../model-editor/shared/multiple-modeled-methods"; import { canAddNewModeledMethod } from "../../model-editor/shared/multiple-modeled-methods";
import { DataGridCell, DataGridRow } from "../common/DataGrid"; import { DataGridCell, DataGridRow } from "../common/DataGrid";
const MultiModelColumn = styled(DataGridCell)`
display: flex;
flex-direction: column;
gap: 0.5em;
`;
const ApiOrMethodRow = styled.div` const ApiOrMethodRow = styled.div`
min-height: calc(var(--input-height) * 1px); min-height: calc(var(--input-height) * 1px);
display: flex; display: flex;
@@ -162,7 +156,7 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
ref={ref} ref={ref}
focused={revealedMethodSignature === method.signature} focused={revealedMethodSignature === method.signature}
> >
<DataGridCell> <DataGridCell gridRow={`span ${modeledMethods.length}`}>
<ApiOrMethodRow> <ApiOrMethodRow>
<ModelingStatusIndicator status={modelingStatus} /> <ModelingStatusIndicator status={modelingStatus} />
<MethodClassifications method={method} /> <MethodClassifications method={method} />
@@ -199,54 +193,41 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
)} )}
</> </>
)} )}
{!props.modelingInProgress && ( {!props.modelingInProgress &&
<> modeledMethods.map((modeledMethod, index) => (
<MultiModelColumn> <>
{modeledMethods.map((modeledMethod, index) => ( <DataGridCell>
<ModelTypeDropdown <ModelTypeDropdown
key={index}
method={method} method={method}
modeledMethod={modeledMethod} modeledMethod={modeledMethod}
onChange={modeledMethodChangedHandlers[index]} onChange={modeledMethodChangedHandlers[index]}
/> />
))} </DataGridCell>
</MultiModelColumn> <DataGridCell>
<MultiModelColumn>
{modeledMethods.map((modeledMethod, index) => (
<ModelInputDropdown <ModelInputDropdown
key={index}
method={method} method={method}
modeledMethod={modeledMethod} modeledMethod={modeledMethod}
onChange={modeledMethodChangedHandlers[index]} onChange={modeledMethodChangedHandlers[index]}
/> />
))} </DataGridCell>
</MultiModelColumn> <DataGridCell>
<MultiModelColumn>
{modeledMethods.map((modeledMethod, index) => (
<ModelOutputDropdown <ModelOutputDropdown
key={index}
method={method} method={method}
modeledMethod={modeledMethod} modeledMethod={modeledMethod}
onChange={modeledMethodChangedHandlers[index]} onChange={modeledMethodChangedHandlers[index]}
/> />
))} </DataGridCell>
</MultiModelColumn> <DataGridCell>
<MultiModelColumn>
{modeledMethods.map((modeledMethod, index) => (
<ModelKindDropdown <ModelKindDropdown
key={index}
method={method} method={method}
modeledMethod={modeledMethod} modeledMethod={modeledMethod}
onChange={modeledMethodChangedHandlers[index]} onChange={modeledMethodChangedHandlers[index]}
/> />
))} </DataGridCell>
</MultiModelColumn> {viewState.showMultipleModels && (
{viewState.showMultipleModels && ( <DataGridCell>
<MultiModelColumn> {index === modeledMethods.length - 1 ? (
{modeledMethods.map((_, index) =>
index === modeledMethods.length - 1 ? (
<CodiconRow <CodiconRow
key={index}
appearance="icon" appearance="icon"
aria-label="Add new model" aria-label="Add new model"
onClick={handleAddModelClick} onClick={handleAddModelClick}
@@ -256,19 +237,17 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
</CodiconRow> </CodiconRow>
) : ( ) : (
<CodiconRow <CodiconRow
key={index}
appearance="icon" appearance="icon"
aria-label="Remove model" aria-label="Remove model"
onClick={removeModelClickedHandlers[index]} onClick={removeModelClickedHandlers[index]}
> >
<Codicon name="trash" /> <Codicon name="trash" />
</CodiconRow> </CodiconRow>
), )}
)} </DataGridCell>
</MultiModelColumn> )}
)} </>
</> ))}
)}
</DataGridRow> </DataGridRow>
); );
}, },