@zykj2024/much-library 1.1.4 → 1.1.5-beta.3

package/dist/McLazyLoader/demo/container.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McLazyLoader/demo/container.js

@@ -0,0 +1,83 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: McContainer自定义table body场景中
+ * description: 翻页后的数据会重新进入懒加载流程,比如天玑-素材管理
+ */
+import { McLazyLoader } from "../..";
+import { useState } from 'react';
+import McContainer from "../../McContainer";
+import McInput from "../../McInput";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var getTextList = function getTextList(cur) {
+  return Array.from({
+    length: 40
+  }, function (_, index) {
+    return {
+      key: index + cur,
+      value: index
+    };
+  });
+};
+export default (function () {
+  var _useState = useState(1),
+    _useState2 = _slicedToArray(_useState, 2),
+    cur = _useState2[0],
+    setCur = _useState2[1];
+  console.log(cur);
+  return /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsx(McContainer, {
+      queryItems: /*#__PURE__*/_jsx(_Fragment, {
+        children: /*#__PURE__*/_jsx(McInput, {
+          label: "\u59D3\u540D",
+          name: "name",
+          style: {
+            width: 270
+          }
+        })
+      }),
+      height: "500px",
+      tableProps: {
+        dataSource: getTextList(cur),
+        // scroll: {y: 200},
+        pagination: {
+          pageSize: 40,
+          current: cur,
+          total: 120
+        },
+        onChange: function onChange(info) {
+          var _info$current;
+          setCur((_info$current = info === null || info === void 0 ? void 0 : info.current) !== null && _info$current !== void 0 ? _info$current : 1);
+        },
+        components: {
+          body: function body(data) {
+            return /*#__PURE__*/_jsx(McLazyLoader, {
+              style: {
+                height: 200,
+                width: 500,
+                overflow: 'auto',
+                display: 'flex',
+                flexWrap: 'wrap'
+              },
+              onItemVisible: function onItemVisible(index) {
+                console.log('visible', index);
+              },
+              itemMinHeight: 50,
+              itemMinWidth: 200,
+              children: data.map(function (x) {
+                return /*#__PURE__*/_jsx("img", {
+                  width: "auto",
+                  height: 50,
+                  onLoad: function onLoad() {
+                    console.log('[window root: loaded]', new Date(), x.key, cur);
+                  },
+                  src: "http://pre.data.muchcloud.com/static/img/logo-t.34c4816d.png"
+                }, x.key + '_' + cur);
+              })
+            });
+          }
+        }
+      }
+    })
+  });
+});

package/dist/McLazyLoader/demo/hori.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McLazyLoader/demo/hori.js

@@ -0,0 +1,39 @@
+/**
+ * title: grid布局用法
+ * description: 元素出现在视窗时渲染, 日志见console.log。
+ */
+import { McLazyLoader } from "../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+var textList = Array.from({
+  length: 100
+}, function (_, index) {
+  return index;
+});
+export default (function () {
+  return /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsx(McLazyLoader, {
+      style: {
+        height: 200,
+        overflow: 'auto',
+        display: 'flex',
+        flexWrap: 'wrap'
+      },
+      onItemVisible: function onItemVisible(index) {
+        console.log('visible', index);
+      },
+      itemMinHeight: 50,
+      itemMinWidth: 200,
+      children: textList.map(function (v) {
+        return /*#__PURE__*/_jsx("img", {
+          width: "auto",
+          height: 50,
+          onLoad: function onLoad() {
+            console.log('[window root: loaded]', new Date(), v);
+          },
+          src: "http://pre.data.muchcloud.com/static/img/logo-t.34c4816d.png",
+          alt: v.toString()
+        }, v);
+      })
+    })
+  });
+});

package/dist/McLazyLoader/demo/table.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McLazyLoader/demo/table.js

@@ -0,0 +1,73 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 在Antd Table翻页场景中使用
+ * description: 翻页后的数据会重新进入懒加载流程
+ */
+import { Table } from 'antd';
+import { McLazyLoader } from "../..";
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var getTextList = function getTextList(cur) {
+  return Array.from({
+    length: 40
+  }, function (_, index) {
+    return {
+      key: index + cur,
+      value: index
+    };
+  });
+};
+export default (function () {
+  var _useState = useState(1),
+    _useState2 = _slicedToArray(_useState, 2),
+    cur = _useState2[0],
+    setCur = _useState2[1];
+  console.log(cur);
+  return /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsx(Table, {
+      dataSource: getTextList(cur),
+      scroll: {
+        y: 200
+      },
+      pagination: {
+        pageSize: 40,
+        current: cur,
+        total: 120
+      },
+      onChange: function onChange(info) {
+        var _info$current;
+        setCur((_info$current = info === null || info === void 0 ? void 0 : info.current) !== null && _info$current !== void 0 ? _info$current : 1);
+      },
+      components: {
+        body: function body(data) {
+          return /*#__PURE__*/_jsx(McLazyLoader, {
+            style: {
+              height: 200,
+              width: 430,
+              overflow: 'auto',
+              display: 'flex',
+              flexWrap: 'wrap'
+            },
+            onItemVisible: function onItemVisible(index) {
+              console.log('visible', index);
+            },
+            itemMinHeight: 50
+            // 不加这个的话，水平排列的元素不占空间，没有懒加载
+            ,
+            itemMinWidth: 200,
+            children: data.map(function (x) {
+              return /*#__PURE__*/_jsx("img", {
+                width: "auto",
+                height: 50,
+                onLoad: function onLoad() {
+                  console.log('[window root: loaded]', new Date(), x.key, cur);
+                },
+                src: "http://pre.data.muchcloud.com/static/img/logo-t.34c4816d.png"
+              }, x.key + '_' + cur);
+            })
+          });
+        }
+      }
+    })
+  });
+});

