linkmore-design/lib/chart-table/hooks/useResize.js

🌈 🚀lm组件库。🚀

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _lodash = require("lodash");
var _react = require("react");
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? _react.useLayoutEffect : _react.useEffect;
/** 调整列数量 */
const useResize = ({
  resizeRef,
  refreshDelay
}) => {
  const [resize, setResize] = (0, _react.useState)({
    width: 1400,
    height: 800
  });
  const changeResize = (0, _react.useCallback)(size => {
    setResize(o => ({
      ...o,
      ...size
    }));
  }, []);

  /** 延迟调整 */
  const delayedResize = (0, _react.useCallback)((0, _lodash.throttle)(({
    width,
    height
  }) => changeResize({
    width,
    height
  }), refreshDelay), [changeResize, refreshDelay]);

  // 获取表格高度
  useIsomorphicLayoutEffect(() => {
    // 频繁变动可考虑增加防抖
    const resizeObserver = new ResizeObserver(entries => {
      const {
        blockSize,
        inlineSize
      } = entries[0].borderBoxSize[0];
      delayedResize({
        width: inlineSize,
        height: blockSize
      });
    });
    const parentNode = resizeRef.current?.parentNode;
    if (parentNode) {
      resizeObserver.observe(parentNode);
    }
    return () => resizeObserver.disconnect();
  }, [delayedResize]);
  return resize;
};
var _default = useResize;
exports.default = _default;