@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
86 lines • 3.36 kB
JavaScript
import React, { useEffect, useMemo } from 'react';
import { View } from '@tarojs/components';
import { useForceUpdate, usePersistFn, useSubscribeElementSize } from '../hooks';
import { useForceResize } from './useForceResize';
import { jsx as _jsx } from "react/jsx-runtime";
export function WaterfallFlowItem(_ref) {
var renderItem = _ref.renderItem,
item = _ref.item,
attributes = _ref.attributes,
onResize = _ref.onResize,
onRemove = _ref.onRemove,
width = _ref.width,
_ref$calculationDelay = _ref.calculationDelay,
calculationDelay = _ref$calculationDelay === void 0 ? 0 : _ref$calculationDelay;
var forceUpdate = useForceUpdate();
var id = "waterfall-flow-item-".concat(item === null || item === void 0 ? void 0 : item.key);
var compareId = "waterfall-flow-item-compare-".concat(item === null || item === void 0 ? void 0 : item.key);
var contentId = "waterfall-flow-item-content-".concat(item === null || item === void 0 ? void 0 : item.key);
var style = useMemo(function () {
if (!(attributes !== null && attributes !== void 0 && attributes.width)) {
return {
width: width,
height: '1px'
};
}
return {
width: width,
height: "".concat(attributes === null || attributes === void 0 ? void 0 : attributes.height, "px"),
left: "".concat(attributes === null || attributes === void 0 ? void 0 : attributes.left, "px"),
top: "".concat(attributes === null || attributes === void 0 ? void 0 : attributes.top, "px")
};
}, [attributes, width]);
var contentStyle = useMemo(function () {
return {
top: attributes !== null && attributes !== void 0 && attributes.height ? "-".concat((attributes === null || attributes === void 0 ? void 0 : attributes.height) - 1, "px") : '0'
};
}, [attributes]);
var onItemResize = usePersistFn(function (size) {
if (typeof onResize !== 'function') {
return;
}
onResize(item, size);
});
useSubscribeElementSize("#".concat(contentId), "#".concat(compareId), "#".concat(id), onItemResize, calculationDelay, [item]);
var onItemRemove = usePersistFn(function () {
if (typeof onRemove !== 'function') {
return;
}
onRemove(item);
});
var forceResize = useForceResize("#".concat(contentId), onItemResize);
var child = useMemo(function () {
if (typeof renderItem !== 'function') {
return null;
}
return renderItem(item, forceResize);
}, [renderItem, item, forceResize]);
useEffect(function () {
return function () {
onItemRemove();
};
}, [onItemRemove]);
useEffect(function () {
// 当元素发生变化时，主动刷新视图，保证内容更新以后的高度能够被正确计算
forceUpdate();
}, [item, forceUpdate]);
useEffect(function () {
// 当元素宽度发生变化时，主动刷新视图，保证内容更新以后的高度能够被正确计算
forceUpdate();
}, [width, forceUpdate]);
return /*#__PURE__*/_jsx(View, {
className: "van-waterfall-flow-item",
style: style,
id: id,
children: /*#__PURE__*/_jsx(View, {
className: "van-compare-area",
id: compareId,
children: /*#__PURE__*/_jsx(View, {
className: "van-waterfall-flow-item-content",
id: contentId,
style: contentStyle,
children: child
})
})
});
}