@difizen/mana-core/lib/view/hooks.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useViewSize = useViewSize;
var _react = require("react");
var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
var _index = require("../utils/index");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function useViewSize(view, ref) {
  var callback = (0, _index.useLatest)(function (size) {
    var _view$onViewResize;
    (_view$onViewResize = view.onViewResize) === null || _view$onViewResize === void 0 || _view$onViewResize.call(view, size);
  });
  (0, _react.useLayoutEffect)(function () {
    if (_typeof(ref) !== 'object') {
      return function () {
        //
      };
    }
    var el = ref === null || ref === void 0 ? void 0 : ref.current;
    if (!el || !view.onViewResize) {
      return function () {
        //
      };
    }
    var resizeObserver = new _resizeObserverPolyfill.default(function (entries) {
      entries.forEach(function (entry) {
        callback.current({
          width: entry.target.clientWidth,
          height: entry.target.clientHeight
        });
      });
    });
    resizeObserver.observe(el);
    return function () {
      resizeObserver.disconnect();
    };
  }, [callback, ref, view.container, view.onViewResize]);
}