refactor(mail-panel): use custom-scrollbar

Author: mydearxym

src/containers/MailBox/MailsPanel.js

@@ -1,11 +1,12 @@
 import React from 'react'
 import R from 'ramda'
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
 
 // eslint-disable-next-line import/named
 import { ICON_CMD } from '@config'
 import TabSelector from '@components/TabSelector'
 
-import { Wrapper, SeeAllMessages } from './styles/mails_panel'
+import { Wrapper, ContentWrapper, SeeAllMessages } from './styles/mails_panel'
 import MailLists from './MailLists'
 
 import { selectChange, seeAll } from './logic'
@@ -48,7 +49,13 @@ const MailsPannel = ({ activeRaw, mailStatus, pagedMentions }) => {
         activeRaw={activeRaw}
         onChange={selectChange}
       />
-      <MailLists activeRaw={activeRaw} pagedMentions={pagedMentions} />
+      <OverlayScrollbarsComponent
+        options={{ scrollbars: { autoHide: 'scroll', autoHideDelay: 200 } }}
+      >
+        <ContentWrapper>
+          <MailLists activeRaw={activeRaw} pagedMentions={pagedMentions} />
+        </ContentWrapper>
+      </OverlayScrollbarsComponent>
       <SeeAllMessages onClick={seeAll}>查看全部消息</SeeAllMessages>
     </Wrapper>
   )

src/containers/MailBox/index.js

@@ -8,6 +8,7 @@ import React from 'react'
 
 import { connectStore, buildLog } from '@utils'
 import Popover from '@components/Popover'
+
 import MailsPanel from './MailsPanel'
 
 import { Wrapper, NofityDot, HeaderMailIcon } from './styles'

src/containers/MailBox/styles/mails_panel.js

@@ -5,9 +5,12 @@ import { theme } from '@utils'
 export const Wrapper = styled.div`
   width: 370px;
   min-height: 300px;
-  height: auto;
+  height: 400px;
   padding: 10px;
 `
+export const ContentWrapper = styled.div`
+  height: 300px;
+`
 export const SeeAllMessages = styled.div`
   color: ${theme('banner.title')};
   text-align: center;

src/containers/MailBox/styles/mention_list.js

@@ -9,10 +9,6 @@ export const Wrapper = styled.div`
 `
 export const ListsWrapper = styled.div`
   width: 340px;
-  min-height: 280px;
-  max-height: 400px;
-  overflow-y: scroll;
-  overflow-x: hidden;
 `
 export const UserLabel = styled.div`
   ${cs.flex('align-center')};