refactor(user-lister): improve scroll-bar

Author: mydearxym

src/components/Modal/styles/index.js

@@ -49,6 +49,7 @@ export const CloseBtn = styled(Img)`
   right: 15px;
   top: 15px;
   display: ${({ show }) => (show ? 'block' : 'none')};
+  z-index: ${cs.zIndex.modalCloseBtn};
 
   &:hover {
     animation: ${animate.rotate360CloseRule};

src/containers/Preview/styles/viewer.js

@@ -1,8 +1,6 @@
 import styled from 'styled-components'
 
-export const Wrapper = styled.div.attrs(({ id }) => ({
-  id,
-}))`
+export const Wrapper = styled.div`
   height: 100vh;
   width: 100%;
 `

src/containers/UserLister/index.js

@@ -5,6 +5,7 @@
  */
 
 import React from 'react'
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
 
 import { TYPE } from '@constant'
 import { connectStore, buildLog } from '@utils'
@@ -64,16 +65,20 @@ const UserListerContainer = ({ userLister }) => {
 
   return (
     <Modal width="700px" show={show} showCloseBtn onClose={onClose}>
-      <Wrapper id="userlist-scroller">
-        <HeaderInfo
-          type={type}
-          brief={brief}
-          totalCount={pagedUsersData.totalCount}
-          curCommunity={curCommunity}
-        />
+      <OverlayScrollbarsComponent
+        options={{ scrollbars: { autoHide: 'scroll', autoHideDelay: 200 } }}
+      >
+        <Wrapper>
+          <HeaderInfo
+            type={type}
+            brief={brief}
+            totalCount={pagedUsersData.totalCount}
+            curCommunity={curCommunity}
+          />
 
-        {renderContent(curView, pagedUsersData, accountInfo)}
-      </Wrapper>
+          {renderContent(curView, pagedUsersData, accountInfo)}
+        </Wrapper>
+      </OverlayScrollbarsComponent>
     </Modal>
   )
 }

src/containers/UserLister/logic.js

@@ -1,6 +1,7 @@
 import R from 'ramda'
 import { useEffect } from 'react'
 
+// eslint-disable-next-line import/named
 import { PAGE_SIZE } from '@config'
 import { TYPE, EVENT, ERR } from '@constant'
 import { asyncSuit, buildLog, holdPage, unholdPage, errRescue } from '@utils'
@@ -167,9 +168,6 @@ export const useInit = _store => {
     // log('effect init')
     sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
 
-    /* eslint-disable no-undef */
-    // OverlayScrollbars(document.getElementById('userlist-scroller'), {})
-
     return () => {
       // log('effect uninit')
       sr71$.stop()

src/containers/UserLister/styles/index.js

@@ -3,9 +3,8 @@ import styled from 'styled-components'
 // import Img from '@components/Img'
 import { cs } from '@utils'
 
-export const Wrapper = styled.div.attrs(({ id }) => ({
-  id,
-}))`
+export const Wrapper = styled.div`
+  height: 600px;
   padding: 20px;
 `
 export const MsgWrapper = styled.div`

utils/common_styles.js

@@ -89,6 +89,7 @@ const zIndex = {
   preview: 2001,
   doraemonOverlay: 2600,
   doraemon: 2601,
+  modalCloseBtn: 2000,
 
   //
   sidebar: 1999,