Maofeng
59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
import { LanguagesIcon } from "@workspace/ui/components/icon"
|
|
|
|
import { useDevtoolLocalization } from "./devtool-localization"
|
|
import { useFloatingTrigger } from "./use-floating-trigger"
|
|
|
|
export interface I18nDevtoolTriggerProps {
|
|
controls?: string
|
|
open?: boolean
|
|
onOpen: () => void
|
|
storageKey?: string
|
|
}
|
|
|
|
export function I18nDevtoolTrigger({
|
|
controls = "i18n-devtool-panel",
|
|
open = false,
|
|
onOpen,
|
|
storageKey,
|
|
}: I18nDevtoolTriggerProps) {
|
|
const floatingTrigger = useFloatingTrigger({ storageKey })
|
|
const { messages } = useDevtoolLocalization()
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
aria-controls={controls}
|
|
aria-expanded={open}
|
|
aria-label={messages.trigger.open}
|
|
className="i18n-devtool__trigger"
|
|
data-collapsed={floatingTrigger.isCollapsed || undefined}
|
|
data-dock={floatingTrigger.dockEdge}
|
|
data-dragging={floatingTrigger.isDragging || undefined}
|
|
hidden={open}
|
|
ref={floatingTrigger.triggerRef}
|
|
style={floatingTrigger.style}
|
|
onBlur={floatingTrigger.handleBlur}
|
|
onClick={(event) => {
|
|
if (floatingTrigger.handleClick()) {
|
|
event.preventDefault()
|
|
return
|
|
}
|
|
|
|
onOpen()
|
|
}}
|
|
onFocus={floatingTrigger.handleFocus}
|
|
onPointerCancel={floatingTrigger.handlePointerCancel}
|
|
onPointerDown={floatingTrigger.handlePointerDown}
|
|
onPointerEnter={floatingTrigger.handlePointerEnter}
|
|
onPointerLeave={floatingTrigger.handlePointerLeave}
|
|
onPointerMove={floatingTrigger.handlePointerMove}
|
|
onPointerUp={floatingTrigger.handlePointerUp}
|
|
>
|
|
<span className="i18n-devtool__trigger-icon" aria-hidden="true">
|
|
<LanguagesIcon />
|
|
</span>
|
|
<span className="i18n-devtool__trigger-label">i18n</span>
|
|
</button>
|
|
)
|
|
}
|