fix(drawer): fix drawer close error (#1066)

* fix(drawer): event cycle error

* chore(drawer): covert js -> ts

* chore(drawer): covert js -> ts

Author: mydearxym

src/containers/thread/PostsThread/logic.js

@@ -29,7 +29,7 @@ const { SR71, $solver, asyncRes, asyncErr } = asyncSuit
 const sr71$ = new SR71({
   receive: [
     EVENT.REFRESH_POSTS,
-    EVENT.DRAWER.CLOSE,
+    EVENT.DRAWER.AFTER_CLOSE,
     EVENT.COMMUNITY_CHANGE,
     EVENT.THREAD_CHANGE,
     EVENT.C11N_DENSITY_CHANGE,
@@ -215,7 +215,7 @@ const DataSolver = [
     },
   },
   {
-    match: asyncRes(EVENT.DRAWER.CLOSE),
+    match: asyncRes(EVENT.DRAWER.AFTER_CLOSE),
     action: () => {
       store.setViewing({ post: {} })
       store.markRoute({ ...store.filtersData, ...store.tagQuery })

src/containers/tool/Drawer/AddOn.js renamed to src/containers/tool/Drawer/AddOn.tsx

@@ -13,10 +13,15 @@ import {
 
 import { closeDrawer } from './logic'
 
-const AddOn = ({ type, imageUploading }) => {
+type TProps = {
+  type: string
+  imageUploading?: boolean
+}
+
+const AddOn: React.FC<TProps> = ({ type, imageUploading = false }) => {
   return (
     <Wrapper>
-      <CloseTab type={type} onClick={closeDrawer}>
+      <CloseTab type={type} onClick={() => closeDrawer()}>
         <CloserInner />
       </CloseTab>
       <UploadingTab show={imageUploading}>

src/containers/tool/Drawer/Content/DesktopView.js renamed to src/containers/tool/Drawer/Content/DesktopView.tsx

@@ -5,7 +5,14 @@ import CustomScroller from '@/components/CustomScroller'
 import renderContent from './renderContent'
 import { Wrapper } from '../styles/content'
 
-const Content = ({ visible, type, attachment, attUser }) => {
+type TProps = {
+  visible: boolean
+  type: string // TODO:
+  attachment: any // TODO:
+  attUser: any // TODO:
+}
+
+const Content: React.FC<TProps> = ({ visible, type, attachment, attUser }) => {
   const ref = useRef(null)
 
   /*

src/containers/tool/Drawer/Content/MobileView.js renamed to src/containers/tool/Drawer/Content/MobileView.tsx

@@ -2,13 +2,29 @@ import React, { useEffect, useRef, useState } from 'react'
 
 import CustomScroller from '@/components/CustomScroller'
 
+import type { TSwipeOption } from '../spec'
 import renderContent from './renderContent'
-
-import { Wrapper } from '../styles/content'
 import { getMobileContentHeight } from '../styles/metrics'
+import { Wrapper } from '../styles/content'
 import { toggleSwipeAviliable, toggleHeaderTextVisiable } from '../logic'
 
-const Content = ({ visible, options, type, attachment, attUser, mmType }) => {
+type TProps = {
+  visible: boolean
+  options: TSwipeOption
+  type: string // TODO
+  attachment: any // TODO
+  attUser: any // TODO
+  mmType: string // TODO
+}
+
+const Content: React.FC<TProps> = ({
+  visible,
+  options,
+  type,
+  attachment,
+  attUser,
+  mmType,
+}) => {
   const ref = useRef(null)
 
   const [topEnterTimer, setTopEnterTimer] = useState(null)
@@ -48,7 +64,7 @@ const Content = ({ visible, options, type, attachment, attUser, mmType }) => {
          * 注意这个值是在桌面浏览器上反复试出的最佳值，过大或过小都不自然
          */
         const topEnterTimer = setTimeout(() => {
-          toggleSwipeAviliable('Down', true)
+          toggleSwipeAviliable('down', true)
         }, 800)
 
         /*
@@ -76,10 +92,10 @@ const Content = ({ visible, options, type, attachment, attUser, mmType }) => {
           setTopEnterTimer(null)
         }
 
-        toggleSwipeAviliable('Down', false)
+        toggleSwipeAviliable('down', false)
       }}
-      onBottomEnter={() => toggleSwipeAviliable('Up', true)}
-      onBottomLeave={() => toggleSwipeAviliable('Up', false)}
+      onBottomEnter={() => toggleSwipeAviliable('up', true)}
+      onBottomLeave={() => toggleSwipeAviliable('up', false)}
       autoHide
     >
       <Wrapper ref={ref}>

src/containers/tool/Drawer/Content/PlaceHolder.js renamed to src/containers/tool/Drawer/Content/PlaceHolder.tsx

@@ -4,7 +4,7 @@ import { ICON_CMD } from '@/config'
 // import { ICON_CMD } from '../../config'
 import { Wrapper, SiteLogo, Desc } from '../styles/content/place_holder'
 
-const PlaceHolder = () => {
+const PlaceHolder: React.FC = () => {
   return (
     <Wrapper>
       <SiteLogo src={`${ICON_CMD}/barcelona.png`} />

src/containers/tool/Drawer/Content/index.js renamed to src/containers/tool/Drawer/Content/index.tsx

@@ -5,8 +5,6 @@ import ModeLineMenu from '@/containers/unit/ModeLineMenu'
 
 import PlaceHolder from './PlaceHolder'
 
-import { closeDrawer } from '../logic'
-
 import {
   PostViewer,
   JobViewer,
@@ -33,20 +31,20 @@ const renderContent = (type, attachment, attUser, mmType) => {
       return <PostViewer attachment={attachment} />
 
     case TYPE.DRAWER.POST_CREATE:
-      return <PostEditor onClose={closeDrawer} />
+      return <PostEditor />
 
     case TYPE.DRAWER.POST_EDIT:
-      return <PostEditor onClose={closeDrawer} attachment={attachment} />
+      return <PostEditor attachment={attachment} />
 
     // job
     case TYPE.DRAWER.JOB_CREATE:
-      return <JobEditor onClose={closeDrawer} />
+      return <JobEditor />
 
     case TYPE.DRAWER.JOB_VIEW:
       return <JobViewer attachment={attachment} />
 
     case TYPE.DRAWER.JOB_EDIT:
-      return <JobEditor onClose={closeDrawer} attachment={attachment} />
+      return <JobEditor attachment={attachment} />
 
     // repo
     case TYPE.DRAWER.REPO_VIEW:

src/containers/tool/Drawer/Content/renderContent.js

@@ -4,9 +4,13 @@ import { Wrapper, LeftLine, RightLine } from '../styles/header/close_line'
 
 import { closeDrawer } from '../logic'
 
-const CloseLine = ({ curve }) => {
+type TProps = {
+  curve: boolean
+}
+
+const CloseLine: React.FC<TProps> = ({ curve }) => {
   return (
-    <Wrapper onClick={closeDrawer}>
+    <Wrapper onClick={() => closeDrawer()}>
       <LeftLine curve={curve} />
       <RightLine curve={curve} />
     </Wrapper>

src/containers/tool/Drawer/Header/CloseLine.js renamed to src/containers/tool/Drawer/Header/CloseLine.tsx

@@ -3,13 +3,23 @@ import React from 'react'
 import { useSwipe } from '@/hooks'
 import { nilOrEmpty } from '@/utils'
 
+import type { TSwipeOption } from '../spec'
 import CloseLine from './CloseLine'
 import { TopWrapper, BottomWrapper, TextWrapper } from '../styles/header'
 import { onSwipedYHandler, onSwipingYHandler } from '../logic'
 
 /* <TextWrapper>评论共 167 条</TextWrapper> */
 
-const Header = ({
+type TProps = {
+  headerText?: string
+  options: TSwipeOption
+  setSwipeUpY: (i: number) => void
+  setSwipeDownY: (i: number) => void
+  canBeClose: boolean
+  showHeaderText: boolean
+}
+
+const Header: React.FC<TProps> = ({
   headerText,
   options,
   setSwipeUpY,

src/containers/tool/Drawer/Header/index.js renamed to src/containers/tool/Drawer/Header/index.tsx

@@ -1,11 +1,23 @@
 import React from 'react'
 
+import type { TSwipeOption } from '../spec'
 import AddOn from '../AddOn'
 
 import { DrawerOverlay, DrawerWrapper, DrawerContent } from '../styles'
 import { closeDrawer } from '../logic'
 
-const DesktopView = ({
+type TProps = {
+  testid?: string
+  options: TSwipeOption
+  visible: boolean
+  rightOffset: string
+  type: string
+  imageUploading: boolean
+  children: React.ReactNode
+}
+
+const DesktopView: React.FC<TProps> = ({
+  testid = 'drawer-sidebar-panel',
   options,
   visible,
   rightOffset,
@@ -15,9 +27,9 @@ const DesktopView = ({
 }) => {
   return (
     <React.Fragment>
-      <DrawerOverlay visible={visible} onClick={closeDrawer} />
+      <DrawerOverlay visible={visible} onClick={() => closeDrawer()} />
       <DrawerWrapper
-        testid="drawer-sidebar-panel"
+        testid={testid}
         visible={visible}
         rightOffset={rightOffset}
         type={type}

src/containers/tool/Drawer/Viewer/DesktopView.js renamed to src/containers/tool/Drawer/Viewer/DesktopView.tsx

@@ -1,8 +1,10 @@
 import React, { useEffect, useState } from 'react'
 import { useTheme } from 'styled-components'
 
+import type { TThemeMap } from '@/spec'
 import { useSwipe } from '@/hooks'
 
+import type { TSwipeOption } from '../spec'
 import AddOn from '../AddOn'
 import Header from '../Header'
 
@@ -20,7 +22,21 @@ import {
   resetSwipeAviliable,
 } from '../logic'
 
-const Viewer = ({
+type TProps = {
+  testid?: string
+  headerText: string
+  options: TSwipeOption
+  visible: boolean
+  type: string
+  imageUploading: boolean
+  canBeClose: boolean
+  showHeaderText: boolean
+  disableContentDrag: boolean
+  children: React.ReactNode
+}
+
+const Viewer: React.FC<TProps> = ({
+  testid = 'drawer-sidebar-panel',
   headerText,
   options,
   visible,
@@ -31,7 +47,7 @@ const Viewer = ({
   disableContentDrag,
   children,
 }) => {
-  const theme = useTheme()
+  const theme: TThemeMap = useTheme()
   // swipe action state for top && bottom
   // null means restore and close
   const [swipeDownY, setSwipeDownY] = useState(null)
@@ -65,9 +81,9 @@ const Viewer = ({
 
   return (
     <div>
-      <DrawerOverlay visible={visible} onClick={closeDrawer} />
+      <DrawerOverlay visible={visible} onClick={() => closeDrawer()} />
       <DrawerWrapper
-        testid="drawer-sidebar-panel"
+        testid={testid}
         visible={visible}
         type={type}
         swipeUpY={swipeUpY}

src/containers/tool/Drawer/Viewer/MobileView.js renamed to src/containers/tool/Drawer/Viewer/MobileView.tsx

@@ -10,6 +10,7 @@ import {
 const CommonLoading = () => (
   <div>
     <br />
+    {/* @ts-ignore */}
     <ArticleContentLoading />
   </div>
 )
@@ -22,6 +23,7 @@ const commonConfig = {
 
 // editor style loading config
 const editorConfig = {
+  // @ts-ignore
   loading: () => <EditorLoading />,
   ssr: false,
 }

src/containers/tool/Drawer/Viewer/index.js renamed to src/containers/tool/Drawer/Viewer/index.tsx

@@ -10,6 +10,8 @@ import T from 'prop-types'
 import { pluggedIn, buildLog } from '@/utils'
 import { useShortcut, useResize } from '@/hooks'
 
+import type { TStore } from './store'
+
 import Viewer from './Viewer/index'
 import Content from './Content'
 
@@ -18,7 +20,11 @@ import { useInit, closeDrawer } from './logic'
 /* eslint-disable-next-line */
 const log = buildLog('C:Preview')
 
-const DrawerContainer = ({ drawer: store }) => {
+type TProps = {
+  drawer: TStore
+}
+
+const DrawerContainer: React.FC<TProps> = ({ drawer: store }) => {
   const { width: windowWidth } = useResize()
   useInit(store, windowWidth)
   useShortcut('Escape', closeDrawer)