canrd-main / canrd-erp-front · Commits

Commit 1f27d82a5c680a98a7e005d55fec81e8a615a7eb

Authored by zhongnanhuang
1 parent 619f1ac4
build: skipped

feat: update

Inline Side-by-side
Showing 3 changed files with 38 additions and 66 deletions
package-lock.json
  View file @1f27d82
... ... @@ -17,7 +17,7 @@
17 17 "base-64": "^1.0.0",
18 18 "lodash": "^4.17.21",
19 19 "print-js": "^1.6.0",
20   - "react-infinite-scroll-component": "^6.1.0"
  20 + "rc-virtual-list": "^3.11.4"
21 21 },
22 22 "devDependencies": {
23 23 "@inspir/pluto": "^1.0.5",
... ... @@ -19033,9 +19033,9 @@
19033 19033 "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
19034 19034 },
19035 19035 "node_modules/rc-virtual-list": {
19036   - "version": "3.11.3",
19037   - "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.11.3.tgz",
19038   - "integrity": "sha512-tu5UtrMk/AXonHwHxUogdXAWynaXsrx1i6dsgg+lOo/KJSF8oBAcprh1z5J3xgnPJD5hXxTL58F8s8onokdt0Q==",
  19036 + "version": "3.11.4",
  19037 + "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.11.4.tgz",
  19038 + "integrity": "sha512-NbBi0fvyIu26gP69nQBiWgUMTPX3mr4FcuBQiVqagU0BnuX8WQkiivnMs105JROeuUIFczLrlgUhLQwTWV1XDA==",
19039 19039 "dependencies": {
19040 19040 "@babel/runtime": "^7.20.0",
19041 19041 "classnames": "^2.2.6",
... ... @@ -19046,8 +19046,8 @@
19046 19046 "node": ">=8.x"
19047 19047 },
19048 19048 "peerDependencies": {
19049   - "react": "*",
19050   - "react-dom": "*"
  19049 + "react": ">=16.9.0",
  19050 + "react-dom": ">=16.9.0"
19051 19051 }
19052 19052 },
19053 19053 "node_modules/react": {
... ... @@ -19753,25 +19753,6 @@
19753 19753 "react-dom": "^16.6.0 || ^17.0.0 || ^18.0.0"
19754 19754 }
19755 19755 },
19756   - "node_modules/react-infinite-scroll-component": {
19757   - "version": "6.1.0",
19758   - "resolved": "https://registry.npmjs.org/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz",
19759   - "integrity": "sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==",
19760   - "dependencies": {
19761   - "throttle-debounce": "^2.1.0"
19762   - },
19763   - "peerDependencies": {
19764   - "react": ">=16.0.0"
19765   - }
19766   - },
19767   - "node_modules/react-infinite-scroll-component/node_modules/throttle-debounce": {
19768   - "version": "2.3.0",
19769   - "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
19770   - "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==",
19771   - "engines": {
19772   - "node": ">=8"
19773   - }
19774   - },
19775 19756 "node_modules/react-is": {
19776 19757 "version": "16.13.1",
19777 19758 "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
... ... @@ -39626,9 +39607,9 @@
39626 39607 }
39627 39608 },
39628 39609 "rc-virtual-list": {
39629   - "version": "3.11.3",
39630   - "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.11.3.tgz",
39631   - "integrity": "sha512-tu5UtrMk/AXonHwHxUogdXAWynaXsrx1i6dsgg+lOo/KJSF8oBAcprh1z5J3xgnPJD5hXxTL58F8s8onokdt0Q==",
  39610 + "version": "3.11.4",
  39611 + "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.11.4.tgz",
  39612 + "integrity": "sha512-NbBi0fvyIu26gP69nQBiWgUMTPX3mr4FcuBQiVqagU0BnuX8WQkiivnMs105JROeuUIFczLrlgUhLQwTWV1XDA==",
39632 39613 "requires": {
39633 39614 "@babel/runtime": "^7.20.0",
39634 39615 "classnames": "^2.2.6",
... ... @@ -40216,21 +40197,6 @@
40216 40197 "shallowequal": "^1.1.0"
40217 40198 }
40218 40199 },
40219   - "react-infinite-scroll-component": {
40220   - "version": "6.1.0",
40221   - "resolved": "https://registry.npmjs.org/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz",
40222   - "integrity": "sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==",
40223   - "requires": {
40224   - "throttle-debounce": "^2.1.0"
40225   - },
40226   - "dependencies": {
40227   - "throttle-debounce": {
40228   - "version": "2.3.0",
40229   - "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
40230   - "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ=="
40231   - }
40232   - }
40233   - },
40234 40200 "react-is": {
40235 40201 "version": "16.13.1",
40236 40202 "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
... ...
package.json
  View file @1f27d82
... ... @@ -22,7 +22,7 @@
22 22 "base-64": "^1.0.0",
23 23 "lodash": "^4.17.21",
24 24 "print-js": "^1.6.0",
25   - "react-infinite-scroll-component": "^6.1.0"
  25 + "rc-virtual-list": "^3.11.4"
26 26 },
27 27 "devDependencies": {
28 28 "@inspir/pluto": "^1.0.5",
... ...
src/pages/Order/components/MessageListDrawer.tsx
  View file @1f27d82
... ... @@ -2,16 +2,16 @@ import { RESPONSE_CODE } from '@/constants/enum';
2 2 import { postOrderErpMessageQueryMyMessage } from '@/services';
3 3 import { formatDateTime, getUserInfo } from '@/utils';
4 4 import { UserOutlined } from '@ant-design/icons';
5   -import { Avatar, Badge, Divider, Drawer, Flex, List, Skeleton } from 'antd';
  5 +import { Avatar, Badge, Drawer, Flex, List } from 'antd';
  6 +import VirtualList from 'rc-virtual-list';
6 7 import { useEffect, useState } from 'react';
7   -import InfiniteScroll from 'react-infinite-scroll-component';
8 8  
9 9 export default ({ setVisible }) => {
10 10 const userInfo = getUserInfo();
11 11 const current = useState<number>(1); //当前页码
12   - const [total, setTotal] = useState(0);
  12 + // const [total, setTotal] = useState(0);
13 13 const [messageListData, setMessageListData] = useState<any[]>([]); //列表数据
14   -
  14 + const ContainerHeight = 400;
15 15 /**
16 16 * 获取消息列表
17 17 */
... ... @@ -21,7 +21,7 @@ export default ({ setVisible }) =&gt; {
21 21 });
22 22 if (res && res.result === RESPONSE_CODE.SUCCESS) {
23 23 setMessageListData([...messageListData, ...res?.data?.data]);
24   - setTotal(res?.data?.total);
  24 + // setTotal(res?.data?.total);
25 25 }
26 26 }
27 27  
... ... @@ -32,10 +32,18 @@ export default ({ setVisible }) =&gt; {
32 32 window.open('/order?id=' + mainOrderId, '_blank');
33 33 }
34 34  
35   - function renderTarget() {
36   - document.getElementsByClassName('ant-drawer-body')[0].id = 'scrollableDiv';
37   - return document.getElementsByClassName('ant-drawer-body')[0];
38   - }
  35 + const onScroll = (e: React.UIEvent<HTMLElement, UIEvent>) => {
  36 + // Refer to: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#problems_and_solutions
  37 + if (
  38 + Math.abs(
  39 + e.currentTarget.scrollHeight -
  40 + e.currentTarget.scrollTop -
  41 + ContainerHeight,
  42 + ) <= 1
  43 + ) {
  44 + getMessageListData();
  45 + }
  46 + };
