ant-design-vue
Version:
An enterprise-class UI design language and Vue-based implementation
211 lines • 7.22 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _typeof from "@babel/runtime/helpers/esm/typeof";
import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
import PropTypes from './vue-types';
import switchScrollingEffect from './switchScrollingEffect';
import setStyle from './setStyle';
import Portal from './Portal';
import { defineComponent, ref, watch, onMounted, onBeforeUnmount, onUpdated, getCurrentInstance, nextTick } from 'vue';
import canUseDom from './canUseDom';
import ScrollLocker from '../vc-util/Dom/scrollLocker';
import raf from './raf';
var openCount = 0;
var supportDom = canUseDom();
/** @private Test usage only */
export function getOpenCount() {
return process.env.NODE_ENV === 'test' ? openCount : 0;
}
// https://github.com/ant-design/ant-design/issues/19340
// https://github.com/ant-design/ant-design/issues/19332
var cacheOverflow = {};
var getParent = function getParent(getContainer) {
if (!supportDom) {
return null;
}
if (getContainer) {
if (typeof getContainer === 'string') {
return document.querySelectorAll(getContainer)[0];
}
if (typeof getContainer === 'function') {
return getContainer();
}
if (_typeof(getContainer) === 'object' && getContainer instanceof window.HTMLElement) {
return getContainer;
}
}
return document.body;
};
export default defineComponent({
compatConfig: {
MODE: 3
},
name: 'PortalWrapper',
inheritAttrs: false,
props: {
wrapperClassName: String,
forceRender: {
type: Boolean,
default: undefined
},
getContainer: PropTypes.any,
visible: {
type: Boolean,
default: undefined
}
},
setup: function setup(props, _ref) {
var slots = _ref.slots;
var container = ref();
var componentRef = ref();
var rafId = ref();
var scrollLocker = new ScrollLocker({
container: getParent(props.getContainer)
});
var removeCurrentContainer = function removeCurrentContainer() {
var _container$value, _container$value$pare;
// Portal will remove from `parentNode`.
// Let's handle this again to avoid refactor issue.
(_container$value = container.value) === null || _container$value === void 0 ? void 0 : (_container$value$pare = _container$value.parentNode) === null || _container$value$pare === void 0 ? void 0 : _container$value$pare.removeChild(container.value);
};
var attachToParent = function attachToParent() {
var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
if (force || container.value && !container.value.parentNode) {
var parent = getParent(props.getContainer);
if (parent) {
parent.appendChild(container.value);
return true;
}
return false;
}
return true;
};
// attachToParent();
var getContainer = function getContainer() {
if (!supportDom) {
return null;
}
if (!container.value) {
container.value = document.createElement('div');
attachToParent(true);
}
setWrapperClassName();
return container.value;
};
var setWrapperClassName = function setWrapperClassName() {
var wrapperClassName = props.wrapperClassName;
if (container.value && wrapperClassName && wrapperClassName !== container.value.className) {
container.value.className = wrapperClassName;
}
};
onUpdated(function () {
setWrapperClassName();
attachToParent();
});
/**
* Enhance ./switchScrollingEffect
* 1. Simulate document body scroll bar with
* 2. Record body has overflow style and recover when all of PortalWrapper invisible
* 3. Disable body scroll when PortalWrapper has open
*
* @memberof PortalWrapper
*/
var switchScrolling = function switchScrolling() {
if (openCount === 1 && !Object.keys(cacheOverflow).length) {
switchScrollingEffect();
// Must be set after switchScrollingEffect
cacheOverflow = setStyle({
overflow: 'hidden',
overflowX: 'hidden',
overflowY: 'hidden'
});
} else if (!openCount) {
setStyle(cacheOverflow);
cacheOverflow = {};
switchScrollingEffect(true);
}
};
var instance = getCurrentInstance();
onMounted(function () {
var init = false;
watch([function () {
return props.visible;
}, function () {
return props.getContainer;
}], function (_ref2, _ref3) {
var _ref4 = _slicedToArray(_ref2, 2),
visible = _ref4[0],
getContainer = _ref4[1];
var _ref5 = _slicedToArray(_ref3, 2),
prevVisible = _ref5[0],
prevGetContainer = _ref5[1];
// Update count
if (supportDom && getParent(props.getContainer) === document.body) {
if (visible && !prevVisible) {
openCount += 1;
} else if (init) {
openCount -= 1;
}
}
if (init) {
// Clean up container if needed
var getContainerIsFunc = typeof getContainer === 'function' && typeof prevGetContainer === 'function';
if (getContainerIsFunc ? getContainer.toString() !== prevGetContainer.toString() : getContainer !== prevGetContainer) {
removeCurrentContainer();
}
// updateScrollLocker
if (visible && visible !== prevVisible && supportDom && getParent(getContainer) !== scrollLocker.getContainer()) {
scrollLocker.reLock({
container: getParent(getContainer)
});
}
}
init = true;
}, {
immediate: true,
flush: 'post'
});
nextTick(function () {
if (!attachToParent()) {
rafId.value = raf(function () {
instance.update();
});
}
});
});
onBeforeUnmount(function () {
var visible = props.visible,
getContainer = props.getContainer;
if (supportDom && getParent(getContainer) === document.body) {
// 离开时不会 render， 导到离开时数值不变，改用 func 。。
openCount = visible && openCount ? openCount - 1 : openCount;
}
removeCurrentContainer();
raf.cancel(rafId.value);
});
return function () {
var forceRender = props.forceRender,
visible = props.visible;
var portal = null;
var childProps = {
getOpenCount: function getOpenCount() {
return openCount;
},
getContainer: getContainer,
switchScrollingEffect: switchScrolling,
scrollLocker: scrollLocker
};
if (forceRender || visible || componentRef.value) {
portal = _createVNode(Portal, {
"getContainer": getContainer,
"ref": componentRef
}, {
default: function _default() {
var _slots$default;
return (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots, childProps);
}
});
}
return portal;
};
}
});