package/dist/McLazyLoader/index.d.ts

@@ -1,4 +1,3 @@
-/** 监听容器内的list每个元素，当元素进入视图则展示，展示后不再消失 */
 import React from 'react';
 interface ObserverInsertionWrapperProps {
     children: React.ReactNode[];
@@ -6,7 +5,16 @@ interface ObserverInsertionWrapperProps {
      * @description 最小高度，不能为0。为0时懒加载可能会无效
      * @default 20
      */
-    itemMinHeight?: number;
+    itemMinHeight: number;
+    /**
+     * @description 最小宽度，水平排列时不能为0
+     * @default unset
+     */
+    itemMinWidth?: number;
+    /**
+     * @description 元素进入视图回调
+     */
+    onItemVisible?: (index: number, key: string) => void;
     /**
      * @description 距离视图多少像素时触发。出于用户体验考虑，建议设置一个正数
      * @default 0
@@ -22,6 +30,9 @@ interface ObserverInsertionWrapperProps {
      * @default null
      */
     root?: Element | Document | null;
+    /**
+     * @description 外层容器样式
+     */
     style?: React.CSSProperties;
 }
 declare const ObserverInsertionWrapper: React.FC<ObserverInsertionWrapperProps>;

package/dist/McLazyLoader/index.js

@@ -1,9 +1,10 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-/** 监听容器内的list每个元素，当元素进入视图则展示，展示后不再消失 */
-
 import React, { useEffect, useRef, useState } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
+var getKey = function getKey(child, index) {
+  var _child$key;
+  return /*#__PURE__*/React.isValidElement(child) ? String((_child$key = child.key) !== null && _child$key !== void 0 ? _child$key : index) : String(index);
+};
 var ObserverInsertionWrapper = function ObserverInsertionWrapper(_ref) {
   var children = _ref.children,
     style = _ref.style,
@@ -14,30 +15,44 @@ var ObserverInsertionWrapper = function ObserverInsertionWrapper(_ref) {
     _ref$root = _ref.root,
     root = _ref$root === void 0 ? null : _ref$root,
     _ref$itemMinHeight = _ref.itemMinHeight,
-    itemMinHeight = _ref$itemMinHeight === void 0 ? 20 : _ref$itemMinHeight;
+    itemMinHeight = _ref$itemMinHeight === void 0 ? 20 : _ref$itemMinHeight,
+    itemMinWidth = _ref.itemMinWidth,
+    onItemVisible = _ref.onItemVisible;
   var wrapperRef = useRef(null);
-  var _useState = useState(new Array(children.length).fill(false)),
+
+  // 已经显示过的 key 列表
+  var _useState = useState(new Set()),
     _useState2 = _slicedToArray(_useState, 2),
     visibleItems = _useState2[0],
     setVisibleItems = _useState2[1];
+
+  // 为避免 children 每次渲染变化导致 useEffect 重复执行，构建一个 keyList 哈希
+  var keyList = React.Children.toArray(children).map(function (child, index) {
+    return getKey(child, index);
+  });
+  var keyListHash = JSON.stringify(keyList);
+
+  // 每次 keyList 变动重置显示列表
+  useEffect(function () {
+    setVisibleItems(new Set());
+  }, [keyListHash]);
   useEffect(function () {
     var _wrapperRef$current;
     var observer = new IntersectionObserver(function (entries) {
       entries.forEach(function (entry) {
         var index = Number(entry.target.getAttribute('data-index'));
-        if (entry.isIntersecting) {
-          observer.unobserve(entry.target);
+        var key = String(entry.target.getAttribute('data-key'));
+        if (entry.isIntersecting && !visibleItems.has(key)) {
           setVisibleItems(function (prev) {
-            console.log('in:', index);
-            var newVisibleItems = _toConsumableArray(prev);
-            newVisibleItems[index] = true;
-            return newVisibleItems;
+            var next = new Set(prev);
+            next.add(key);
+            onItemVisible === null || onItemVisible === void 0 || onItemVisible(index, key);
+            return next;
           });
         }
       });
     }, {
       root: root,
-      // 监听浏览器窗口
       rootMargin: "".concat(offset, "px"),
       threshold: threshold
     });
@@ -50,18 +65,20 @@ var ObserverInsertionWrapper = function ObserverInsertionWrapper(_ref) {
         observer.unobserve(element);
       });
     };
-  }, [offset, threshold, root, children.length]);
+  }, [offset, threshold, root, keyListHash, visibleItems]);
   return /*#__PURE__*/_jsx("div", {
     ref: wrapperRef,
     style: style,
     children: React.Children.map(children, function (child, index) {
-      var key = /*#__PURE__*/React.isValidElement(child) ? child.key : index;
+      var key = getKey(child, index);
       return /*#__PURE__*/_jsx("div", {
+        "data-key": key,
+        "data-index": index,
         style: {
-          minHeight: itemMinHeight
+          minHeight: itemMinHeight,
+          minWidth: itemMinWidth !== null && itemMinWidth !== void 0 ? itemMinWidth : 'unset'
         },
-        "data-index": index,
-        children: visibleItems[index] ? child : null
+        children: visibleItems.has(key) ? child : null
       }, key);
     })
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zykj2024/much-library",
-  "version": "1.1.4",
+  "version": "1.1.5-beta.3",
   "description": "react library",
   "license": "MIT",
   "module": "dist/index.js",