refactor(drawer): re-org addon code

Author: mydearxym

src/containers/tool/Drawer/AddOn.tsx

@@ -0,0 +1,62 @@
+import { FC, memo } from 'react'
+
+import IconButton from '@/components/Buttons/IconButton'
+
+import type { TArticleNavi } from '../spec'
+
+import {
+  Wrapper,
+  SwitchBlock,
+  ArticleWrapper,
+  IndexDesc,
+  ArticleTitle,
+} from '../styles/add_on/article_navi'
+
+import { naviToArticle } from '../logic'
+
+type TProps = {
+  articleNavi?: TArticleNavi
+  // show?: boolean
+}
+
+const ArticleNavi: FC<TProps> = ({ articleNavi }) => {
+  // console.log('-- type: ', type)
+  return (
+    <Wrapper show>
+      {articleNavi?.previous && (
+        <SwitchBlock>
+          <IconButton
+            path="shape/previous-article.svg"
+            size={23}
+            mRight={0}
+            mLeft={2}
+            onClick={() => naviToArticle(articleNavi.previous)}
+            dimWhenIdle
+          />
+          <ArticleWrapper onClick={() => naviToArticle(articleNavi.previous)}>
+            <IndexDesc>上一篇</IndexDesc>
+            <ArticleTitle>{articleNavi.previous.title}</ArticleTitle>
+          </ArticleWrapper>
+        </SwitchBlock>
+      )}
+      {articleNavi?.next && (
+        <SwitchBlock>
+          <IconButton
+            path="shape/next-article.svg"
+            size={23}
+            mTop={10}
+            mRight={6}
+            onClick={() => naviToArticle(articleNavi.next)}
+            dimWhenIdle
+          />
+          <ArticleWrapper onClick={() => naviToArticle(articleNavi.next)} next>
+            <IndexDesc>下一篇</IndexDesc>
+            <ArticleTitle>{articleNavi.next.title}</ArticleTitle>
+          </ArticleWrapper>
+        </SwitchBlock>
+      )}
+    </Wrapper>
+  )
+}
+
+export default memo(ArticleNavi)

src/containers/tool/Drawer/AddOn/ArticleNavi.tsx

@@ -0,0 +1,17 @@
+import { FC, memo } from 'react'
+
+import IconButton from '@/components/Buttons/IconButton'
+import { closeDrawer } from '../logic'
+
+const CloseButton: FC = () => {
+  return (
+    <IconButton
+      path="shape/close.svg"
+      onClick={closeDrawer}
+      size={26}
+      dimWhenIdle
+    />
+  )
+}
+
+export default memo(CloseButton)

src/containers/tool/Drawer/AddOn/CloseButton.tsx

@@ -0,0 +1,19 @@
+import { FC, memo } from 'react'
+
+import IconButton from '@/components/Buttons/IconButton'
+
+const ShareButton: FC = () => {
+  return (
+    <IconButton
+      path="article/share.svg"
+      size={19}
+      mTop={7}
+      mLeft={-1}
+      hint="分享本文"
+      hintPlacement="bottom"
+      dimWhenIdle
+    />
+  )
+}
+
+export default memo(ShareButton)

src/containers/tool/Drawer/AddOn/ShareButton.tsx

@@ -0,0 +1,41 @@
+import { FC, memo } from 'react'
+import { includes } from 'ramda'
+
+import { SpaceGrow } from '@/components/Common'
+import GotoTop from '@/components/GotoTop'
+
+import ArticleNavi from './ArticleNavi'
+
+import type { TArticleNavi } from '../spec'
+import { ARTICLE_VIEWER_TYPES } from '../constant'
+
+import CloseButton from './CloseButton'
+import ShareButton from './ShareButton'
+import { Wrapper, TopArea, BottomWrapper } from '../styles/add_on'
+
+type TProps = {
+  type: string
+  articleNavi?: TArticleNavi
+}
+
+const AddOn: FC<TProps> = ({ type, articleNavi }) => {
+  const showArticleNavi = includes(type, ARTICLE_VIEWER_TYPES)
+
+  return (
+    <Wrapper>
+      <TopArea type={type}>
+        <CloseButton />
+        <ShareButton />
+      </TopArea>
+
+      {showArticleNavi && <ArticleNavi articleNavi={articleNavi} />}
+
+      <SpaceGrow />
+      <BottomWrapper>
+        <GotoTop type="drawer" />
+      </BottomWrapper>
+    </Wrapper>
+  )
+}
+
+export default memo(AddOn)

src/containers/tool/Drawer/AddOn/index.tsx

@@ -0,0 +1,20 @@
+import { concat, keys, reduce } from 'ramda'
+
+import { TYPE, ARTICLE_THREAD } from '@/constant'
+
+export const ARTICLE_VIEWER_TYPES = reduce(
+  concat,
+  // @ts-ignore
+  [],
+  keys(ARTICLE_THREAD).map((T) => [TYPE.DRAWER[`${T}_VIEW`]]),
+)
+
+export const ARTICLE_THREAD_CURD_TYPES = reduce(
+  concat,
+  // @ts-ignore
+  [...ARTICLE_VIEWER_TYPES],
+  keys(ARTICLE_THREAD).map((T) => [
+    TYPE.DRAWER[`${T}_CREATE`],
+    TYPE.DRAWER[`${T}_EDIT`],
+  ]),
+)

src/containers/tool/Drawer/constant.ts

@@ -4,7 +4,7 @@
  */
 
 import { types as T, getParent, Instance } from 'mobx-state-tree'
-import { concat, keys, reduce, merge, contains, values, findIndex } from 'ramda'
+import { merge, contains, values, findIndex } from 'ramda'
 
 import type { TRootStore, TCommunity, TThread, TArticle, TWorks } from '@/spec'
 import { TYPE, ARTICLE_THREAD, THREAD } from '@/constant'
@@ -16,27 +16,11 @@ import { WIDTH, mediaBreakPoints } from '@/utils/css/metric'
 import { User } from '@/model'
 
 import { TSwipeOption, TArticleNavi } from './spec'
+import { ARTICLE_VIEWER_TYPES, ARTICLE_THREAD_CURD_TYPES } from './constant'
 import { SWIPE_THRESHOLD } from './styles/metrics'
 
 const defaultOptions: TSwipeOption = { direction: 'bottom', position: 'M' }
 
-const ARTICLE_VIEWER_TYPES = reduce(
-  concat,
-  // @ts-ignore
-  [],
-  keys(ARTICLE_THREAD).map((T) => [TYPE.DRAWER[`${T}_VIEW`]]),
-)
-
-const ARTICLE_THREAD_CURD_TYPES = reduce(
-  concat,
-  // @ts-ignore
-  [...ARTICLE_VIEWER_TYPES],
-  keys(ARTICLE_THREAD).map((T) => [
-    TYPE.DRAWER[`${T}_CREATE`],
-    TYPE.DRAWER[`${T}_EDIT`],
-  ]),
-)
-
 const Options = T.model('Options', {
   direction: T.optional(
     T.enumeration('direction', ['top', 'bottom']),