ant-design-vue/es/vc-image/src/PreviewGroup.js

An enterprise-class UI design language and Vue-based implementation

import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _objectDestructuringEmpty from "@babel/runtime/helpers/esm/objectDestructuringEmpty";
import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _typeof from "@babel/runtime/helpers/esm/typeof";
import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
import { ref, provide as _provide, defineComponent, inject as _inject, watch, reactive, computed, watchEffect } from 'vue';
import { mergeDefaultValue } from './Image';
import Preview from './Preview';
import useMergedState from '../../_util/hooks/useMergedState';
var previewGroupContext = Symbol('previewGroupContext');
export var context = {
  provide: function provide(val) {
    _provide(previewGroupContext, val);
  },
  inject: function inject() {
    return _inject(previewGroupContext, {
      isPreviewGroup: ref(false),
      previewUrls: computed(function () {
        return new Map();
      }),
      setPreviewUrls: function setPreviewUrls() {},
      current: ref(null),
      setCurrent: function setCurrent() {},
      setShowPreview: function setShowPreview() {},
      setMousePosition: function setMousePosition() {},
      registerImage: null,
      rootClassName: ''
    });
  }
};
var Group = defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: 'PreviewGroup',
  inheritAttrs: false,
  props: {
    previewPrefixCls: String,
    preview: {
      type: [Boolean, Object],
      default: true
    },
    icons: {
      type: Object,
      default: function _default() {
        return {};
      }
    }
  },
  setup: function setup(props, _ref) {
    var slots = _ref.slots;
    var preview = computed(function () {
      var defaultValues = {
        visible: undefined,
        onVisibleChange: function onVisibleChange() {},
        getContainer: undefined,
        current: 0
      };
      return _typeof(props.preview) === 'object' ? mergeDefaultValue(props.preview, defaultValues) : defaultValues;
    });
    var previewUrls = reactive(new Map());
    var current = ref();
    var previewVisible = computed(function () {
      return preview.value.visible;
    });
    var getPreviewContainer = computed(function () {
      return preview.value.getContainer;
    });
    var onPreviewVisibleChange = function onPreviewVisibleChange(val, preval) {
      var _preview$value$onVisi, _preview$value;
      (_preview$value$onVisi = (_preview$value = preview.value).onVisibleChange) === null || _preview$value$onVisi === void 0 ? void 0 : _preview$value$onVisi.call(_preview$value, val, preval);
    };
    var _useMergedState = useMergedState(!!previewVisible.value, {
        value: previewVisible,
        onChange: onPreviewVisibleChange
      }),
      _useMergedState2 = _slicedToArray(_useMergedState, 2),
      isShowPreview = _useMergedState2[0],
      setShowPreview = _useMergedState2[1];
    var mousePosition = ref(null);
    var isControlled = computed(function () {
      return previewVisible.value !== undefined;
    });
    var previewUrlsKeys = computed(function () {
      return Array.from(previewUrls.keys());
    });
    var currentControlledKey = computed(function () {
      return previewUrlsKeys.value[preview.value.current];
    });
    var canPreviewUrls = computed(function () {
      return new Map(Array.from(previewUrls).filter(function (_ref2) {
        var _ref3 = _slicedToArray(_ref2, 2),
          canPreview = _ref3[1].canPreview;
        return !!canPreview;
      }).map(function (_ref4) {
        var _ref5 = _slicedToArray(_ref4, 2),
          id = _ref5[0],
          url = _ref5[1].url;
        return [id, url];
      }));
    });
    var setPreviewUrls = function setPreviewUrls(id, url) {
      var canPreview = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
      previewUrls.set(id, {
        url: url,
        canPreview: canPreview
      });
    };
    var setCurrent = function setCurrent(val) {
      current.value = val;
    };
    var setMousePosition = function setMousePosition(val) {
      mousePosition.value = val;
    };
    var registerImage = function registerImage(id, url) {
      var canPreview = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
      var unRegister = function unRegister() {
        previewUrls.delete(id);
      };
      previewUrls.set(id, {
        url: url,
        canPreview: canPreview
      });
      return unRegister;
    };
    var onPreviewClose = function onPreviewClose(e) {
      e === null || e === void 0 ? void 0 : e.stopPropagation();
      setShowPreview(false);
      setMousePosition(null);
    };
    watch(currentControlledKey, function (val) {
      setCurrent(val);
    }, {
      immediate: true,
      flush: 'post'
    });
    watchEffect(function () {
      if (isShowPreview.value && isControlled.value) {
        setCurrent(currentControlledKey.value);
      }
    }, {
      flush: 'post'
    });
    context.provide({
      isPreviewGroup: ref(true),
      previewUrls: canPreviewUrls,
      setPreviewUrls: setPreviewUrls,
      current: current,
      setCurrent: setCurrent,
      setShowPreview: setShowPreview,
      setMousePosition: setMousePosition,
      registerImage: registerImage
    });
    return function () {
      var dialogProps = _extends({}, (_objectDestructuringEmpty(preview.value), preview.value));
      return _createVNode(_Fragment, null, [slots.default && slots.default(), _createVNode(Preview, _objectSpread(_objectSpread({}, dialogProps), {}, {
        "ria-hidden": !isShowPreview.value,
        "visible": isShowPreview.value,
        "prefixCls": props.previewPrefixCls,
        "onClose": onPreviewClose,
        "mousePosition": mousePosition.value,
        "src": canPreviewUrls.value.get(current.value),
        "icons": props.icons,
        "getContainer": getPreviewContainer.value
      }), null)]);
    };
  }
});
export default Group;