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

mydearxym · mydearxym · commit 538b2ec0441b · 2019-08-25T20:40:48.000+08:00
diff --git a/src/containers/Preview/Viewer.js b/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
diff --git a/src/containers/Preview/index.js b/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,
diff --git a/src/containers/Preview/logic.js b/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
diff --git a/src/containers/Preview/styles/viewer.js b/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%;
 `
 

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ import styled from 'styled-components'`
`3`	`3`	`export const Wrapper = styled.div.attrs(({ id }) => ({`
`4`	`4`	`id,`
`5`	`5`	}))`
`6`		`- height: calc(100% - 10px);`
	`6`	`+ height: 100vh;`
`7`	`7`	`width: 100%;`
`8`	`8`	`
`9`	`9`