Use one grid cell per input
This commit is contained in:
@@ -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>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user