| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120 |
- "use strict";
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- exports.default = void 0;
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
- var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
- var _vue = require("vue");
- var _propsUtil = require("../_util/props-util");
- var _default = exports.default = (0, _vue.defineComponent)({
- compatConfig: {
- MODE: 3
- },
- name: 'ResizeObserver',
- props: {
- disabled: Boolean,
- onResize: Function
- },
- emits: ['resize'],
- setup(props, _ref) {
- let {
- slots
- } = _ref;
- const state = (0, _vue.reactive)({
- width: 0,
- height: 0,
- offsetHeight: 0,
- offsetWidth: 0
- });
- let currentElement = null;
- let resizeObserver = null;
- const destroyObserver = () => {
- if (resizeObserver) {
- resizeObserver.disconnect();
- resizeObserver = null;
- }
- };
- const onResize = entries => {
- const {
- onResize
- } = props;
- const target = entries[0].target;
- const {
- width,
- height
- } = target.getBoundingClientRect();
- const {
- offsetWidth,
- offsetHeight
- } = target;
- /**
- * Resize observer trigger when content size changed.
- * In most case we just care about element size,
- * let's use `boundary` instead of `contentRect` here to avoid shaking.
- */
- const fixedWidth = Math.floor(width);
- const fixedHeight = Math.floor(height);
- if (state.width !== fixedWidth || state.height !== fixedHeight || state.offsetWidth !== offsetWidth || state.offsetHeight !== offsetHeight) {
- const size = {
- width: fixedWidth,
- height: fixedHeight,
- offsetWidth,
- offsetHeight
- };
- (0, _extends2.default)(state, size);
- if (onResize) {
- // defer the callback but not defer to next frame
- Promise.resolve().then(() => {
- onResize((0, _extends2.default)((0, _extends2.default)({}, size), {
- offsetWidth,
- offsetHeight
- }), target);
- });
- }
- }
- };
- const instance = (0, _vue.getCurrentInstance)();
- const registerObserver = () => {
- const {
- disabled
- } = props;
- // Unregister if disabled
- if (disabled) {
- destroyObserver();
- return;
- }
- // Unregister if element changed
- const element = (0, _propsUtil.findDOMNode)(instance);
- const elementChanged = element !== currentElement;
- if (elementChanged) {
- destroyObserver();
- currentElement = element;
- }
- if (!resizeObserver && element) {
- resizeObserver = new _resizeObserverPolyfill.default(onResize);
- resizeObserver.observe(element);
- }
- };
- (0, _vue.onMounted)(() => {
- registerObserver();
- });
- (0, _vue.onUpdated)(() => {
- registerObserver();
- });
- (0, _vue.onUnmounted)(() => {
- destroyObserver();
- });
- (0, _vue.watch)(() => props.disabled, () => {
- registerObserver();
- }, {
- flush: 'post'
- });
- return () => {
- var _a;
- return (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)[0];
- };
- }
- });
|