linkmore-design
Version:
🌈 🚀lm组件库。🚀
62 lines (59 loc) • 1.9 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _Banner = _interopRequireDefault(require("../body/Banner"));
var _Thumb = _interopRequireDefault(require("../body/Thumb"));
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? _react.useLayoutEffect : _react.useEffect;
const Container = /*#__PURE__*/_react.default.memo(({
instance
}) => {
const {
dispatch,
height
} = instance;
const boxContainerRef = (0, _react.useRef)(null);
// 获取盒子容器的大小
/** TODO: 没设默认值会导致打包失败 */
const getResize = (0, _react.useCallback)(({
blockSize = 0,
inlineSize = 0
} = {}) => {
dispatch({
type: 'changeResize',
resize: {
width: inlineSize,
height: blockSize
}
});
}, []);
// 获取表格高度
useIsomorphicLayoutEffect(() => {
// 频繁变动可考虑增加防抖
const resizeObserver = new ResizeObserver(entries => {
const borderbox = entries[0].borderBoxSize[0];
getResize(borderbox);
});
if (boxContainerRef.current) {
resizeObserver.observe(boxContainerRef.current);
}
return () => resizeObserver.disconnect();
}, [getResize]);
return /*#__PURE__*/_react.default.createElement("div", {
ref: boxContainerRef,
className: "lm_imglist_container",
style: {
height
}
}, /*#__PURE__*/_react.default.createElement(_Banner.default, {
instance: instance
}), /*#__PURE__*/_react.default.createElement(_Thumb.default, {
instance: instance
}));
});
var _default = Container;
exports.default = _default;