antd-mobile/cjs/components/image-viewer/image-viewer.js

<div align="center">

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MultiImageViewer = exports.ImageViewer = void 0;
var _react = _interopRequireWildcard(require("react"));
var _withDefaultProps = require("../../utils/with-default-props");
var _renderToContainer = require("../../utils/render-to-container");
var _mask = _interopRequireDefault(require("../mask"));
var _safeArea = _interopRequireDefault(require("../safe-area"));
var _slide = require("./slide");
var _slides = require("./slides");
var _classnames = _interopRequireDefault(require("classnames"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
const classPrefix = `adm-image-viewer`;
const defaultProps = {
  maxZoom: 3,
  getContainer: null,
  visible: false
};
const ImageViewer = p => {
  var _a, _b, _c;
  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
  const node = _react.default.createElement(_mask.default, {
    visible: props.visible,
    disableBodyScroll: false,
    opacity: 'thick',
    afterClose: props.afterClose,
    destroyOnClose: true,
    className: (_a = props === null || props === void 0 ? void 0 : props.classNames) === null || _a === void 0 ? void 0 : _a.mask
  }, _react.default.createElement("div", {
    className: (0, _classnames.default)(`${classPrefix}-content`, (_b = props === null || props === void 0 ? void 0 : props.classNames) === null || _b === void 0 ? void 0 : _b.body)
  }, props.image && _react.default.createElement(_slide.Slide, {
    image: props.image,
    onTap: props.onClose,
    maxZoom: props.maxZoom
  })), props.image && _react.default.createElement("div", {
    className: `${classPrefix}-footer`
  }, (_c = props.renderFooter) === null || _c === void 0 ? void 0 : _c.call(props, props.image), _react.default.createElement(_safeArea.default, {
    position: 'bottom'
  })));
  return (0, _renderToContainer.renderToContainer)(props.getContainer, node);
};
exports.ImageViewer = ImageViewer;
const multiDefaultProps = Object.assign(Object.assign({}, defaultProps), {
  defaultIndex: 0
});
const MultiImageViewer = (0, _react.forwardRef)((p, ref) => {
  var _a, _b, _c;
  const props = (0, _withDefaultProps.mergeProps)(multiDefaultProps, p);
  const [index, setIndex] = (0, _react.useState)(props.defaultIndex);
  const slidesRef = (0, _react.useRef)(null);
  (0, _react.useImperativeHandle)(ref, () => ({
    swipeTo: (index, immediate) => {
      var _a;
      setIndex(index);
      (_a = slidesRef.current) === null || _a === void 0 ? void 0 : _a.swipeTo(index, immediate);
    }
  }));
  const onSlideChange = (0, _react.useCallback)(newIndex => {
    var _a;
    if (newIndex === index) return;
    setIndex(newIndex);
    (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, newIndex);
  }, [props.onIndexChange, index]);
  const node = _react.default.createElement(_mask.default, {
    visible: props.visible,
    disableBodyScroll: false,
    opacity: 'thick',
    afterClose: props.afterClose,
    destroyOnClose: true,
    className: (_a = props === null || props === void 0 ? void 0 : props.classNames) === null || _a === void 0 ? void 0 : _a.mask
  }, _react.default.createElement("div", {
    className: (0, _classnames.default)(`${classPrefix}-content`, (_b = props === null || props === void 0 ? void 0 : props.classNames) === null || _b === void 0 ? void 0 : _b.body)
  }, props.images && _react.default.createElement(_slides.Slides, {
    ref: slidesRef,
    defaultIndex: index,
    onIndexChange: onSlideChange,
    images: props.images,
    onTap: props.onClose,
    maxZoom: props.maxZoom
  })), props.images && _react.default.createElement("div", {
    className: `${classPrefix}-footer`
  }, (_c = props.renderFooter) === null || _c === void 0 ? void 0 : _c.call(props, props.images[index], index), _react.default.createElement(_safeArea.default, {
    position: 'bottom'
  })));
  return (0, _renderToContainer.renderToContainer)(props.getContainer, node);
});
exports.MultiImageViewer = MultiImageViewer;