@zykj2024/much-library 1.1.4 → 1.1.5-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* title: grid布局用法
|
|
3
|
+
* description: 元素出现在视窗时渲染, 日志见console.log。
|
|
4
|
+
*/
|
|
5
|
+
import { McLazyLoader } from "../..";
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
var textList = Array.from({
|
|
8
|
+
length: 100
|
|
9
|
+
}, function (_, index) {
|
|
10
|
+
return index;
|
|
11
|
+
});
|
|
12
|
+
export default (function () {
|
|
13
|
+
return /*#__PURE__*/_jsx("div", {
|
|
14
|
+
children: /*#__PURE__*/_jsx(McLazyLoader, {
|
|
15
|
+
style: {
|
|
16
|
+
height: 200,
|
|
17
|
+
width: 500,
|
|
18
|
+
overflow: 'auto',
|
|
19
|
+
display: 'flex',
|
|
20
|
+
flexWrap: 'wrap'
|
|
21
|
+
},
|
|
22
|
+
onItemVisible: function onItemVisible(index) {
|
|
23
|
+
console.log('visible', index);
|
|
24
|
+
},
|
|
25
|
+
itemMinHeight: 50,
|
|
26
|
+
itemMinWidth: 200,
|
|
27
|
+
children: textList.map(function (v) {
|
|
28
|
+
return /*#__PURE__*/_jsx("img", {
|
|
29
|
+
width: "auto",
|
|
30
|
+
height: 50,
|
|
31
|
+
onLoad: function onLoad() {
|
|
32
|
+
console.log('[window root: loaded]', new Date(), v);
|
|
33
|
+
},
|
|
34
|
+
src: "http://pre.data.muchcloud.com/static/img/logo-t.34c4816d.png",
|
|
35
|
+
alt: v.toString()
|
|
36
|
+
}, v);
|
|
37
|
+
})
|
|
38
|
+
})
|
|
39
|
+
});
|
|
40
|
+
});
|
|
@@ -7,6 +7,15 @@ interface ObserverInsertionWrapperProps {
|
|
|
7
7
|
* @default 20
|
|
8
8
|
*/
|
|
9
9
|
itemMinHeight?: number;
|
|
10
|
+
/**
|
|
11
|
+
* @description 最小宽度，一行多个时不能为0
|
|
12
|
+
* @default unset
|
|
13
|
+
*/
|
|
14
|
+
itemMinWidth?: number;
|
|
15
|
+
/**
|
|
16
|
+
* @description
|
|
17
|
+
*/
|
|
18
|
+
onItemVisible?: (index: number) => void;
|
|
10
19
|
/**
|
|
11
20
|
* @description 距离视图多少像素时触发。出于用户体验考虑，建议设置一个正数
|
|
12
21
|
* @default 0
|
|
@@ -14,7 +14,9 @@ var ObserverInsertionWrapper = function ObserverInsertionWrapper(_ref) {
|
|
|
14
14
|
_ref$root = _ref.root,
|
|
15
15
|
root = _ref$root === void 0 ? null : _ref$root,
|
|
16
16
|
_ref$itemMinHeight = _ref.itemMinHeight,
|
|
17
|
-
itemMinHeight = _ref$itemMinHeight === void 0 ? 20 : _ref$itemMinHeight
|
|
17
|
+
itemMinHeight = _ref$itemMinHeight === void 0 ? 20 : _ref$itemMinHeight,
|
|
18
|
+
itemMinWidth = _ref.itemMinWidth,
|
|
19
|
+
onItemVisible = _ref.onItemVisible;
|
|
18
20
|
var wrapperRef = useRef(null);
|
|
19
21
|
var _useState = useState(new Array(children.length).fill(false)),
|
|
20
22
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -28,9 +30,9 @@ var ObserverInsertionWrapper = function ObserverInsertionWrapper(_ref) {
|
|
|
28
30
|
if (entry.isIntersecting) {
|
|
29
31
|
observer.unobserve(entry.target);
|
|
30
32
|
setVisibleItems(function (prev) {
|
|
31
|
-
console.log('in:', index);
|
|
32
33
|
var newVisibleItems = _toConsumableArray(prev);
|
|
33
34
|
newVisibleItems[index] = true;
|
|
35
|
+
onItemVisible === null || onItemVisible === void 0 || onItemVisible(index);
|
|
34
36
|
return newVisibleItems;
|
|
35
37
|
});
|
|
36
38
|
}
|
|
@@ -58,7 +60,8 @@ var ObserverInsertionWrapper = function ObserverInsertionWrapper(_ref) {
|
|
|
58
60
|
var key = /*#__PURE__*/React.isValidElement(child) ? child.key : index;
|
|
59
61
|
return /*#__PURE__*/_jsx("div", {
|
|
60
62
|
style: {
|
|
61
|
-
minHeight: itemMinHeight
|
|
63
|
+
minHeight: itemMinHeight,
|
|
64
|
+
minWidth: itemMinWidth !== null && itemMinWidth !== void 0 ? itemMinWidth : 'unset'
|
|
62
65
|
},
|
|
63
66
|
"data-index": index,
|
|
64
67
|
children: visibleItems[index] ? child : null
|