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

Author: mydearxym

src/containers/Doraemon/ResultsList.js

@@ -1,7 +1,9 @@
 import React from 'react'
 import R from 'ramda'
 import Highlighter from 'react-highlight-words'
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
 
+// eslint-disable-next-line import/named
 import { ICON_CMD } from '@config'
 import { THREAD } from '@constant'
 
@@ -30,43 +32,47 @@ const HintIcon = ({ index, active, cur, length }) => {
 }
 
 const ResultsList = ({ searchValue, searchThread, suggestions, activeRaw }) => (
-  <Wrapper id="suggestion-scroller">
-    <SuggestionWrapper empty={suggestions.length === 0}>
-      {suggestions.map((suggestion, i) => (
-        <InfoBar
-          active={activeRaw === suggestion.raw}
-          key={suggestion.raw}
-          id={suggestion.raw}
-          onMouseEnter={navToSuggestion.bind(this, suggestion)}
-          onClick={suggestionOnSelect}
-        >
-          <SuggestIcon
-            raw={suggestion.raw}
-            suggestion={suggestion}
-            round={R.contains(searchThread, [THREAD.POST, THREAD.USER])}
-            searchThread={searchThread}
-          />
-          <ContentWraper>
-            <Title>
-              <Highlighter
-                highlightClassName="doramon-search-highlighter"
-                searchWords={[searchValue]}
-                autoEscape
-                textToHighlight={suggestion.title}
-              />
-            </Title>
-            <Desc>{suggestion.desc}</Desc>
-          </ContentWraper>
-          <HintIcon
-            index={i}
-            active={activeRaw}
-            cur={suggestion.raw}
-            length={suggestions.length}
-          />
-        </InfoBar>
-      ))}
-    </SuggestionWrapper>
-  </Wrapper>
+  <OverlayScrollbarsComponent
+    options={{ scrollbars: { autoHide: 'scroll', autoHideDelay: 200 } }}
+  >
+    <Wrapper>
+      <SuggestionWrapper empty={suggestions.length === 0}>
+        {suggestions.map((suggestion, i) => (
+          <InfoBar
+            active={activeRaw === suggestion.raw}
+            key={suggestion.raw}
+            id={suggestion.raw}
+            onMouseEnter={navToSuggestion.bind(this, suggestion)}
+            onClick={suggestionOnSelect}
+          >
+            <SuggestIcon
+              raw={suggestion.raw}
+              suggestion={suggestion}
+              round={R.contains(searchThread, [THREAD.POST, THREAD.USER])}
+              searchThread={searchThread}
+            />
+            <ContentWraper>
+              <Title>
+                <Highlighter
+                  highlightClassName="doramon-search-highlighter"
+                  searchWords={[searchValue]}
+                  autoEscape
+                  textToHighlight={suggestion.title}
+                />
+              </Title>
+              <Desc>{suggestion.desc}</Desc>
+            </ContentWraper>
+            <HintIcon
+              index={i}
+              active={activeRaw}
+              cur={suggestion.raw}
+              length={suggestions.length}
+            />
+          </InfoBar>
+        ))}
+      </SuggestionWrapper>
+    </Wrapper>
+  </OverlayScrollbarsComponent>
 )
 
 export default ResultsList

src/containers/Doraemon/index.js

@@ -7,9 +7,6 @@
 import React from 'react'
 
 import { connectStore, buildLog } from '@utils'
-import { usePlatform } from '@hooks'
-
-import { PageOverlay, PanelContainer } from './styles'
 
 import InputEditor from './InputEditor'
 import ResultsList from './ResultsList'
@@ -18,15 +15,14 @@ import ThreadSelectBar from './ThreadSelectBar'
 import AlertBar from './AlertBar'
 import UtilsBar from './UtilsBar'
 
-import { useInit, useScrollbar, hidePanel } from './logic'
+import { PageOverlay, PanelContainer } from './styles'
+import { useInit, hidePanel } from './logic'
 
 /* eslint-disable-next-line */
 const log = buildLog('C:Doraemon')
 
 const DoraemonContainer = ({ doraemon }) => {
   useInit(doraemon)
-  const { isMacOS } = usePlatform()
-  useScrollbar(isMacOS)
 
   const {
     inputValue,

src/containers/Doraemon/logic/index.js

@@ -2,6 +2,7 @@ import R from 'ramda'
 import { useEffect } from 'react'
 import Router from 'next/router'
 
+// eslint-disable-next-line import/named
 import { ISSUE_ADDR } from '@config'
 import { TYPE, EVENT, ERR, THREAD } from '@constant'
 import {
@@ -496,15 +497,6 @@ const initSpecCmdResolver = () => {
 // ###############################
 // init & uninit handlers
 // ###############################
-export const useScrollbar = isMacOS => {
-  useEffect(() => {
-    if (isMacOS) {
-      /* eslint-disable no-undef */
-      OverlayScrollbars(document.getElementById('suggestion-scroller'), {})
-    }
-  }, [isMacOS])
-}
-
 export const useInit = _store => {
   useEffect(() => {
     store = _store

src/containers/Doraemon/styles/results_list.js

@@ -3,11 +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 }) => ({
-  id,
-}))`
+export const Wrapper = styled.div`
   width: 100%;
-  overflow: hidden;
   max-height: 400px;
 `
 export const LoadingIcon = styled(Img)`