@antmjs/vantui/lib/waterfall-flow/hooks/useSubscribeElementSize/index.js

一套适用于Taro3及React的vantui组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useSubscribeElementSize = exports.default = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _react = require("react");
var _taro = _interopRequireWildcard(require("@tarojs/taro"));
var _usePersistFn = require("../usePersistFn");
var _useDepsTimeout = require("./../useTimeout/useDepsTimeout");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var threshold = (0, _toConsumableArray2.default)(new Array(100)).map(function (_, idx) {
  return idx / 100;
});

/**
 * 订阅元素的size变化
 * @param query Taro.createSelectorQuery().select(query)的query
 * @param onResize 元素size变化时的回调
 * @param options 订阅配置
 * @returns
 */
var useSubscribeElementSize = function useSubscribeElementSize(query, compareQuery, containerQuery, onResize) {
  var delay = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
  var deps = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : [];
  var observerRef = (0, _react.useRef)();
  var compareObserverRef = (0, _react.useRef)();
  var sizeRef = (0, _react.useRef)();
  var diapatchResize = (0, _usePersistFn.usePersistFn)(function (size) {
    var _sizeRef$current;
    var _ref = (_sizeRef$current = sizeRef.current) !== null && _sizeRef$current !== void 0 ? _sizeRef$current : {},
      width = _ref.width,
      height = _ref.height;
    if (width === size.width && height === size.height) {
      return;
    }
    sizeRef.current = size;
    onResize(size);
  });
  var initObserveH5 = (0, _usePersistFn.usePersistFn)(function () {
    var _observerRef$current, _observerRef$current$, _compareObserverRef$c, _compareObserverRef$c2;
    var options = {
      threshold: threshold
    };
    options.root = document.querySelector(containerQuery);
    observerRef.current = new IntersectionObserver(function (res) {
      var _res$boundingClientRe, _res, _res$boundingClientRe2, _res$boundingClientRe3, _res2, _res2$boundingClientR;
      diapatchResize({
        width: (_res$boundingClientRe = res === null || res === void 0 ? void 0 : (_res = res[(res === null || res === void 0 ? void 0 : res.length) - 1]) === null || _res === void 0 ? void 0 : (_res$boundingClientRe2 = _res.boundingClientRect) === null || _res$boundingClientRe2 === void 0 ? void 0 : _res$boundingClientRe2.width) !== null && _res$boundingClientRe !== void 0 ? _res$boundingClientRe : 0,
        height: (_res$boundingClientRe3 = res === null || res === void 0 ? void 0 : (_res2 = res[(res === null || res === void 0 ? void 0 : res.length) - 1]) === null || _res2 === void 0 ? void 0 : (_res2$boundingClientR = _res2.boundingClientRect) === null || _res2$boundingClientR === void 0 ? void 0 : _res2$boundingClientR.height) !== null && _res$boundingClientRe3 !== void 0 ? _res$boundingClientRe3 : 0
      });
    }, options);
    (_observerRef$current = observerRef.current) === null || _observerRef$current === void 0 ? void 0 : (_observerRef$current$ = _observerRef$current.observe) === null || _observerRef$current$ === void 0 ? void 0 : _observerRef$current$.call(_observerRef$current, document.querySelector(query));
    options.root = document.querySelector(compareQuery);
    compareObserverRef.current = new IntersectionObserver(function (res) {
      var _res$boundingClientRe4, _res3, _res3$boundingClientR, _res$boundingClientRe5, _res4, _res4$boundingClientR;
      diapatchResize({
        width: (_res$boundingClientRe4 = res === null || res === void 0 ? void 0 : (_res3 = res[(res === null || res === void 0 ? void 0 : res.length) - 1]) === null || _res3 === void 0 ? void 0 : (_res3$boundingClientR = _res3.boundingClientRect) === null || _res3$boundingClientR === void 0 ? void 0 : _res3$boundingClientR.width) !== null && _res$boundingClientRe4 !== void 0 ? _res$boundingClientRe4 : 0,
        height: (_res$boundingClientRe5 = res === null || res === void 0 ? void 0 : (_res4 = res[(res === null || res === void 0 ? void 0 : res.length) - 1]) === null || _res4 === void 0 ? void 0 : (_res4$boundingClientR = _res4.boundingClientRect) === null || _res4$boundingClientR === void 0 ? void 0 : _res4$boundingClientR.height) !== null && _res$boundingClientRe5 !== void 0 ? _res$boundingClientRe5 : 0
      });
    }, options);
    (_compareObserverRef$c = compareObserverRef.current) === null || _compareObserverRef$c === void 0 ? void 0 : (_compareObserverRef$c2 = _compareObserverRef$c.observe) === null || _compareObserverRef$c2 === void 0 ? void 0 : _compareObserverRef$c2.call(_compareObserverRef$c, document.querySelector(query));
  });
  var initObserver = (0, _usePersistFn.usePersistFn)(function () {
    var _compareObserverRef$c3, _compareObserverRef$c4;
    if (observerRef.current != null) {
      observerRef.current.disconnect();
    }
    if (compareObserverRef.current != null) {
      compareObserverRef.current.disconnect();
    }
    if (process.env.TARO_ENV === 'h5') {
      return initObserveH5();
    }
    // eslint-disable-next-line no-underscore-dangle
    var createObserver = _taro.default.createIntersectionObserver;
    if (process.env.TARO_ENV === 'alipay' || process.env.TARO_ENV === 'dd') {
      createObserver = _taro.createIntersectionObserver;
    }
    observerRef.current = createObserver(_taro.default.getCurrentInstance().page, {
      thresholds: threshold,
      observeAll: true
    });
    observerRef.current.relativeTo(containerQuery, {
      bottom: 0
    }).observe(query, function (res) {
      var _res$boundingClientRe6, _res$boundingClientRe7;
      diapatchResize({
        width: res === null || res === void 0 ? void 0 : (_res$boundingClientRe6 = res.boundingClientRect) === null || _res$boundingClientRe6 === void 0 ? void 0 : _res$boundingClientRe6.width,
        height: res === null || res === void 0 ? void 0 : (_res$boundingClientRe7 = res.boundingClientRect) === null || _res$boundingClientRe7 === void 0 ? void 0 : _res$boundingClientRe7.height
      });
    });
    (_compareObserverRef$c3 = compareObserverRef.current) === null || _compareObserverRef$c3 === void 0 ? void 0 : (_compareObserverRef$c4 = _compareObserverRef$c3.disconnect) === null || _compareObserverRef$c4 === void 0 ? void 0 : _compareObserverRef$c4.call(_compareObserverRef$c3);
    compareObserverRef.current = _taro.default.createIntersectionObserver(_taro.default.getCurrentInstance().page, {
      thresholds: threshold,
      observeAll: true
    });
    compareObserverRef.current.relativeTo(compareQuery, {
      bottom: 0
    }).observe(query, function (res) {
      var _res$boundingClientRe8, _res$boundingClientRe9;
      diapatchResize({
        width: res === null || res === void 0 ? void 0 : (_res$boundingClientRe8 = res.boundingClientRect) === null || _res$boundingClientRe8 === void 0 ? void 0 : _res$boundingClientRe8.width,
        height: res === null || res === void 0 ? void 0 : (_res$boundingClientRe9 = res.boundingClientRect) === null || _res$boundingClientRe9 === void 0 ? void 0 : _res$boundingClientRe9.height
      });
    });
  });
  (0, _useDepsTimeout.useDepsTimeout)(function () {
    initObserver();
    return function () {
      var _observerRef$current2, _observerRef$current3, _compareObserverRef$c5, _compareObserverRef$c6;
      (_observerRef$current2 = observerRef.current) === null || _observerRef$current2 === void 0 ? void 0 : (_observerRef$current3 = _observerRef$current2.disconnect) === null || _observerRef$current3 === void 0 ? void 0 : _observerRef$current3.call(_observerRef$current2);
      (_compareObserverRef$c5 = compareObserverRef.current) === null || _compareObserverRef$c5 === void 0 ? void 0 : (_compareObserverRef$c6 = _compareObserverRef$c5.disconnect) === null || _compareObserverRef$c6 === void 0 ? void 0 : _compareObserverRef$c6.call(_compareObserverRef$c5);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [].concat((0, _toConsumableArray2.default)(deps), [initObserver]), delay);
};
exports.useSubscribeElementSize = useSubscribeElementSize;
var _default = useSubscribeElementSize;
exports.default = _default;