55 lines
2.9 KiB
TypeScript
55 lines
2.9 KiB
TypeScript
// Example B — composition (2nd priority): a simplified SW NORMAL-mode header (SWHeader parts, not SWViewer*)
|
|
// Logo → File → Layer → Color → K
|
|
// Only public components; the layout is the consumer's (example-layout.css) and <SWTheme> provides tokens.
|
|
// SW normal mode: individual SWHeader controls inside <SWTheme>. It is NOT the SW viewer mode — a viewer screen
|
|
// (DWG/DXF viewing) uses SWViewerHeader / SWViewerMenu / SWViewerPanel (Example H, VIEWER.md). "Viewer" in the file
|
|
// name, the function name and the sample labels (aria-label "뷰어 헤더", logoAlt "뷰어") is a former name of this
|
|
// sample product, kept so existing imports keep working.
|
|
import { useState } from "react"
|
|
import {
|
|
SWHeaderActions, SWHeaderColorMenu, SWHeaderDocumentTitle, SWHeaderHome, SWHeaderLayerMenu, SWTheme,
|
|
type SWHeaderColorMode, type SWHeaderColorValue,
|
|
} from "@hm-design/sw"
|
|
import { colors, documents, layers } from "./sample-data"
|
|
import "./example-layout.css"
|
|
|
|
export function ExampleBViewerHeader({ onEvent }: { onEvent?: (name: string) => void }) {
|
|
const [activeDocumentId, setActiveDocumentId] = useState(documents[0].id)
|
|
const [activeLayerId, setActiveLayerId] = useState("0")
|
|
const [color, setColor] = useState<SWHeaderColorValue>({ value: "ByLayer", swatch: "#ffffff" })
|
|
const [colorMode, setColorMode] = useState<SWHeaderColorMode | null>("byLayer")
|
|
return (
|
|
<SWTheme className="app-sw-bar" role="banner" aria-label="뷰어 헤더">
|
|
<SWHeaderHome logoAlt="뷰어" onClick={() => onEvent?.("home")} />
|
|
<SWHeaderDocumentTitle
|
|
title={documents.find(item => item.id === activeDocumentId)?.name ?? ""}
|
|
documents={documents}
|
|
activeDocumentId={activeDocumentId}
|
|
onDocumentSelect={document => { setActiveDocumentId(document.id); onEvent?.(`document:${document.id}`) }}
|
|
onNew={() => onEvent?.("document:new")}
|
|
onOpen={() => onEvent?.("document:open")}
|
|
/>
|
|
<div className="app-sw-surface" role="toolbar" aria-label="보기 설정">
|
|
<SWHeaderLayerMenu
|
|
value={{ name: "0" }}
|
|
layers={layers}
|
|
activeLayerId={activeLayerId}
|
|
onLayerSelect={layer => { setActiveLayerId(layer.id); onEvent?.(`layer:${layer.id}`) }}
|
|
onVisibilityChange={(layer, next) => onEvent?.(`layer-visible:${layer.id}:${next}`)}
|
|
/>
|
|
<SWHeaderColorMenu
|
|
value={color}
|
|
colors={colors}
|
|
mode={colorMode}
|
|
onColorSelect={option => { setColor({ value: option.label ?? option.color, swatch: option.color }); setColorMode(null); onEvent?.(`color:${option.id}`) }}
|
|
onModeChange={mode => { setColorMode(mode); onEvent?.(`colorMode:${mode}`) }}
|
|
/>
|
|
</div>
|
|
<div className="app-sw-window">
|
|
{/* K only: the existing actions pill with print removed. */}
|
|
<SWHeaderActions showPrint={false} onPopupGuide={() => onEvent?.("popupGuide")} />
|
|
</div>
|
|
</SWTheme>
|
|
)
|
|
}
|