refactor(preview): use react-version of custom-scrollbar

Author: mydearxym

src/containers/Preview/Viewer.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
 
 import { TYPE } from '@constant'
 
@@ -85,9 +86,11 @@ const renderViewer = (type, root, attachment, attUser) => {
 }
 
 const Viewer = ({ type, root, attachment, attUser }) => (
-  <Wrapper id="preview-viewer-scroller">
-    {renderViewer(type, root, attachment, attUser)}
-  </Wrapper>
+  <OverlayScrollbarsComponent
+    options={{ scrollbars: { autoHide: 'scroll', autoHideDelay: 200 } }}
+  >
+    <Wrapper>{renderViewer(type, root, attachment, attUser)}</Wrapper>
+  </OverlayScrollbarsComponent>
 )
 
 export default Viewer

src/containers/Preview/index.js

@@ -7,13 +7,13 @@
 import React from 'react'
 
 import { connectStore, buildLog } from '@utils'
-import { useShortcut, usePlatform } from '@hooks'
+import { useShortcut } from '@hooks'
 
 import SliderPreview from './SliderPreview'
 import ModalPreview from './ModalPreview'
 import Viewer from './Viewer'
 
-import { useInit, useScrollbar, closePreview } from './logic'
+import { useInit, closePreview } from './logic'
 
 /* eslint-disable-next-line */
 const log = buildLog('C:Preview')
@@ -22,9 +22,6 @@ const PreviewContainer = ({ preview }) => {
   useInit(preview)
   useShortcut('esc', closePreview)
 
-  const { isMacOS } = usePlatform()
-  useScrollbar(isMacOS)
-
   const {
     modalVisible,
     slideVisible,

src/containers/Preview/logic.js

@@ -83,15 +83,6 @@ const DataResolver = [
 // ###############################
 // init & uninit
 // ###############################
-export const useScrollbar = isMacOS => {
-  useEffect(() => {
-    if (isMacOS) {
-      /* eslint-disable no-undef */
-      OverlayScrollbars(document.getElementById('preview-viewer-scroller'), {})
-    }
-  }, [isMacOS])
-}
-
 export const useInit = _store => {
   useEffect(() => {
     store = _store

src/containers/Preview/styles/viewer.js

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 export const Wrapper = styled.div.attrs(({ id }) => ({
   id,
 }))`
-  height: calc(100% - 10px);
+  height: 100vh;
   width: 100%;
 `