chore: merge branch 'dev'

Author: mydearxym

containers/Preview/index.js

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

containers/Preview/logic.js

@@ -83,10 +83,18 @@ 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
-
     sub$ = sr71$.data().subscribe($solver(DataResolver, []))
 
     /* eslint-disable no-undef */