refactor(drawer): article navi (#1159)

* refactor(drawer): preview navi & style adjust

* refactor(drawer): preview navi with works

Author: mydearxym

src/components/AvatarsRow/styles/metric.ts

@@ -16,7 +16,7 @@ export const getLiSize = (size: TAvatarSize): string => {
     }
 
     default: {
-      return '24px'
+      return '22px'
     }
   }
 }
@@ -27,7 +27,7 @@ export const getAvatarSize = (
 ): string | number => {
   switch (size) {
     case SIZE.SMALL: {
-      return fmt === 'string' ? '24px' : 24
+      return fmt === 'string' ? '22px' : 22
     }
 
     case SIZE.MEDIUM: {

src/components/AvatarsRow/styles/real_avatar.ts

@@ -34,15 +34,12 @@ type TAvatarsImg = { size: string; onClick: () => void; scrollPosition: any }
 export const AvatarsImg = styled(Img)<TAvatarsImg>`
   border: 2px solid;
   border-color: ${theme('thread.commentsUserBorder')};
-  border-radius: 100px 100px 100px 100px;
   color: #ffffff;
   font-family: sans-serif;
   font-size: 12px;
   font-weight: 100;
 
-  width: ${({ size }) => getAvatarSize(size)};
-  height: ${({ size }) => getAvatarSize(size)};
-  display: block;
+  ${({ size }) => css.circle(getAvatarSize(size))};
 
   text-align: center;
 `
@@ -61,6 +58,7 @@ export const AvatarsMore = styled.span<TAvatarsMore>`
   height: ${({ size }) => getAvatarSize(size)};
 
   padding-left: ${({ total }) => (total >= 1000 ? '5px' : '3px')};
+  padding-top: 1px;
 
   &:hover {
     cursor: pointer;

src/components/DigestSentence/index.tsx

@@ -58,8 +58,9 @@ const DigestSentence: FC<TProps> = ({
       const { scrollHeight, clientHeight } = textRef.current
       // console.log('clientHeight: ', clientHeight)
       // console.log('scrollHeight: ', scrollHeight)
+      // console.log('scrollHeight - clientHeight: ', scrollHeight - clientHeight)
       // 确保只有超过两行才是折叠的情况
-      scrollHeight - clientHeight >= 22 ? setFold(true) : setFold(false)
+      scrollHeight - clientHeight >= 21 ? setFold(true) : setFold(false)
     }
   }, [textRef])
 

src/containers/tool/Drawer/AddOn.tsx

@@ -1,9 +1,11 @@
 import { FC, memo } from 'react'
 
+import { previewArticle } from '@/utils/helper'
 import { SpaceGrow } from '@/components/Common'
 import GotoTop from '@/components/GotoTop'
 import IconButton from '@/components/Buttons/IconButton'
 
+import type { TArticleNavi } from './spec'
 import {
   Wrapper,
   CloseWrapper,
@@ -15,13 +17,15 @@ import {
   GotoTopWrapper,
 } from './styles/add_on'
 
-import { closeDrawer } from './logic'
+import { closeDrawer, naviToArticle } from './logic'
 
 type TProps = {
   type: string
+  articleNavi?: TArticleNavi
 }
 
-const AddOn: FC<TProps> = ({ type }) => {
+const AddOn: FC<TProps> = ({ type, articleNavi }) => {
+  // console.log('-- type: ', type)
   return (
     <Wrapper>
       <CloseWrapper type={type}>
@@ -43,34 +47,41 @@ const AddOn: FC<TProps> = ({ type }) => {
       </CloseWrapper>
 
       <SwitchArticleWrapper show>
-        <SwitchBlock>
-          <IconButton
-            path="shape/previous-article.svg"
-            size={23}
-            mRight={0}
-            mLeft={2}
-            dimWhenIdle
-          />
-          <ArticleWrapper>
-            <IndexDesc>上一篇</IndexDesc>
-            <ArticleTitle>
-              可能是最性感的开发者社区诚邀内侧，来为你心爱的作品建立一个社区吧！
-            </ArticleTitle>
-          </ArticleWrapper>
-        </SwitchBlock>
-        <SwitchBlock>
-          <IconButton
-            path="shape/next-article.svg"
-            size={23}
-            mTop={10}
-            mRight={6}
-            dimWhenIdle
-          />
-          <ArticleWrapper next>
-            <IndexDesc>下一篇</IndexDesc>
-            <ArticleTitle>这是下一篇文章的标题！</ArticleTitle>
-          </ArticleWrapper>
-        </SwitchBlock>
+        {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>
+        )}
       </SwitchArticleWrapper>
       <SpaceGrow />
       <GotoTopWrapper>

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

@@ -1,6 +1,6 @@
 import React, { FC, ReactNode, memo } from 'react'
 
-import type { TSwipeOption } from '../spec'
+import type { TSwipeOption, TArticleNavi } from '../spec'
 import AddOn from '../AddOn'
 
 import { DrawerOverlay, DrawerWrapper, DrawerContent } from '../styles'
@@ -12,6 +12,7 @@ type TProps = {
   visible: boolean
   rightOffset: string
   type: string
+  articleNavi?: TArticleNavi
   children: ReactNode
 }
 
@@ -21,6 +22,7 @@ const DesktopView: FC<TProps> = ({
   visible,
   rightOffset,
   type,
+  articleNavi,
   children,
 }) => {
   return (
@@ -34,7 +36,7 @@ const DesktopView: FC<TProps> = ({
         mobile={false}
         options={options}
       >
-        <AddOn type={type} />
+        <AddOn type={type} articleNavi={articleNavi} />
         <DrawerContent>{children}</DrawerContent>
       </DrawerWrapper>
     </React.Fragment>

src/containers/tool/Drawer/index.tsx

@@ -40,6 +40,7 @@ const DrawerContainer: FC<TProps> = ({ drawer: store }) => {
     headerText,
     showHeaderText,
     disableContentDrag,
+    articleNavi,
   } = store
 
   return (
@@ -52,6 +53,7 @@ const DrawerContainer: FC<TProps> = ({ drawer: store }) => {
       canBeClose={canBeClose}
       showHeaderText={showHeaderText}
       disableContentDrag={disableContentDrag}
+      articleNavi={articleNavi}
     >
       <Content
         type={type}

src/containers/tool/Drawer/logic.ts

@@ -1,11 +1,11 @@
 import { useEffect } from 'react'
 import { contains, values } from 'ramda'
 
-import type { TDirection } from '@/spec'
+import type { TArticle, TDirection } from '@/spec'
 import { TYPE, EVENT } from '@/constant'
 
 import { toggleGlobalBlur, clearGlobalBlur } from '@/utils/dom'
-import { Global, send, debounce } from '@/utils/helper'
+import { Global, send, debounce, previewArticle } from '@/utils/helper'
 import { buildLog } from '@/utils/logger'
 import asyncSuit from '@/utils/async'
 
@@ -40,6 +40,11 @@ export const closeDrawer = (): void => {
   }, 200)
 }
 
+export const naviToArticle = (article: TArticle): void => {
+  previewArticle(article)
+  send(EVENT.RELOAD_ARTICLE)
+}
+
 // handler swiped event for up/down swipe
 // 判断最终是回到原来的位置还是隐藏 panel
 export const onSwipedYHandler = (
@@ -146,6 +151,7 @@ export const toggleHeaderTextVisiable = (bool: boolean): void => {
 
 export const resetSwipeAviliable = (): void => store.resetSwipeAviliable()
 
+//
 const DataResolver = [
   {
     match: asyncRes(EVENT.DRAWER.OPEN),

src/containers/tool/Drawer/spec.ts

@@ -1,4 +1,4 @@
-import type { TTestable, TActive } from '@/spec'
+import type { TTestable, TActive, TArticle } from '@/spec'
 
 export type TSwipeOption = {
   direction: 'bottom' | 'top'
@@ -19,3 +19,8 @@ export type TDrawer = TTestable &
     rightOffset?: string
     type: string
   }
+
+export type TArticleNavi = {
+  previous: TArticle | null
+  next: TArticle | null
+}

src/containers/tool/Drawer/store.ts

@@ -4,18 +4,18 @@
  */
 
 import { types as T, getParent, Instance } from 'mobx-state-tree'
-import { concat, keys, reduce, merge, contains, values } from 'ramda'
+import { concat, keys, reduce, merge, contains, values, findIndex } from 'ramda'
 
-import type { TRootStore, TCommunity, TThread, TArticle } from '@/spec'
-import { TYPE, ARTICLE_THREAD } from '@/constant'
+import type { TRootStore, TCommunity, TThread, TArticle, TWorks } from '@/spec'
+import { TYPE, ARTICLE_THREAD, THREAD } from '@/constant'
 
 import { markStates, toJS } from '@/utils/mobx'
 import { toggleGlobalBlur, lockPage, unlockPage } from '@/utils/dom'
-import { Global } from '@/utils/helper'
+import { Global, titleCase } from '@/utils/helper'
 import { WIDTH, mediaBreakPoints } from '@/utils/css/metric'
 import { User } from '@/model'
 
-import { TSwipeOption } from './spec'
+import { TSwipeOption, TArticleNavi } from './spec'
 import { SWIPE_THRESHOLD } from './styles/metrics'
 
 const defaultOptions: TSwipeOption = { direction: 'bottom', position: 'M' }
@@ -117,10 +117,42 @@ const DrawerStore = T.model('DrawerStore', {
     get modalVisible() {
       return self.visible && Global.innerWidth > mediaBreakPoints.desktopL
     },
-
     get slideVisible() {
       return self.visible && Global.innerWidth <= mediaBreakPoints.desktopL
     },
+    get viewingArticle(): TArticle {
+      const root = getParent(self) as TRootStore
+      return root.viewing.viewingArticle
+    },
+    get articleNavi(): TArticleNavi {
+      const slf = self as TStore
+      const root = getParent(self) as TRootStore
+      const viewingArticleId = slf.viewingArticle.id
+
+      let pagedArticles
+      switch (slf.curThread) {
+        case THREAD.WORKS: {
+          pagedArticles = toJS(root.worksContent.pagedWorks)
+          break
+        }
+
+        default: {
+          pagedArticles = toJS(
+            root.articlesThread[`paged${titleCase(slf.curThread)}s`],
+          )
+          break
+        }
+      }
+
+      const curIndex = findIndex(
+        (a: TWorks) => a.id === viewingArticleId,
+        pagedArticles.entries,
+      )
+      return {
+        previous: pagedArticles.entries[curIndex - 1] || null,
+        next: pagedArticles.entries[curIndex + 1] || null,
+      }
+    },
   }))
   .actions((self) => ({
     open({ type, data, options = {} }): void {

src/containers/tool/Drawer/styles/add_on.ts

@@ -61,7 +61,9 @@ export const SwitchArticleWrapper = styled.div<TActive>`
 
   transition: opacity 0.2s linear;
 `
-export const SwitchBlock = styled.div``
+export const SwitchBlock = styled.div`
+  cursor: pointer;
+`
 export const ArticleWrapper = styled.div<{ next?: boolean }>`
   ${css.flexColumn('align-start')};
   position: absolute;
@@ -73,6 +75,7 @@ export const ArticleWrapper = styled.div<{ next?: boolean }>`
   display: none;
   ${SwitchBlock}:hover & {
     display: block;
+    cursor: pointer;
   }
 `
 export const IndexDesc = styled.div`