linkmore-design
Version:
🌈 🚀lm组件库。🚀
54 lines (52 loc) • 1.8 kB
JavaScript
import React, { useRef, useLayoutEffect, useEffect, useCallback } from 'react';
import Banner from "../body/Banner";
import Thumb from "../body/Thumb";
var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
var Container = /*#__PURE__*/React.memo(function (_ref) {
var instance = _ref.instance;
var dispatch = instance.dispatch,
height = instance.height;
var boxContainerRef = useRef(null);
// 获取盒子容器的大小
/** TODO: 没设默认值会导致打包失败 */
var getResize = useCallback(function () {
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref2$blockSize = _ref2.blockSize,
blockSize = _ref2$blockSize === void 0 ? 0 : _ref2$blockSize,
_ref2$inlineSize = _ref2.inlineSize,
inlineSize = _ref2$inlineSize === void 0 ? 0 : _ref2$inlineSize;
dispatch({
type: 'changeResize',
resize: {
width: inlineSize,
height: blockSize
}
});
}, []);
// 获取表格高度
useIsomorphicLayoutEffect(function () {
// 频繁变动可考虑增加防抖
var resizeObserver = new ResizeObserver(function (entries) {
var borderbox = entries[0].borderBoxSize[0];
getResize(borderbox);
});
if (boxContainerRef.current) {
resizeObserver.observe(boxContainerRef.current);
}
return function () {
return resizeObserver.disconnect();
};
}, [getResize]);
return /*#__PURE__*/React.createElement("div", {
ref: boxContainerRef,
className: "lm_imglist_container",
style: {
height: height
}
}, /*#__PURE__*/React.createElement(Banner, {
instance: instance
}), /*#__PURE__*/React.createElement(Thumb, {
instance: instance
}));
});
export default Container;