linkmore-design
Version:
🌈 🚀lm组件库。🚀
56 lines (54 loc) • 1.91 kB
JavaScript
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { throttle } from 'lodash';
import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
/** 调整列数量 */
var useResize = function useResize(_ref) {
var resizeRef = _ref.resizeRef,
refreshDelay = _ref.refreshDelay;
var _useState = useState({
width: 1400,
height: 800
}),
_useState2 = _slicedToArray(_useState, 2),
resize = _useState2[0],
setResize = _useState2[1];
var changeResize = useCallback(function (size) {
setResize(function (o) {
return _objectSpread(_objectSpread({}, o), size);
});
}, []);
/** 延迟调整 */
var delayedResize = useCallback(throttle(function (_ref2) {
var width = _ref2.width,
height = _ref2.height;
return changeResize({
width: width,
height: height
});
}, refreshDelay), [changeResize, refreshDelay]);
// 获取表格高度
useIsomorphicLayoutEffect(function () {
var _resizeRef$current;
// 频繁变动可考虑增加防抖
var resizeObserver = new ResizeObserver(function (entries) {
var _entries$0$borderBoxS = entries[0].borderBoxSize[0],
blockSize = _entries$0$borderBoxS.blockSize,
inlineSize = _entries$0$borderBoxS.inlineSize;
delayedResize({
width: inlineSize,
height: blockSize
});
});
var parentNode = (_resizeRef$current = resizeRef.current) === null || _resizeRef$current === void 0 ? void 0 : _resizeRef$current.parentNode;
if (parentNode) {
resizeObserver.observe(parentNode);
}
return function () {
return resizeObserver.disconnect();
};
}, [delayedResize]);
return resize;
};
export default useResize;