Fix: select add portalRef instead of modalContextId

This commit is contained in:
Johannes Kirschbauer
2025-01-09 10:15:29 +01:00
parent 8bb596cdb5
commit 1058d5ff07
2 changed files with 84 additions and 62 deletions

View File

@@ -11,6 +11,7 @@ import { StepProps } from "./hardware-step";
import { SelectInput } from "@/src/Form/fields/Select";
import { Typography } from "@/src/components/Typography";
import { Group } from "@/src/components/group";
import { useContext } from "corvu/dialog";
export interface DiskValues extends FieldValues {
placeholders: {
@@ -44,67 +45,82 @@ export const DiskStep = (props: StepProps<DiskValues>) => {
},
}));
const modalContext = useContext();
return (
<Form
onSubmit={handleSubmit}
class="flex flex-col gap-6"
noValidate={false}
>
<span class="flex flex-col gap-4">
<Field name="schema" validate={required("Schema must be provided")}>
{(field, fieldProps) => (
<>
<Typography
hierarchy="body"
size="default"
weight="bold"
class="capitalize"
<>
<Form
onSubmit={handleSubmit}
class="flex flex-col gap-6"
noValidate={false}
>
<div class="max-h-[calc(100vh-20rem)] overflow-y-scroll">
<div class="flex h-full flex-col gap-6 p-4">
<span class="flex flex-col gap-4">
<Field
name="schema"
validate={required("Schema must be provided")}
>
{(field.value || "No schema selected").split("-").join(" ")}
</Typography>
<Typography
hierarchy="body"
size="xs"
weight="medium"
class="underline"
{(field, fieldProps) => (
<>
<Typography
hierarchy="body"
size="default"
weight="bold"
class="capitalize"
>
{(field.value || "No schema selected")
.split("-")
.join(" ")}
</Typography>
<Typography
hierarchy="body"
size="xs"
weight="medium"
class="underline"
>
Change schema
</Typography>
</>
)}
</Field>
</span>
<Group>
{props.initial?.initialized &&
"Disk has been initialized already"}
<Field
name="placeholders.mainDisk"
validate={
!props.initial?.initialized
? required("Disk must be provided")
: undefined
}
>
Change schema
</Typography>
</>
)}
</Field>
</span>
<Group>
{props.initial?.initialized && "Disk has been initialized already"}
<Field
name="placeholders.mainDisk"
validate={
!props.initial?.initialized
? required("Disk must be provided")
: undefined
}
>
{(field, fieldProps) => (
<SelectInput
loading={diskSchemaQuery.isFetching}
options={
diskSchemaQuery.data?.["single-disk"].placeholders[
"mainDisk"
].options?.map((o) => ({ label: o, value: o })) || [
{ label: "No options", value: "" },
]
}
error={field.error}
label="Main Disk"
value={field.value || ""}
placeholder="Select a disk"
selectProps={fieldProps}
required={!props.initial?.initialized}
/>
)}
</Field>
</Group>
{props.footer}
</Form>
{(field, fieldProps) => (
<SelectInput
loading={diskSchemaQuery.isFetching}
options={
diskSchemaQuery.data?.["single-disk"].placeholders[
"mainDisk"
].options?.map((o) => ({ label: o, value: o })) || [
{ label: "No options", value: "" },
]
}
error={field.error}
label="Main Disk"
value={field.value || ""}
placeholder="Select a disk"
selectProps={fieldProps}
required={!props.initial?.initialized}
portalRef={modalContext.contentRef}
/>
)}
</Field>
</Group>
</div>
</div>
{props.footer}
</Form>
</>
);
};