fix: 临时回滚userList的代码

src/components/RightContent/Book/components/UserList/index.tsx

@@ -1,8 +1,7 @@
 import { isDevMode } from '@/utils/env'
 import classNames from 'classnames'
-import { useState, useRef, useEffect, useMemo } from 'react'
-import { connect, useDispatch, useIntl } from 'umi'
-import List from 'rc-virtual-list'
+import { useState, useRef } from 'react'
+import { useIntl } from 'umi'
 import './index.less'
 
 export type StaffItem = {
@@ -16,36 +15,22 @@ export type StaffItem = {
 
 type UserListProps = {
   onlineList: StaffItem[]
-  contacts: StaffItem[]
 }
 
-const data = []
-for (let index = 0; index < 100; index++) {
-  data.push({
-    avatar: '/resource/avatar/avatar_143_2.jpg',
-    department: '研发部',
-    username: '蓝健荣',
-    workStatus: 'menu.workbench.dashboard',
-    wsKey: '蓝健荣',
-    id: index
-  })
-}
-const UesrList: React.FC<UserListProps> = ({ contacts, onlineList }) => {
-  const allStaffListRef = useRef()
-  allStaffListRef.current = useMemo(() => contacts, [contacts])
-  const dispatch = useDispatch()
-  useEffect(() => {
-    if (!contacts.length) {
-      dispatch({
-        type: 'staff/fetchStaffList'
-      })
-    }
-  }, [])
+const UesrList: React.FC<UserListProps> = ({ onlineList }) => {
+  const ref = useRef()
+  const t = useRef()
   const [visible, setVisible] = useState(false)
   const intl = useIntl()
-  if (!contacts?.length) return null
-  const height = document.body.clientHeight - 48
-  // console.log(allStaffListRef.current)
+  const handleOnScroll = () => {
+    if (!ref.current?.classList?.contains('scrolling')) {
+      ref.current?.classList?.add('scrolling')
+    }
+    clearTimeout(t.current)
+    t.current = setTimeout(() => {
+      ref.current?.classList?.remove('scrolling')
+    }, 450)
+  }
 
   return (
     <>
@@ -58,53 +43,54 @@ const UesrList: React.FC<UserListProps> = ({ contacts, onlineList }) => {
         className={classNames('book-list flex flex-col bg-hex-ffffff text-hex-666 shadow-card', {
           'show-short': visible
         })}>
-        <List itemHeight={52} height={height} data={onlineList} itemKey="id">
-          {/* <div className="w-full"> */}
-          {/* <ul className="list-none m-0"> */}
-          {item => {
-            return (
-              <div
-                key={item.id}
-                className="table px-2 py-2 text-hex-505050 hover-white hvr-rectangle-out w-full">
-                <div className="table-cell align-middle status status-success status-sm ">
-                  <span
-                    className="w-8 h-8 rounded-1/2 block"
-                    style={{
-                      backgroundImage: `url(${
-                        (isDevMode() ? 'http://cld2qa.com' : 'http://zhcld.com') +
-                        (item.avatar ? item.avatar : '/resource/avatar/avtra_2.jpg')
-                      })`,
-                      backgroundSize: 'cover'
-                    }}
-                  />
-                </div>
-                <div className="table-cell w-full align-middle pl-2 pr-2">
-                  <div className="max-w-160px overflow-hidden whitespace-nowrap overflow-ellipsis text-sm relative">
-                    <span>{item.username}</span>
-                    <small className="block text-xs">
-                      <span className="italic">
-                        {item.workStatus &&
-                          intl.formatMessage({
-                            id: item.workStatus,
-                            defaultMessage: ''
-                          })}
-                      </span>
-                      <span className="ml-1">工作中</span>
-                    </small>
-                    <span className="text-xs text-gray-500 absolute right-0 top-1/2 postion">
-                      {item.department}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            )
-          }}
-          {/* </ul> */}
-          {/* </div> */}
-        </List>
+        <div className="flex-1 h-full custom-scroll" ref={ref} onScroll={handleOnScroll}>
+          <div className="w-full">
+            <ul className="list-none m-0">
+              {visible &&
+                onlineList.map(item => {
+                  return (
+                    <li
+                      key={item.id}
+                      className="table px-2 py-2 text-hex-505050 hover-white hvr-rectangle-out w-full">
+                      <div className="table-cell align-middle status status-success status-sm ">
+                        <span
+                          className="w-8 h-8 rounded-1/2 block"
+                          style={{
+                            backgroundImage: `url(${
+                              (isDevMode() ? 'http://cld2qa.com' : 'http://zhcld.com') +
+                              (item.avatar ? item.avatar : '/global/img/avtra_2.jpg')
+                            })`,
+                            backgroundSize: 'cover'
+                          }}
+                        />
+                      </div>
+                      <div className="table-cell w-full align-middle pl-2 pr-2">
+                        <div className="max-w-160px overflow-hidden whitespace-nowrap overflow-ellipsis text-sm relative">
+                          <span>{item.username}</span>
+                          <small className="block text-xs">
+                            <span className="italic">
+                              {item.workStatus &&
+                                intl.formatMessage({
+                                  id: item.workStatus,
+                                  defaultMessage: ''
+                                })}
+                            </span>
+                            <span className="ml-1">工作中</span>
+                          </small>
+                          <span className="text-xs text-gray-500 absolute right-0 top-1/2 postion">
+                            {item.department}
+                          </span>
+                        </div>
+                      </div>
+                    </li>
+                  )
+                })}
+            </ul>
+          </div>
+        </div>
       </div>
     </>
   )
 }
 
-export default connect(({ staff }) => ({ contacts: staff.allStaffList }))(UesrList)
+export default UesrList