UNPKG

@lobehub/ui

Version:

Lobe UI is an open-source UI component library for building AIGC web apps

1 lines • 1.98 kB
{"version":3,"file":"useImagePreview.mjs","names":[],"sources":["../../src/Image/useImagePreview.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactNode, type RefObject, useCallback, useMemo } from 'react';\n\nimport type { ImagePreviewOptions } from './type';\nimport { DEFAULT_AUTO_ZOOM_THRESHOLD, DEFAULT_MAX_SCALE } from './viewer/geometry';\nimport PreviewOutlet from './viewer/PreviewOutlet';\nimport { openPreview, type ResolvedPreviewOptions } from './viewer/registry';\n\nexport interface UseImagePreviewResult {\n open: () => void;\n outlet: ReactNode;\n}\n\nexport const useImagePreview = (\n elementRef: RefObject<HTMLImageElement | null>,\n options?: ImagePreviewOptions,\n): UseImagePreviewResult => {\n const resolvedOptions = useMemo<ResolvedPreviewOptions>(\n () => ({\n autoZoomThreshold: DEFAULT_AUTO_ZOOM_THRESHOLD,\n defaultZoom: 'auto',\n maxScale: DEFAULT_MAX_SCALE,\n ...options,\n }),\n [options],\n );\n\n const open = useCallback(() => {\n const element = elementRef.current;\n if (!element) return;\n const active = document.activeElement;\n openPreview(\n {\n element,\n options: resolvedOptions,\n previewSrc: resolvedOptions.src,\n src: element.currentSrc || element.src,\n },\n undefined,\n 0,\n active instanceof HTMLElement && active !== document.body ? active : null,\n );\n }, [elementRef, resolvedOptions]);\n\n return { open, outlet: <PreviewOutlet elementRef={elementRef} /> };\n};\n"],"mappings":";;;;;;AAcA,MAAa,mBACX,YACA,YAC0B;CAC1B,MAAM,kBAAkB,eACf;EACL,mBAAA;EACA,aAAa;EACb,UAAA;EACA,GAAG;CACL,IACA,CAAC,OAAO,CACV;CAmBA,OAAO;EAAE,MAjBI,kBAAkB;GAC7B,MAAM,UAAU,WAAW;GAC3B,IAAI,CAAC,SAAS;GACd,MAAM,SAAS,SAAS;GACxB,YACE;IACE;IACA,SAAS;IACT,YAAY,gBAAgB;IAC5B,KAAK,QAAQ,cAAc,QAAQ;GACrC,GACA,KAAA,GACA,GACA,kBAAkB,eAAe,WAAW,SAAS,OAAO,SAAS,IACvE;EACF,GAAG,CAAC,YAAY,eAAe,CAEnB;EAAG,QAAQ,oBAAC,eAAD,EAA2B,WAAa,CAAA;CAAE;AACnE"}