tdesign-react/lib/image-viewer/ImageViewer.js

TDesign Component for React

/**
 * tdesign v1.11.6
 * (c) 2025 tdesign
 * @license MIT
 */

import { _ as _slicedToArray } from '../_chunks/dep-889449c8.js';
import React, { useState, useMemo } from 'react';
import { createPortal } from 'react-dom';
import { isFunction } from 'lodash-es';
import { I as ImageModal } from '../_chunks/dep-aa0c2313.js';
import { imageViewerDefaultProps } from './defaultProps.js';
import useImageScale from './hooks/useImageScale.js';
import useList from './hooks/useList.js';
import useViewerScale from './hooks/useViewerScale.js';
import useControlled from '../hooks/useControlled.js';
import useDefaultProps from '../hooks/useDefaultProps.js';
import { canUseDocument } from '../_util/dom.js';
import useAttach from '../hooks/useAttach.js';
import '../_chunks/dep-901cf2d8.js';
import '../_chunks/dep-2c6eb8e0.js';
import '../_chunks/dep-fb209a0c.js';
import '../_chunks/dep-9a3c539e.js';
import '../_chunks/dep-6625929b.js';
import 'tdesign-icons-react';
import 'classnames';
import '../hooks/useImagePreviewUrl.js';
import '../_chunks/dep-fad5d621.js';
import '../_chunks/dep-d06ab0b3.js';
import '../tooltip/index.js';
import '../tooltip/Tooltip.js';
import '../popup/index.js';
import '../popup/Popup.js';
import 'react-transition-group';
import 'react-popper';
import '../hooks/useAnimation.js';
import '../hooks/useConfig.js';
import '../config-provider/ConfigContext.js';
import '../_chunks/dep-14e7d402.js';
import '../_chunks/dep-72ba05e7.js';
import 'dayjs';
import '../common/Portal.js';
import '../hooks/useLayoutEffect.js';
import '../popup/hooks/useTrigger.js';
import 'react-is';
import '../popup/utils/ref.js';
import '../_util/composeRefs.js';
import '../popup/utils/transition.js';
import '../hooks/useMutationObserver.js';
import '../hooks/useLatest.js';
import '../hooks/useWindowSize.js';
import '../popup/defaultProps.js';
import '../_util/noop.js';
import 'raf';
import '../_util/easing.js';
import '../popup/PopupPlugin.js';
import '@popperjs/core';
import '../_util/react-render.js';
import '../tooltip/defaultProps.js';
import '../tooltip/TooltipLite.js';
import '../hooks/useSwitch.js';
import '../hooks/usePersistFn.js';
import '../locale/LocalReceiver.js';
import '../config-provider/ConfigProvider.js';
import './utils.js';
import '../dialog/index.js';
import '../dialog/Dialog.js';
import '../hooks/useSetState.js';
import '../dialog/defaultProps.js';
import '../dialog/DialogCard.js';
import '../button/index.js';
import '../button/Button.js';
import '../hooks/useDomRefCallback.js';
import '../hooks/useRipple.js';
import '../_util/setStyle.js';
import '../loading/index.js';
import '../loading/Loading.js';
import '../_chunks/dep-6a220fbc.js';
import '../_chunks/dep-3bd4dc4e.js';
import '../_chunks/dep-7a114245.js';
import '../loading/defaultProps.js';
import '../loading/plugin.js';
import '../common/PluginContainer.js';
import '../button/defaultProps.js';
import '../_util/parseTNode.js';
import '../hooks/useGlobalIcon.js';
import '../dialog/hooks/useDialogEsc.js';
import '../dialog/hooks/useLockStyle.js';
import '../_chunks/dep-fcea50ed.js';
import '../dialog/hooks/useDialogPosition.js';
import '../dialog/hooks/useDialogDrag.js';
import '../dialog/utils.js';
import '../dialog/plugin.js';
import './hooks/useMirror.js';
import './hooks/usePosition.js';
import './hooks/useIndex.js';
import './hooks/useRotate.js';
import './hooks/useScale.js';
import './hooks/useIconMap.js';
import '../image/index.js';
import '../image/Image.js';
import '../_chunks/dep-4382179f.js';
import '../image/defaultProps.js';
import '../space/index.js';
import '../space/Space.js';
import '../space/defaultProps.js';

var ImageViewer = function ImageViewer(originalProps) {
  var props = useDefaultProps(originalProps, imageViewerDefaultProps);
  var attach = props.attach,
    mode = props.mode,
    trigger = props.trigger,
    images = props.images,
    title = props.title,
    imageScaleD = props.imageScale,
    viewerScaleD = props.viewerScale;
  var imageViewerAttach = useAttach("imageViewer", attach);
  var _useControlled = useControlled(props, "visible", function (visible2, context) {
      var _props$onClose;
      !visible2 && (props === null || props === void 0 || (_props$onClose = props.onClose) === null || _props$onClose === void 0 ? void 0 : _props$onClose.call(props, context));
    }),
    _useControlled2 = _slicedToArray(_useControlled, 2),
    visible = _useControlled2[0],
    setVisible = _useControlled2[1];
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    visibled = _useState2[0],
    setVisibled = _useState2[1];
  var list = useList(images);
  var imageScale = useImageScale(imageScaleD);
  var viewerScale = useViewerScale(viewerScaleD);
  var isMini = mode === "modeless";
  var close = function close(context) {
    setVisible(false, context);
    setTimeout(function () {
      return setVisibled(false);
    }, 196);
  };
  var open = function open() {
    if (!images) return;
    setVisible(true, null);
    setVisibled(true);
  };
  var uiImage = isFunction(trigger) ? trigger({
    open: open,
    close: close,
    onOpen: open,
    onClose: close
  }) : trigger;
  var attachElement = useMemo(function () {
    if (!canUseDocument || !imageViewerAttach) return null;
    if (typeof imageViewerAttach === "string") {
      return document.querySelector(imageViewerAttach);
    }
    if (isFunction(imageViewerAttach)) {
      return imageViewerAttach();
    }
  }, [imageViewerAttach]);
  return /* @__PURE__ */React.createElement(React.Fragment, null, uiImage, (visibled || visible) && /*#__PURE__*/createPortal(/* @__PURE__ */React.createElement(ImageModal, {
    title: title,
    visible: visible,
    images: list,
    isMini: isMini,
    imageScale: imageScale,
    viewerScale: viewerScale,
    zIndex: props.zIndex,
    defaultIndex: props.defaultIndex,
    index: props.index,
    onIndexChange: props.onIndexChange,
    onDownload: props.onDownload,
    draggable: props.draggable,
    closeOnOverlay: props.closeOnOverlay,
    closeBtn: props.closeBtn,
    showOverlay: props.showOverlay,
    closeOnEscKeydown: props.closeOnEscKeydown,
    onClose: close,
    onOpen: open,
    imageReferrerpolicy: props.imageReferrerpolicy
  }), attachElement));
};
ImageViewer.displayName = "ImageViewer";

export { ImageViewer as default };
//# sourceMappingURL=ImageViewer.js.map