39 47  
40 48 useEffect(() => {
41 49 getMessageListData();
... ... @@ -52,17 +60,15 @@ export default ({ setVisible }) =&gt; {
52 60 width={450}
53 61 styles={{ body: { paddingTop: 0 } }}
54 62 >
55   - <InfiniteScroll
56   - dataLength={messageListData.length}
57   - next={getMessageListData}
58   - hasMore={messageListData.length < total}
59   - loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
60   - endMessage={<Divider plain>没有更多消息了 🤐</Divider>}
61   - scrollableTarget={renderTarget}
62   - >
63   - <List
64   - dataSource={messageListData}
65   - renderItem={(item) => (
  63 + <List>
  64 + <VirtualList
  65 + data={messageListData}
  66 + height={400}
  67 + itemHeight={47}
  68 + itemKey="email"
  69 + onScroll={onScroll}
  70 + >
  71 + {(item: any) => (
66 72 <List.Item key={item.id}>
67 73 <List.Item.Meta
68 74 avatar={
... ... @@ -94,8 +100,8 @@ export default ({ setVisible }) =&gt; {
94 100 </Flex>
95 101 </List.Item>
96 102 )}
97   - />
98   - </InfiniteScroll>
  103 + </VirtualList>
  104 + </List>
99 105 </Drawer>
100 106 </>
101 107 );
... ...