zarm/lib/image-preview/ImagePreview.js

基于 React 的移动端UI库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = require("@use-gesture/react");

var _bem = require("@zarm-design/bem");

var _react2 = _interopRequireWildcard(require("react"));

var _button = _interopRequireDefault(require("../button"));

var _carousel = _interopRequireDefault(require("../carousel"));

var _configProvider = require("../config-provider");

var _loading = _interopRequireDefault(require("../loading"));

var _pinchZoom = _interopRequireDefault(require("../pinch-zoom"));

var _popup = _interopRequireDefault(require("../popup"));

var _dom = require("../utils/dom");

var _formatImages = _interopRequireDefault(require("./utils/formatImages"));

var _loadStatus = _interopRequireDefault(require("./utils/loadStatus"));

var _showOriginButton = _interopRequireDefault(require("./utils/showOriginButton"));

var _window, _window2, _window3, _window4, _window5, _window6;

function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }

function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n.default = e, t && t.set(e, n), n; }

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }

function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }

var imageStyle = {
  maxWidth: _dom.canUseDOM && ((_window = window) === null || _window === void 0 ? void 0 : _window.innerWidth) <= ((_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.innerHeight) ? (_window3 = window) === null || _window3 === void 0 ? void 0 : _window3.innerWidth : undefined,
  maxHeight: _dom.canUseDOM && ((_window4 = window) === null || _window4 === void 0 ? void 0 : _window4.innerHeight) <= ((_window5 = window) === null || _window5 === void 0 ? void 0 : _window5.innerWidth) ? (_window6 = window) === null || _window6 === void 0 ? void 0 : _window6.innerHeight : undefined
};

var Content = function Content(props) {
  var minScale = props.minScale,
      maxScale = props.maxScale,
      imgSrc = props.imgSrc;

  var _useState = (0, _react2.useState)(false),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      loaded = _useState2[0],
      setLoaded = _useState2[1];

  var style = loaded ? _objectSpread(_objectSpread({}, imageStyle), {}, {
    display: 'block'
  }) : imageStyle;

  var _React$useContext = _react2.default.useContext(_configProvider.ConfigContext),
      prefixCls = _React$useContext.prefixCls;

  var bem = (0, _bem.createBEM)('image-preview', {
    prefixCls: prefixCls
  });
  return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, !loaded ? /*#__PURE__*/_react2.default.createElement("div", {
    className: bem('loading')
  }, /*#__PURE__*/_react2.default.createElement(_loading.default, {
    type: "spinner",
    size: "lg"
  })) : null, /*#__PURE__*/_react2.default.createElement(_pinchZoom.default, {
    minScale: minScale,
    maxScale: maxScale
  }, /*#__PURE__*/_react2.default.createElement("img", {
    src: imgSrc,
    alt: "",
    draggable: false,
    style: style,
    onLoad: function onLoad() {
      return setLoaded(true);
    }
  })));
};

