Fix: select add portalRef instead of modalContextId
This commit is contained in:
@@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user