feat(scrollbar): add custom-scrollbar to preview viewer

Author: mydearxym

containers/Preview/Viewer.js

@@ -19,10 +19,11 @@ import {
   DynamicStateTree,
 } from './DynamicComps'
 
+import { Wrapper } from './styles/viewer'
 import DefaultViewer from './DefaultViewer'
 import { closePreview } from './logic'
 
-const Viewer = ({ type, root, attachment, attUser }) => {
+const renderViewer = (type, root, attachment, attUser) => {
   switch (type) {
     case TYPE.PREVIEW_ACCOUNT_VIEW:
       return <DynamicAccountViewer />
@@ -83,4 +84,10 @@ const Viewer = ({ type, root, attachment, attUser }) => {
   }
 }
 
+const Viewer = ({ type, root, attachment, attUser }) => (
+  <Wrapper id="preview-viewer-scroller">
+    {renderViewer(type, root, attachment, attUser)}
+  </Wrapper>
+)
+
 export default Viewer

containers/Preview/logic.js

@@ -89,6 +89,9 @@ export const useInit = _store => {
 
     sub$ = sr71$.data().subscribe($solver(DataResolver, []))
 
+    /* eslint-disable no-undef */
+    OverlayScrollbars(document.getElementById('preview-viewer-scroller'), {})
+
     return () => {
       if (!sub$) return false
       sr71$.stop()

containers/Preview/styles/index.js

@@ -40,7 +40,6 @@ export const PreviewOverlay = styled.div`
   top: 0;
   visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
 `
-
 export const PreviewWrapper = styled.div`
   ${cs.flex()};
   color: ${theme('preview.font')};

containers/Preview/styles/viewer.js

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