feat: update

zhongnanhuang
1 parent 619f1ac4
Showing 3 changed files with 38 additions and 66 deletions
package-lock.json
package.json
src/pages/Order/components/MessageListDrawer.tsx
@@ -17,7 +17,7 @@
         "base-64": "^1.0.0",
         "lodash": "^4.17.21",
         "print-js": "^1.6.0",
-        "react-infinite-scroll-component": "^6.1.0"
+        "rc-virtual-list": "^3.11.4"
       },
       "devDependencies": {
         "@inspir/pluto": "^1.0.5",
@@ -19033,9 +19033,9 @@
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
     "node_modules/rc-virtual-list": {
-      "version": "3.11.3",
-      "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.11.3.tgz",
-      "integrity": "sha512-tu5UtrMk/AXonHwHxUogdXAWynaXsrx1i6dsgg+lOo/KJSF8oBAcprh1z5J3xgnPJD5hXxTL58F8s8onokdt0Q==",
+      "version": "3.11.4",
+      "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.11.4.tgz",
+      "integrity": "sha512-NbBi0fvyIu26gP69nQBiWgUMTPX3mr4FcuBQiVqagU0BnuX8WQkiivnMs105JROeuUIFczLrlgUhLQwTWV1XDA==",
       "dependencies": {
         "@babel/runtime": "^7.20.0",
         "classnames": "^2.2.6",
@@ -19046,8 +19046,8 @@
         "node": ">=8.x"
       },
       "peerDependencies": {
-        "react": "*",
-        "react-dom": "*"
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
       }
     },
     "node_modules/react": {
@@ -19753,25 +19753,6 @@
         "react-dom": "^16.6.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/react-infinite-scroll-component": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz",
-      "integrity": "sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==",
-      "dependencies": {
-        "throttle-debounce": "^2.1.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.0.0"
-      }
-    },
-    "node_modules/react-infinite-scroll-component/node_modules/throttle-debounce": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
-      "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -39626,9 +39607,9 @@
       }
     },
     "rc-virtual-list": {
-      "version": "3.11.3",
-      "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.11.3.tgz",
-      "integrity": "sha512-tu5UtrMk/AXonHwHxUogdXAWynaXsrx1i6dsgg+lOo/KJSF8oBAcprh1z5J3xgnPJD5hXxTL58F8s8onokdt0Q==",
+      "version": "3.11.4",
+      "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.11.4.tgz",
+      "integrity": "sha512-NbBi0fvyIu26gP69nQBiWgUMTPX3mr4FcuBQiVqagU0BnuX8WQkiivnMs105JROeuUIFczLrlgUhLQwTWV1XDA==",
       "requires": {
         "@babel/runtime": "^7.20.0",
         "classnames": "^2.2.6",
@@ -40216,21 +40197,6 @@
         "shallowequal": "^1.1.0"
       }
     },
-    "react-infinite-scroll-component": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz",
-      "integrity": "sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==",
-      "requires": {
-        "throttle-debounce": "^2.1.0"
-      },
-      "dependencies": {
-        "throttle-debounce": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
-          "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ=="
-        }
-      }
-    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -22,7 +22,7 @@
     "base-64": "^1.0.0",
     "lodash": "^4.17.21",
     "print-js": "^1.6.0",
-    "react-infinite-scroll-component": "^6.1.0"
+    "rc-virtual-list": "^3.11.4"
   },
   "devDependencies": {
     "@inspir/pluto": "^1.0.5",
@@ -2,16 +2,16 @@ import { RESPONSE_CODE } from &#39;@/constants/enum&#39;;
 import { postOrderErpMessageQueryMyMessage } from '@/services';
 import { formatDateTime, getUserInfo } from '@/utils';
 import { UserOutlined } from '@ant-design/icons';
-import { Avatar, Badge, Divider, Drawer, Flex, List, Skeleton } from 'antd';
+import { Avatar, Badge, Drawer, Flex, List } from 'antd';
+import VirtualList from 'rc-virtual-list';
 import { useEffect, useState } from 'react';
-import InfiniteScroll from 'react-infinite-scroll-component';
 export default ({ setVisible }) => {
   const userInfo = getUserInfo();
   const current = useState<number>(1); //当前页码
-  const [total, setTotal] = useState(0);
+  // const [total, setTotal] = useState(0);
   const [messageListData, setMessageListData] = useState<any[]>([]); //列表数据
-
+  const ContainerHeight = 400;
   /**
    * 获取消息列表
    */
@@ -21,7 +21,7 @@ export default ({ setVisible }) =&gt; {
     });
     if (res && res.result === RESPONSE_CODE.SUCCESS) {
       setMessageListData([...messageListData, ...res?.data?.data]);
-      setTotal(res?.data?.total);
+      // setTotal(res?.data?.total);
     }
   }
@@ -32,10 +32,18 @@ export default ({ setVisible }) =&gt; {
     window.open('/order?id=' + mainOrderId, '_blank');
   }
-  function renderTarget() {
-    document.getElementsByClassName('ant-drawer-body')[0].id = 'scrollableDiv';
-    return document.getElementsByClassName('ant-drawer-body')[0];
-  }
+  const onScroll = (e: React.UIEvent<HTMLElement, UIEvent>) => {
+    // Refer to: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#problems_and_solutions
+    if (
+      Math.abs(
+        e.currentTarget.scrollHeight -
+          e.currentTarget.scrollTop -
+          ContainerHeight,
+      ) <= 1
+    ) {
+      getMessageListData();
+    }
+  };
   useEffect(() => {
     getMessageListData();
@@ -52,17 +60,15 @@ export default ({ setVisible }) =&gt; {
         width={450}
         styles={{ body: { paddingTop: 0 } }}
       >
-        <InfiniteScroll
-          dataLength={messageListData.length}
-          next={getMessageListData}
-          hasMore={messageListData.length < total}
-          loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
-          endMessage={<Divider plain>没有更多消息了 🤐</Divider>}
-          scrollableTarget={renderTarget}
-        >
-          <List
-            dataSource={messageListData}
-            renderItem={(item) => (
+        <List>
+          <VirtualList
+            data={messageListData}
+            height={400}
+            itemHeight={47}
+            itemKey="email"
+            onScroll={onScroll}
+          >
+            {(item: any) => (
               <List.Item key={item.id}>
                 <List.Item.Meta
                   avatar={
@@ -94,8 +100,8 @@ export default ({ setVisible }) =&gt; {
                 </Flex>
               </List.Item>
             )}
-          />
-        </InfiniteScroll>
+          </VirtualList>
+        </List>
       </Drawer>
     </>
   );