refactor(custom-scroll): debug in drawer

package.json

@@ -64,7 +64,8 @@
     "next-compose-plugins": "^2.2.0",
     "next-i18next": "4.4.1",
     "next-pwa": "^5.6.0",
-    "overlayscrollbars": "^2.1.0",
+    "overlayscrollbars": "^2.4.5",
+    "overlayscrollbars-react": "^0.5.3",
     "promise-timeout": "^1.3.0",
     "prop-types": "^15.5.10",
     "qrcode.react": "^3.1.0",

src/containers/Mushroom/logic.ts

@@ -34,7 +34,12 @@ let sub$ = null
 const { SR71, $solver, asyncRes, asyncErr } = asyncSuit
 const sr71$ = new SR71({
   // @ts-ignore
-  receive: [EVENT.UPVOTE_ARTICLE, EVENT.UPDATE_VIEWING_ARTICLE, EVENT.REFRESH_ARTICLES],
+  receive: [
+    EVENT.UPVOTE_ARTICLE,
+    EVENT.UPDATE_VIEWING_ARTICLE,
+    EVENT.REFRESH_ARTICLES,
+    EVENT.LIST_USER_MODAL,
+  ],
 })
 
 // custromScroll's scroll direction change
@@ -168,6 +173,13 @@ const DataSolver = [
       store.syncArticle(article)
     },
   },
