chore: Merge branch 'custom-scrollbar' into dev

Author: mydearxym

containers/Doraemon/ResultsList.js

@@ -30,7 +30,7 @@ const HintIcon = ({ index, active, cur, length }) => {
 }
 
 const ResultsList = ({ searchValue, searchThread, suggestions, activeRaw }) => (
-  <Wrapper>
+  <Wrapper id="suggestion-scroller">
     <SuggestionWrapper empty={suggestions.length === 0}>
       {suggestions.map((suggestion, i) => (
         <InfoBar

containers/Doraemon/styles/results_list.js

@@ -3,8 +3,8 @@ import styled from 'styled-components'
 import Img from '@components/Img'
 import { theme, animate, cs } from '@utils'
 
-export const Wrapper = styled.div.attrs(() => ({
-  id: 'suggestion-scroller',
+export const Wrapper = styled.div.attrs(({ id }) => ({
+  id,
 }))`
   width: 100%;
   overflow: hidden;

containers/GlobalLayout/logic.js

@@ -23,11 +23,12 @@ export const useInit = (_store, extra) => {
     store = _store
 
     // FIXME:  do not show body scrollbar on mac
+    // plus this plugin will break antd's affix staff
     /* eslint-disable no-undef */
-    OverlayScrollbars(document.querySelectorAll('body'), {
-      // NOT WORK!
-      // scrollbars: { autoHide: 'scroll', autoHideDelay: 500 },
-    })
+    // OverlayScrollbars(document.querySelectorAll('body'), {
+    // NOT WORK!
+    // scrollbars: { autoHide: 'scroll', autoHideDelay: 500 },
+    // })
 
     const { online, media, platform } = extra
     store.markState({ online, media, platform })

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

containers/Sidebar/MenuList.js

@@ -23,7 +23,7 @@ const MenuList = SortableContainer(
 
     return (
       <Wrapper>
-        <ScrollWrapper>
+        <ScrollWrapper id="sidebar-scroller">
           {homeCommunities.map(item => (
             <MenuBar
               key={item.raw}

containers/Sidebar/styles/menu_list.js

@@ -10,10 +10,8 @@ export const Wrapper = styled.div`
   // overflow-y: scroll;
   transition: left 0.2s;
 `
-export const ScrollWrapper = styled.div.attrs(() => ({
-  id: 'sidebar-scroller',
+export const ScrollWrapper = styled.div.attrs(({ id }) => ({
+  id,
 }))`
-  // max-height: calc(100% - 20px);
-  // height 500px;
   height: calc(100% - 20px);
 `