@z-cloud/virtual-taro
Version:
一个基于React + TS开发的虚拟列表，支持瀑布流、grid的组件。
89 lines (88 loc) • 2.88 kB
JavaScript
;
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const components = require("@tarojs/components");
const Taro = require("@tarojs/taro");
const react = require("react");
const index = require("../utils/index.cjs");
const flexStyle = {
position: "absolute",
width: 1,
height: 1,
zIndex: -10,
visibility: "hidden",
pointerEvents: "none"
};
function Resizable({
children,
className,
style,
emitWhenMounted,
listId,
onResize
}) {
const [rect, setRect] = react.useState({ width: 0, height: 0 });
const resizeId = `resize-${listId}`;
const resizeFlexClass = `resize-flex-${listId}`;
const [instance] = react.useState(() => Taro.getCurrentInstance());
react.useLayoutEffect(() => {
let observer;
const init = async () => {
const res = await index.getRectSizeAsync(resizeId);
if (res) {
setRect({ width: res.width, height: res.height });
if (emitWhenMounted) {
onResize == null ? void 0 : onResize(res);
}
observer = Taro.createIntersectionObserver(instance.page, {
observeAll: true,
// @ts-ignore
nativeMode: true
});
observer.relativeTo(`#${resizeId}`).observe(`.${resizeFlexClass}`, (res2) => {
if (!res2.relativeRect) {
return;
}
const nextRect = {
width: Math.ceil(res2.relativeRect.right - res2.relativeRect.left),
height: Math.ceil(res2.relativeRect.bottom - res2.relativeRect.top)
};
setRect((prevRect) => {
if (nextRect.width !== prevRect.width || nextRect.height !== prevRect.height) {
onResize == null ? void 0 : onResize({ ...res2.relativeRect, width: nextRect.width, height: nextRect.height });
return nextRect;
}
return prevRect;
});
});
}
};
init();
return () => {
observer == null ? void 0 : observer.disconnect();
observer = null;
};
}, []);
const { width, height } = rect;
return /* @__PURE__ */ jsxRuntime.jsxs(
components.View,
{
id: resizeId,
className,
style: { position: "relative", width: "fit-content", ...style },
children: [
children,
/* @__PURE__ */ jsxRuntime.jsx(
components.View,
{
className: resizeFlexClass,
style: { ...flexStyle, left: width - 2, top: height - 2 }
}
),
/* @__PURE__ */ jsxRuntime.jsx(components.View, { className: resizeFlexClass, style: { ...flexStyle, left: width - 1, top: height } }),
/* @__PURE__ */ jsxRuntime.jsx(components.View, { className: resizeFlexClass, style: { ...flexStyle, left: width, top: height - 1 } })
]
}
);
}
exports.Resizable = Resizable;