File size: 2,495 Bytes
9697ede | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | import { Dialog as Kobalte } from "@kobalte/core/dialog"
import { ComponentProps, JSXElement, Match, ParentProps, Show, Switch } from "solid-js"
import { useI18n } from "../context/i18n"
import { IconButton } from "./icon-button"
export interface DialogProps extends ParentProps {
title?: JSXElement
description?: JSXElement
action?: JSXElement
size?: "normal" | "large" | "x-large"
class?: ComponentProps<"div">["class"]
classList?: ComponentProps<"div">["classList"]
fit?: boolean
transition?: boolean
}
export function Dialog(props: DialogProps) {
const i18n = useI18n()
return (
<div
data-component="dialog"
data-fit={props.fit ? true : undefined}
data-size={props.size || "normal"}
data-transition={props.transition ? true : undefined}
>
<div data-slot="dialog-container">
<Kobalte.Content
data-slot="dialog-content"
data-no-header={!props.title && !props.action ? "" : undefined}
classList={{
...props.classList,
[props.class ?? ""]: !!props.class,
}}
onOpenAutoFocus={(e) => {
const target = e.currentTarget as HTMLElement | null
const autofocusEl = target?.querySelector("[autofocus]") as HTMLElement | null
if (autofocusEl) {
e.preventDefault()
autofocusEl.focus()
}
}}
>
<Show when={props.title || props.action}>
<div data-slot="dialog-header">
<Show when={props.title}>
<Kobalte.Title data-slot="dialog-title">{props.title}</Kobalte.Title>
</Show>
<Switch>
<Match when={props.action}>{props.action}</Match>
<Match when={true}>
<Kobalte.CloseButton
data-slot="dialog-close-button"
as={IconButton}
icon="close"
variant="ghost"
aria-label={i18n.t("ui.common.close")}
/>
</Match>
</Switch>
</div>
</Show>
<Show when={props.description}>
<Kobalte.Description data-slot="dialog-description" style={{ "margin-left": "-4px" }}>
{props.description}
</Kobalte.Description>
</Show>
<div data-slot="dialog-body">{props.children}</div>
</Kobalte.Content>
</div>
</div>
)
}
|