var ImagePreview = /*#__PURE__*/_react2.default.forwardRef(function (props, ref) {
  var visible = props.visible,
      activeIndex = props.activeIndex,
      onClose = props.onClose,
      showPagination = props.showPagination,
      minScale = props.minScale,
      maxScale = props.maxScale,
      className = props.className,
      style = props.style,
      mountContainer = props.mountContainer,
      title = props.title;

  var _useState3 = (0, _react2.useState)((0, _formatImages.default)(props.images)),
      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
      images = _useState4[0],
      setImages = _useState4[1];

  var _useState5 = (0, _react2.useState)(activeIndex),
      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
      currentIndex = _useState6[0],
      setCurrentIndex = _useState6[1];

  var _React$useContext2 = _react2.default.useContext(_configProvider.ConfigContext),
      prefixCls = _React$useContext2.prefixCls,
      locale = _React$useContext2.locale;

  var bem = (0, _bem.createBEM)('image-preview', {
    prefixCls: prefixCls
  });
  (0, _react2.useEffect)(function () {
    setImages((0, _formatImages.default)(props.images));
  }, [props.images, visible]);
  (0, _react2.useEffect)(function () {
    setCurrentIndex(activeIndex);
  }, [activeIndex]);

  var onChange = function onChange(index) {
    var _props$onChange;

    setCurrentIndex(index);
    (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, index);
  };

  var loadOrigin = function loadOrigin(event) {
    var _images$currentIndex = images[currentIndex],
        originSrc = _images$currentIndex.originSrc,
        loaded = _images$currentIndex.loaded;

    if (loaded !== _loadStatus.default.before || !originSrc) {
      return;
    }

    var newImages = (0, _toConsumableArray2.default)(images);
    newImages[currentIndex].loaded = _loadStatus.default.start;
    setImages(newImages);
    var img = new Image();

    img.onload = function () {
      var loadImages = (0, _toConsumableArray2.default)(images);
      loadImages[currentIndex].loaded = _loadStatus.default.end;
      loadImages[currentIndex].src = originSrc;
      setImages(loadImages);
      setTimeout(function () {
        var loadAfeterImages = (0, _toConsumableArray2.default)(images);
        loadAfeterImages[currentIndex].loaded = _loadStatus.default.after;
        setImages(loadAfeterImages);
      }, 0);
    };

    img.src = originSrc;
    event.stopPropagation();
    return false;
  };

  var bindEvent = (0, _react.useDrag)(function (state) {
    if (state.tap && state.elapsedTime > 0) {
      onClose === null || onClose === void 0 ? void 0 : onClose();
    }
  });
  var loadEvent = (0, _react.useDrag)(function (state) {
    if (state.tap && state.elapsedTime > 0) {
      loadOrigin(state.event);
    }
  });

  var renderImages = function renderImages() {
    return images.map(function (item, i) {
      return /*#__PURE__*/_react2.default.createElement("div", {
        className: bem('item'),
        key: +i
      }, /*#__PURE__*/_react2.default.createElement(Content, {
        imgSrc: item.src,
        minScale: minScale,
        maxScale: maxScale
      }));
    });
  };

  var renderPagination = function renderPagination() {
    if (visible && showPagination && images && images.length > 1) {
      return /*#__PURE__*/_react2.default.createElement("div", (0, _extends2.default)({
        className: bem('pagination')
      }, bindEvent()), currentIndex + 1, " / ", images === null || images === void 0 ? void 0 : images.length);
    }

    return null;
  };

  var renderOriginButton = function renderOriginButton() {
    if ((images === null || images === void 0 ? void 0 : images.length) === 0) return;

    var _images = images === null || images === void 0 ? void 0 : images[currentIndex || 0],
        loaded = _images.loaded;

    if (loaded && (0, _showOriginButton.default)(images, currentIndex) && loaded !== _loadStatus.default.after && visible) {
      var _locale$ImagePreview;

      return /*#__PURE__*/_react2.default.createElement(_button.default, (0, _extends2.default)({
        size: "xs",
        loading: loaded === _loadStatus.default.start
      }, loadEvent()), (locale === null || locale === void 0 ? void 0 : locale.ImagePreview) && (locale === null || locale === void 0 ? void 0 : (_locale$ImagePreview = locale.ImagePreview) === null || _locale$ImagePreview === void 0 ? void 0 : _locale$ImagePreview[loaded]));
    }

    return null;
  };

  return /*#__PURE__*/_react2.default.createElement(_popup.default, {
    className: bem([className]),
    style: style,
    direction: "center",
    visible: visible,
    mountContainer: mountContainer,
    maskOpacity: 1
  }, /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement("div", {
    className: bem('title')
  }, title), /*#__PURE__*/_react2.default.createElement("div", (0, _extends2.default)({
    ref: ref,
    className: bem('content')
  }, bindEvent()), visible && (images !== null && images !== void 0 && images.length ? /*#__PURE__*/_react2.default.createElement(_carousel.default, {
    showPagination: false,
    onChange: onChange,
    activeIndex: currentIndex,
    swipeable: true
  }, renderImages()) : /*#__PURE__*/_react2.default.createElement(_loading.default, {
    type: "spinner",
    size: "lg"
  }))), /*#__PURE__*/_react2.default.createElement("div", {
    className: bem('footer')
  }, renderOriginButton(), renderPagination())));
});

ImagePreview.displayName = 'ImagePreview';
ImagePreview.defaultProps = {
  activeIndex: 0,
  showPagination: true,
  visible: false,
  minScale: 1,
  maxScale: 3
};
var _default = ImagePreview;
exports.default = _default;