index.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = void 0;
  7. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  8. var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
  9. var _vue = require("vue");
  10. var _propsUtil = require("../_util/props-util");
  11. var _default = exports.default = (0, _vue.defineComponent)({
  12. compatConfig: {
  13. MODE: 3
  14. },
  15. name: 'ResizeObserver',
  16. props: {
  17. disabled: Boolean,
  18. onResize: Function
  19. },
  20. emits: ['resize'],
  21. setup(props, _ref) {
  22. let {
  23. slots
  24. } = _ref;
  25. const state = (0, _vue.reactive)({
  26. width: 0,
  27. height: 0,
  28. offsetHeight: 0,
  29. offsetWidth: 0
  30. });
  31. let currentElement = null;
  32. let resizeObserver = null;
  33. const destroyObserver = () => {
  34. if (resizeObserver) {
  35. resizeObserver.disconnect();
  36. resizeObserver = null;
  37. }
  38. };
  39. const onResize = entries => {
  40. const {
  41. onResize
  42. } = props;
  43. const target = entries[0].target;
  44. const {
  45. width,
  46. height
  47. } = target.getBoundingClientRect();
  48. const {
  49. offsetWidth,
  50. offsetHeight
  51. } = target;
  52. /**
  53. * Resize observer trigger when content size changed.
  54. * In most case we just care about element size,
  55. * let's use `boundary` instead of `contentRect` here to avoid shaking.
  56. */
  57. const fixedWidth = Math.floor(width);
  58. const fixedHeight = Math.floor(height);
  59. if (state.width !== fixedWidth || state.height !== fixedHeight || state.offsetWidth !== offsetWidth || state.offsetHeight !== offsetHeight) {
  60. const size = {
  61. width: fixedWidth,
  62. height: fixedHeight,
  63. offsetWidth,
  64. offsetHeight
  65. };
  66. (0, _extends2.default)(state, size);
  67. if (onResize) {
  68. // defer the callback but not defer to next frame
  69. Promise.resolve().then(() => {
  70. onResize((0, _extends2.default)((0, _extends2.default)({}, size), {
  71. offsetWidth,
  72. offsetHeight
  73. }), target);
  74. });
  75. }
  76. }
  77. };
  78. const instance = (0, _vue.getCurrentInstance)();
  79. const registerObserver = () => {
  80. const {
  81. disabled
  82. } = props;
  83. // Unregister if disabled
  84. if (disabled) {
  85. destroyObserver();
  86. return;
  87. }
  88. // Unregister if element changed
  89. const element = (0, _propsUtil.findDOMNode)(instance);
  90. const elementChanged = element !== currentElement;
  91. if (elementChanged) {
  92. destroyObserver();
  93. currentElement = element;
  94. }
  95. if (!resizeObserver && element) {
  96. resizeObserver = new _resizeObserverPolyfill.default(onResize);
  97. resizeObserver.observe(element);
  98. }
  99. };
  100. (0, _vue.onMounted)(() => {
  101. registerObserver();
  102. });
  103. (0, _vue.onUpdated)(() => {
  104. registerObserver();
  105. });
  106. (0, _vue.onUnmounted)(() => {
  107. destroyObserver();
  108. });
  109. (0, _vue.watch)(() => props.disabled, () => {
  110. registerObserver();
  111. }, {
  112. flush: 'post'
  113. });
  114. return () => {
  115. var _a;
  116. return (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)[0];
  117. };
  118. }
  119. });