54 lines
2.2 KiB
TypeScript
54 lines
2.2 KiB
TypeScript
import { useState } from "react"
|
||
import type { Meta, StoryObj } from "@storybook/react-vite"
|
||
import { Button, LoadingScreen } from "@hm-design/ui"
|
||
import { StateBoard } from "@/components/story-board"
|
||
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
|
||
|
||
// Loading Screen is a Dashboard-local pattern (ui-viz LoadingScreen). Inline fills its parent; fullscreen covers the viewport. The
|
||
// fullscreen demo is mounted and removed by local state only; there is no async task, cancel or close control in the pattern.
|
||
|
||
function Fullscreen() {
|
||
const [open, setOpen] = useState(false)
|
||
return (
|
||
<>
|
||
<Button appearance="outline" onClick={() => setOpen(true)}>전체화면 미리보기</Button>
|
||
{open ? (
|
||
<>
|
||
<LoadingScreen fullscreen>데이터를 불러오는 중</LoadingScreen>
|
||
<Button className="fixed top-7 right-7 z-[10000]" onClick={() => setOpen(false)}>닫기</Button>
|
||
</>
|
||
) : null}
|
||
</>
|
||
)
|
||
}
|
||
|
||
const meta = { title: "Patterns/Layout/Loading Screen", parameters: { layout: "padded", controls: { disable: true } } } satisfies Meta
|
||
export default meta
|
||
type Story = StoryObj<typeof meta>
|
||
|
||
// The inline specimen fills its parent inside the common page Inner.
|
||
export const All: Story = {
|
||
name: "Loading Screen",
|
||
parameters: { layout: "fullscreen" },
|
||
render: () => (
|
||
<StoryPage>
|
||
<StoryPageHeader title="Loading Screen" />
|
||
<StorySection title="Variants">
|
||
{/* Default spans the full width; the other two share an equal 2-column row (1 column below 2 × 560px). */}
|
||
<StateBoard
|
||
min={560}
|
||
states={[
|
||
{ id: "default", label: "Default", wide: true, children: <LoadingScreen /> },
|
||
{ id: "label", label: "Custom label", children: <LoadingScreen>데이터를 불러오는 중</LoadingScreen> },
|
||
{ id: "narrow", label: "Narrow parent (240px)", children: <div style={{ width: 240 }}><LoadingScreen /></div> },
|
||
]}
|
||
/>
|
||
</StorySection>
|
||
<StorySection title="Usage">
|
||
<Fullscreen />
|
||
</StorySection>
|
||
</StoryPage>
|
||
),
|
||
}
|
||
export const Inline: Story = { tags: ["verification"], render: () => <LoadingScreen /> }
|