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

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

import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import { useRef } from 'react';
import Taro, { createIntersectionObserver } from '@tarojs/taro';
import { usePersistFn } from '../usePersistFn';
import { useDepsTimeout } from './../useTimeout/useDepsTimeout';
var threshold = _toConsumableArray(new Array(100)).map(function (_, idx) {
  return idx / 100;
});

/**
 * 订阅元素的size变化
 * @param query Taro.createSelectorQuery().select(query)的query
 * @param onResize 元素size变化时的回调
 * @param options 订阅配置
 * @returns
 */
export 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 = useRef();
  var compareObserverRef = useRef();
  var sizeRef = useRef();
  var diapatchResize = 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 = 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 = 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.createIntersectionObserver;
    if (process.env.TARO_ENV === 'alipay' || process.env.TARO_ENV === 'dd') {
      createObserver = createIntersectionObserver;
    }
    observerRef.current = createObserver(Taro.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.createIntersectionObserver(Taro.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
      });
    });
  });
  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(_toConsumableArray(deps), [initObserver]), delay);
};
export default useSubscribeElementSize;