feat(draser): add goto top (#1113)

Author: mydearxym

src/components/GotoTop/index.tsx

@@ -6,18 +6,21 @@
 
 import { FC, memo } from 'react'
 
-import { scrollToHeader } from '@/utils'
+import { scrollToHeader, scrollDrawerToTop } from '@/utils'
 
 import { IconButton } from '@/components/Buttons'
 import { Wrapper } from './styles'
 
 type TProps = {
   testid?: string
+  type?: 'body' | 'drawer'
 }
 
-const GotoTop: FC<TProps> = ({ testid }) => {
+const GotoTop: FC<TProps> = ({ testid = 'goto-top', type = 'body' }) => {
+  const handler = type === 'body' ? scrollToHeader : scrollDrawerToTop
+
   return (
-    <Wrapper testid={testid} onClick={scrollToHeader}>
+    <Wrapper testid={testid} onClick={handler}>
       <IconButton
         path="shape/air-balloon.svg"
         hint="回到顶部"

src/containers/tool/Drawer/AddOn.tsx

@@ -73,7 +73,7 @@ const AddOn: FC<TProps> = ({ type }) => {
       </SwitchArticleWrapper>
       <SpaceGrow />
       <GotoTopWrapper>
-        <GotoTop />
+        <GotoTop type="drawer" />
       </GotoTopWrapper>
     </Wrapper>
   )

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

@@ -1,5 +1,6 @@
 import { FC, useEffect, useRef, memo } from 'react'
 
+import { DRAWER_SCROLLER } from '@/constant'
 import CustomScroller from '@/components/CustomScroller'
 
 import renderContent from './renderContent'
@@ -28,6 +29,7 @@ const Content: FC<TProps> = ({ visible, type, attachment, attUser }) => {
   return (
     <Wrapper>
       <CustomScroller
+        instanceKey={DRAWER_SCROLLER}
         direction="vertical"
         height="100vh"
         shadowSize="small"

utils/constant/index.ts

@@ -1,6 +1,7 @@
 // a.k.a for HOME COMMUNITY NAME
 export const HCN = 'home'
 export const BODY_SCROLLER = 'body-scroller'
+export const DRAWER_SCROLLER = 'drawer-scroller'
 
 export { default as TYPE } from './type'
 export { default as EVENT } from './event'

utils/dom.ts

@@ -1,4 +1,4 @@
-import { ANCHOR, BODY_SCROLLER } from '@/constant'
+import { ANCHOR, BODY_SCROLLER, DRAWER_SCROLLER } from '@/constant'
 
 // side effects, need refactor
 /* eslint-disable no-undef */
@@ -48,6 +48,12 @@ export const scrollIntoEle = (eleID: string): void => {
 export const scrollToHeader = (): void => scrollIntoEle(ANCHOR.GLOBAL_HEADER_ID)
 export const scrollToTabber = (): void => scrollIntoEle(ANCHOR.GLOBAL_TABBER_ID)
 
+export const scrollDrawerToTop = (): void => {
+  if (typeof window === 'object') {
+    window[DRAWER_SCROLLER]?.scroll({ top: 0 }, 300)
+  }
+}
+
 /**
  * froze page's body element
  * @returns {void}

utils/index.ts

@@ -110,6 +110,7 @@ export {
   scrollToHeader,
   scrollToTabber,
   scrollToTop,
+  scrollDrawerToTop,
   lockPage,
   unlockPage,
   focusDoraemonBar,