@lobehub/ui/es/Image/Image.mjs.map

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

{"version":3,"file":"Image.mjs","names":["Flexbox"],"sources":["../../src/Image/Image.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useThemeMode } from 'antd-style';\nimport {\n  memo,\n  type MouseEvent,\n  type PointerEvent,\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { SkeletonAvatar } from '@/Skeleton';\n\nimport { usePreviewGroupContext } from './PreviewGroup';\nimport { FALLBACK_DARK, FALLBACK_LIGHT, styles, variants } from './style';\nimport type { ImagePreviewOptions, ImageProps } from './type';\nimport { DEFAULT_AUTO_ZOOM_THRESHOLD, DEFAULT_MAX_SCALE } from './viewer/geometry';\nimport PreviewOutlet from './viewer/PreviewOutlet';\nimport { openPreview, type PreviewEntry } from './viewer/registry';\n\nconst resolvePreview = (\n  groupPreview: boolean | ImagePreviewOptions | undefined,\n  imagePreview: boolean | ImagePreviewOptions | undefined,\n): ImagePreviewOptions | false => {\n  if (imagePreview === false) return false;\n  if (imagePreview === undefined && groupPreview === false) return false;\n\n  const groupOptions = typeof groupPreview === 'object' ? groupPreview : undefined;\n  const imageOptions = typeof imagePreview === 'object' ? imagePreview : undefined;\n\n  return { ...groupOptions, ...imageOptions };\n};\n\nconst Image = memo<ImageProps>(\n  ({\n    ref,\n    style,\n    preview,\n    isLoading,\n    maxHeight = '100%',\n    maxWidth = '100%',\n    minHeight,\n    minWidth,\n    actions,\n    className,\n    alwaysShowActions,\n    variant = 'filled',\n    objectFit = 'cover',\n    classNames,\n    styles: customStyles,\n    onClick,\n    onError,\n    onPointerDown,\n    width,\n    height,\n    size,\n    src,\n    alt,\n    loading = 'lazy',\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const [hasError, setHasError] = useState(false);\n    const lastSrcRef = useRef(src);\n    const imgRef = useRef<HTMLImageElement>(null);\n    const preOpenFocusRef = useRef<HTMLElement | null>(null);\n    const id = useId();\n    const group = usePreviewGroupContext();\n\n    if (lastSrcRef.current !== src) {\n      lastSrcRef.current = src;\n      if (hasError) setHasError(false);\n    }\n\n    const resolvedWidth = width ?? size;\n    const resolvedHeight = height ?? size;\n\n    const resolvedPreview = resolvePreview(group?.preview, preview);\n    const previewEnabled = resolvedPreview !== false;\n    const resolvedOptions = useMemo(\n      () =>\n        previewEnabled\n          ? {\n              autoZoomThreshold: DEFAULT_AUTO_ZOOM_THRESHOLD,\n              defaultZoom: 'auto' as const,\n              maxScale: DEFAULT_MAX_SCALE,\n              ...resolvedPreview,\n            }\n          : undefined,\n      [previewEnabled, resolvedPreview],\n    );\n    const previewSrc = resolvedOptions?.src;\n\n    useEffect(() => {\n      if (!group) return;\n      return group.register({\n        getElement: () => imgRef.current,\n        id,\n        options: resolvedOptions,\n        previewSrc,\n        src: src ?? '',\n      });\n    }, [group, id, src, previewSrc, resolvedOptions]);\n\n    const handleError = useCallback(\n      (event: SyntheticEvent<HTMLImageElement>) => {\n        setHasError(true);\n        onError?.(event);\n      },\n      [onError],\n    );\n\n    const handlePointerDown = useCallback(\n      (event: PointerEvent<HTMLImageElement>) => {\n        onPointerDown?.(event);\n        const active = document.activeElement;\n        preOpenFocusRef.current =\n          active instanceof HTMLElement &&\n          active !== document.body &&\n          active !== document.documentElement\n            ? active\n            : null;\n      },\n      [onPointerDown],\n    );\n\n    const handleClick = useCallback(\n      (event: MouseEvent<HTMLImageElement>) => {\n        onClick?.(event);\n        if (!previewEnabled || !imgRef.current || !resolvedOptions) return;\n        const clickedEntry: PreviewEntry = {\n          element: imgRef.current,\n          options: resolvedOptions,\n          previewSrc,\n          src: imgRef.current.currentSrc || imgRef.current.src,\n        };\n        const openerFocusElement = preOpenFocusRef.current;\n\n        if (!group) {\n          openPreview(clickedEntry, undefined, 0, openerFocusElement);\n          return;\n        }\n\n        const galleryEntries: PreviewEntry[] = [];\n        let clickedIndex = -1;\n        for (const groupEntry of group.getEntries()) {\n          const element = groupEntry.getElement();\n          if (!element || !groupEntry.options) continue;\n          if (element === imgRef.current) clickedIndex = galleryEntries.length;\n          galleryEntries.push({\n            element,\n            options: groupEntry.options,\n            previewSrc: groupEntry.previewSrc,\n            src: element.currentSrc || element.src,\n          });\n        }\n        openPreview(\n          clickedEntry,\n          galleryEntries,\n          clickedIndex >= 0 ? clickedIndex : 0,\n          openerFocusElement,\n        );\n      },\n      [onClick, previewEnabled, resolvedOptions, previewSrc, group],\n    );\n\n    const actionsClassName = alwaysShowActions ? styles.actionsVisible : styles.actionsHidden;\n\n    if (isLoading)\n      return (\n        <div onClick={onClick}>\n          <SkeletonAvatar\n            active\n            height={resolvedHeight}\n            style={{ maxHeight, maxWidth, minHeight, minWidth }}\n            width={resolvedWidth}\n          />\n        </div>\n      );\n\n    return (\n      <Flexbox className={cx(variants({ variant }), className)} ref={ref} style={style}>\n        {actions && (\n          <div className={cx(actionsClassName, alwaysShowActions ? '' : 'actions-hidden')}>\n            {actions}\n          </div>\n        )}\n        <div className={cx(styles.wrapper, classNames?.wrapper)} style={customStyles?.wrapper}>\n          <img\n            alt={alt}\n            className={cx(styles.image, previewEnabled && styles.previewable, classNames?.image)}\n            height={resolvedHeight}\n            loading={loading}\n            ref={imgRef}\n            src={hasError ? (isDarkMode ? FALLBACK_DARK : FALLBACK_LIGHT) : src}\n            width={resolvedWidth}\n            style={{\n              height: resolvedHeight,\n              maxHeight,\n              maxWidth,\n              minHeight,\n              minWidth,\n              objectFit,\n              width: resolvedWidth,\n              ...customStyles?.image,\n            }}\n            onClick={handleClick}\n            onError={handleError}\n            onPointerDown={handlePointerDown}\n            {...rest}\n          />\n        </div>\n        {previewEnabled && <PreviewOutlet elementRef={imgRef} />}\n      </Flexbox>\n    );\n  },\n);\n\nImage.displayName = 'Image';\n\nexport default Image;\n"],"mappings":"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"}