+  {
+    match: asyncRes(EVENT.LIST_USER_MODAL),
+    action: () => {
+      store.mark({ showUserListModal: true })
+    },
+  },
+
   {
     match: asyncRes(EVENT.UPVOTE_ARTICLE),
     action: (_data) => {

src/containers/Mushroom/store.ts

@@ -22,6 +22,8 @@ import { T, getParent, markStates, Instance, toJS, useMobxContext } from '@/mobx
 const MushroomStore = T.model('MushroomStore', {
   online: T.opt(T.bool, true),
   isMobile: T.opt(T.bool, false),
+
+  showUserListModal: T.opt(T.bool, false),
   // follow the mac convention
   bodyScrollDirection: T.opt(T.enum(['up', 'down']), 'up'),
   // activeState;
@@ -110,6 +112,9 @@ const MushroomStore = T.model('MushroomStore', {
       const root = getParent(self) as TRootStore
       return root.dashboardThread.clearLocalSettings()
     },
+    closeUserListModal(): void {
+      self.showUserListModal = false
+    },
     authWarning(options): void {
       const root = getParent(self) as TRootStore
       root.authWarning(options)

src/containers/editor/TagSettingEditor/index.tsx

@@ -42,18 +42,17 @@ import { observer } from 'mobx-react-lite'
 // const log = buildLog('C:TagSettingEditor')
 
 type TProps = {
-  testid: string
   mode?: TChangeMode
 }
 
-const TagSettingEditor: FC<TProps> = ({ testid, mode = CHANGE_MODE.UPDATE }) => {
+const TagSettingEditor: FC<TProps> = ({ mode = CHANGE_MODE.UPDATE }) => {
   const store = useStore()
   useInit(store, mode)
 
   const { editingTagData: editingTag, curCategory, categoryOptions, processing } = store
 
   return (
-    <Wrapper $testid={testid}>
+    <Wrapper $testid="tag-setting-editor">
       <CustomScroller
         instanceKey={DRAWER_SCROLLER}
         direction="vertical"

src/containers/editor/WallpaperEditor/index.tsx

@@ -6,7 +6,6 @@
 import { FC } from 'react'
 import { observer } from 'mobx-react-lite'
 
-import { DRAWER_SCROLLER } from '@/constant/dom'
 import VIEW from '@/constant/view'
 
 import { DesktopOnly, MobileOnly } from '@/widgets/Common'
@@ -42,14 +41,7 @@ const WallpaperEditor: FC = () => {
         </Content>
       </MobileOnly>
       <DesktopOnly>
-        <CustomScroller
-          instanceKey={DRAWER_SCROLLER}
-          direction="vertical"
-          height="calc(100vh - 226px)"
-          barSize="small"
-          showShadow={false}
-          autoHide={false}
-        >
+        <CustomScroller barSize="small" showShadow={false} autoHide={false}>
           <Content>
             {tab === TAB.BUILDIN && <BuildIn wallpaperData={wallpaperData} />}
             {tab === TAB.UPLOAD && <UploadPic />}

src/containers/thread/PostThread/ThreadSidebar/index.tsx

@@ -77,7 +77,7 @@ const ThreadSidebar: FC = () => {
                 fallback={<ImgFallback size={24} user={user} />}
               />
             ))}
-            <MoreNum onClick={() => listUsers()}>+2</MoreNum>
+            <MoreNum onClick={() => listUsers('drawer')}>+2</MoreNum>
           </CommunityJoinersWrapper>
         </Fragment>
 

src/containers/thread/PostThread/styles/thread_sidebar/index.ts

@@ -36,12 +36,13 @@ export const MoreNum = styled.div`
   color: ${theme('article.digest')};
   font-size: 15px;
   margin-top: 1px;
-  margin-left: 2px;
+  margin-left: 4px;
   letter-spacing: 1px;
   opacity: 0.8;
 
   &:hover {
     color: ${theme('article.title')};
+    background: ${theme('hoverBg')};
     opacity: 1;
     cursor: pointer;
   }

src/containers/tool/Drawer/Content/Content.tsx

@@ -1,92 +1,108 @@
-import { FC } from 'react'
+import { FC, Suspense } from 'react'
 
 import TYPE from '@/constant/type'
 // import ModeLineMenu from '@/containers/unit/ModeLineMenu'
-import type { TUser } from '@/spec'
-
-import type { TExtraInfo } from '../spec'
-
-import {
-  ArticleViewer,
-  MailsViewer,
-  // editors
-  AccountEditor,
-  WallpaperEditor,
-  // utils
-  DashboardDesc,
-  ArticleEditor,
-  PassportEditor,
-  TagSettingEditor,
-  SearchPanel,
-  UserList,
-} from '../dynamics'
+
+import ArticleViewer from '@/containers/viewer/ArticleViewer'
+import LavaLampLoading from '@/widgets/Loading/LavaLampLoading'
+
+import TagSettingEditor from '@/containers/editor/TagSettingEditor'
+import PassportEditor from '@/containers/editor/PassportEditor'
+import ArticleEditor from '@/containers/editor/ArticleEditor'
+import WallpaperEditor from '@/containers/editor/WallpaperEditor'
+import AccountEditor from '@/containers/editor/AccountEditor'
+import MailsViewer from '@/containers/viewer/MailsViewer'
+
+import UserList from '@/widgets/UserList'
+import SearchPanel from '@/widgets/SearchPanel'
 
 type TProps = {
   type: string
-  attUser: TUser
-  extraInfo: TExtraInfo
 }
 
-const Content: FC<TProps> = ({ type, attUser, extraInfo }) => {
-  if (!type) return null
+const Content: FC<TProps> = ({ type }) => {
+  if (!type) return <LavaLampLoading />
 
   const { DRAWER } = TYPE
 
   switch (type) {
     case DRAWER.SEARCH_PANEL:
-      return <SearchPanel />
+      return (
+        <Suspense fallback={<LavaLampLoading />}>
+          <SearchPanel />
+        </Suspense>
+      )
 
     case DRAWER.ACCOUNT_EDIT:
-      // @ts-ignore
-      return <AccountEditor />
+      return (
+        <Suspense fallback={<LavaLampLoading />}>
+          <AccountEditor />
+        </Suspense>
+      )
 
     case DRAWER.PASSPORT_EDITOR:
-      // @ts-ignore
-      return <PassportEditor />
+      return (
+        <Suspense fallback={<LavaLampLoading />}>
+          <PassportEditor />
+        </Suspense>
+      )
     case DRAWER.G_EDITOR:
-      return <ArticleEditor />
+      return (
+        <Suspense fallback={<LavaLampLoading />}>
+          <ArticleEditor />
+        </Suspense>
+      )
 
     case DRAWER.MAILS_VIEW:
-      // @ts-ignore
-      return <MailsViewer />
-
-    case DRAWER.DASHBOARD_DESC: {
-      const { postLayout, dashboardDescLayout } = extraInfo
-
-      const activeSettings = {
-        postLayout,
-      }
-      // @ts-ignore
-      return <DashboardDesc layout={dashboardDescLayout} activeSettings={activeSettings} />
-    }
+      return (
+        <Suspense fallback={<LavaLampLoading />}>
+          <MailsViewer />
+        </Suspense>
+      )
 
     case DRAWER.CUSTOM_BG_EDITOR:
-      // @ts-ignore
-      return <WallpaperEditor />
+      return (
+        <Suspense fallback={<LavaLampLoading />}>
+          <WallpaperEditor />
+        </Suspense>
+      )
 
     case DRAWER.MODELINE_MENU:
       return null
     // @ts-ignore
     // return <ModeLineMenu type={extraInfo.mmType} />
 
     case DRAWER.LIST_USERS: {
-      // @ts-ignore
-      return <UserList />
+      return (
+        <Suspense fallback={<LavaLampLoading />}>
+          <UserList />
+          <UserList />
+        </Suspense>
+      )
     }
 
     case DRAWER.CREATE_TAG: {
-      // @ts-ignore
-      return <TagSettingEditor mode="create" />
+      return (
+        <Suspense fallback={<LavaLampLoading />}>
+          <TagSettingEditor mode="create" />
+        </Suspense>
+      )
     }
 
     case DRAWER.EDIT_TAG: {
-      // @ts-ignore
-      return <TagSettingEditor />
+      return (
+        <Suspense fallback={<LavaLampLoading />}>
+          <TagSettingEditor />
+        </Suspense>
+      )
     }
 
     default: {
-      // @ts-ignore
-      return <ArticleViewer />
+      return (
+        <Suspense fallback={<LavaLampLoading />}>
+          <ArticleViewer />
+        </Suspense>
+      )
     }
   }
 }

src/containers/tool/Drawer/Content/DesktopView.tsx

@@ -1,52 +1,44 @@
 import { FC, useEffect, useRef, memo } from 'react'
 
+import 'overlayscrollbars/styles/overlayscrollbars.css'
+import { useOverlayScrollbars } from 'overlayscrollbars-react'
+
 import { DRAWER_SCROLLER } from '@/constant/dom'
-import CustomScroller from '@/widgets/CustomScroller'
+import { scrollDrawerToTop } from '@/dom'
+// import CustomScroller from '@/widgets/CustomScroller'
 
-import type { TExtraInfo } from '../spec'
 import Content from './Content'
 import { Wrapper } from '../styles/content'
-import { isWideMode } from '../styles/metrics'
 
 type TProps = {
   visible: boolean
   type: string // TODO:
-  attUser: any // TODO:
-  extraInfo: TExtraInfo
 }
 
-const DesktopView: FC<TProps> = ({ visible, type, attUser, extraInfo }) => {
+const DesktopView: FC<TProps> = ({ visible, type }) => {
   const ref = useRef(null)
 
-  /*
-   * reset when content visible
-   * scroll to top always
-   */
+  const options = {
+    scrollbars: { autoHide: 'leave', autoHideDelay: 300, autoHideSuspend: true },
+  }
+
+  // @ts-ignore
+  const [initialize, instance] = useOverlayScrollbars({ options, defer: false })
+
   useEffect(() => {
-    if (visible && ref?.current) {
-      ref.current.scrollIntoView()
+    if (initialize && ref?.current) {
+      initialize(ref?.current)
+
+      const instanceEl = instance?.()?.elements()
+      const { viewport } = instanceEl
+      window[DRAWER_SCROLLER] = viewport
+      scrollDrawerToTop()
     }
-  }, [visible, ref])
-
-  if (isWideMode(type)) {
-    return (
-      <Wrapper>
-        <CustomScroller
-          instanceKey={DRAWER_SCROLLER}
-          direction="vertical"
-          height="100vh"
-          barSize="medium"
-          showShadow={false}
-        >
-          <Content type={type} attUser={attUser} extraInfo={extraInfo} />
-        </CustomScroller>
-      </Wrapper>
-    )
-  }
+  }, [initialize, ref, instance])
 
   return (
-    <Wrapper>
-      <Content type={type} attUser={attUser} extraInfo={extraInfo} />
+    <Wrapper ref={ref} type={type}>
+      <Content type={type} />
     </Wrapper>
   )
 }