20 lines
780 B
TypeScript
20 lines
780 B
TypeScript
import { Dialog } from 'mdui'
|
|
import 'pinch-zoom-element'
|
|
import React from "react"
|
|
|
|
export default function ImageViewer() {
|
|
const dialogRef = React.useRef<Dialog>()
|
|
|
|
return <mdui-dialog ref={dialogRef} fullscreen="fullscreen">
|
|
<mdui-button-icon icon="open_in_new"
|
|
onclick="window.open(document.querySelector('#image-viewer-dialog-inner > *').src, '_blank')">
|
|
</mdui-button-icon>
|
|
<mdui-button-icon icon="close" onClick={() => dialogRef.current!.open = false}>
|
|
</mdui-button-icon>
|
|
{
|
|
// @ts-ignore 注册了这个元素
|
|
<pinch-zoom id="image-viewer-dialog-inner" style="width: var(--whitesilk-window-width); height: var(--whitesilk-window-height);"></pinch-zoom>
|
|
}
|
|
</mdui-dialog>
|
|
}
|