From d4ffb5606c20ed2273c3c22f845277d76ed85e53 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sun, 12 Sep 2021 20:50:53 +0800 Subject: [PATCH 1/2] refactor(drawer): preview navi & style adjust --- src/components/AvatarsRow/styles/metric.ts | 4 +- .../AvatarsRow/styles/real_avatar.ts | 6 +- src/components/DigestSentence/index.tsx | 3 +- src/containers/tool/Drawer/AddOn.tsx | 71 +++++++++++-------- .../tool/Drawer/Viewer/DesktopView.tsx | 6 +- src/containers/tool/Drawer/index.tsx | 2 + src/containers/tool/Drawer/logic.ts | 10 ++- src/containers/tool/Drawer/spec.ts | 7 +- src/containers/tool/Drawer/store.ts | 41 +++++++++-- src/containers/tool/Drawer/styles/add_on.ts | 5 +- src/containers/unit/Comments/List/index.tsx | 27 +++---- src/containers/unit/Comments/logic.ts | 36 ++++------ src/containers/unit/Comments/store.ts | 2 - src/containers/viewer/ArticleViewer/logic.ts | 12 +++- utils/constant/event.ts | 1 + 15 files changed, 146 insertions(+), 87 deletions(-) diff --git a/src/components/AvatarsRow/styles/metric.ts b/src/components/AvatarsRow/styles/metric.ts index 5883d011a..e2d74cc99 100644 --- a/src/components/AvatarsRow/styles/metric.ts +++ b/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: { diff --git a/src/components/AvatarsRow/styles/real_avatar.ts b/src/components/AvatarsRow/styles/real_avatar.ts index 941a090bc..788246f29 100644 --- a/src/components/AvatarsRow/styles/real_avatar.ts +++ b/src/components/AvatarsRow/styles/real_avatar.ts @@ -34,15 +34,12 @@ type TAvatarsImg = { size: string; onClick: () => void; scrollPosition: any } export const AvatarsImg = styled(Img)` 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` height: ${({ size }) => getAvatarSize(size)}; padding-left: ${({ total }) => (total >= 1000 ? '5px' : '3px')}; + padding-top: 1px; &:hover { cursor: pointer; diff --git a/src/components/DigestSentence/index.tsx b/src/components/DigestSentence/index.tsx index c292b212e..af3a1882e 100755 --- a/src/components/DigestSentence/index.tsx +++ b/src/components/DigestSentence/index.tsx @@ -58,8 +58,9 @@ const DigestSentence: FC = ({ 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]) diff --git a/src/containers/tool/Drawer/AddOn.tsx b/src/containers/tool/Drawer/AddOn.tsx index 9b74805a5..4ec80e14e 100755 --- a/src/containers/tool/Drawer/AddOn.tsx +++ b/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 = ({ type }) => { +const AddOn: FC = ({ type, articleNavi }) => { + // console.log('-- type: ', type) return ( @@ -43,34 +47,41 @@ const AddOn: FC = ({ type }) => { - - - - 上一篇 - - 可能是最性感的开发者社区诚邀内侧，来为你心爱的作品建立一个社区吧！ - - - - - - - 下一篇 - 这是下一篇文章的标题！ - - + {articleNavi?.previous && ( + + naviToArticle(articleNavi.previous)} + dimWhenIdle + /> + naviToArticle(articleNavi.previous)}> + 上一篇 + {articleNavi.previous.title} + + + )} + {articleNavi?.next && ( + + naviToArticle(articleNavi.next)} + dimWhenIdle + /> + naviToArticle(articleNavi.next)} + next + > + 下一篇 + {articleNavi.next.title} + + + )} diff --git a/src/containers/tool/Drawer/Viewer/DesktopView.tsx b/src/containers/tool/Drawer/Viewer/DesktopView.tsx index af3a4b101..876ec7d62 100644 --- a/src/containers/tool/Drawer/Viewer/DesktopView.tsx +++ b/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 = ({ visible, rightOffset, type, + articleNavi, children, }) => { return ( @@ -34,7 +36,7 @@ const DesktopView: FC = ({ mobile={false} options={options} > - + {children} diff --git a/src/containers/tool/Drawer/index.tsx b/src/containers/tool/Drawer/index.tsx index a39c6b8e4..d4ff5667c 100755 --- a/src/containers/tool/Drawer/index.tsx +++ b/src/containers/tool/Drawer/index.tsx @@ -40,6 +40,7 @@ const DrawerContainer: FC = ({ drawer: store }) => { headerText, showHeaderText, disableContentDrag, + articleNavi, } = store return ( @@ -52,6 +53,7 @@ const DrawerContainer: FC = ({ drawer: store }) => { canBeClose={canBeClose} showHeaderText={showHeaderText} disableContentDrag={disableContentDrag} + articleNavi={articleNavi} > { }, 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), diff --git a/src/containers/tool/Drawer/spec.ts b/src/containers/tool/Drawer/spec.ts index 5dd90d883..ab8b590c6 100644 --- a/src/containers/tool/Drawer/spec.ts +++ b/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 +} diff --git a/src/containers/tool/Drawer/store.ts b/src/containers/tool/Drawer/store.ts index c1a36036c..ef421ded8 100755 --- a/src/containers/tool/Drawer/store.ts +++ b/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, 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,41 @@ 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 + + switch (slf.curThread) { + case THREAD.WORKS: { + return { + previous: null, // TODO: + next: null, // TODO: + } + } + + default: { + const pagedArticles = toJS( + root.articlesThread[`paged${titleCase(slf.curThread)}s`], + ) + const curIndex = findIndex( + (a: TArticle) => 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 { diff --git a/src/containers/tool/Drawer/styles/add_on.ts b/src/containers/tool/Drawer/styles/add_on.ts index cffe06472..c41470cd8 100755 --- a/src/containers/tool/Drawer/styles/add_on.ts +++ b/src/containers/tool/Drawer/styles/add_on.ts @@ -61,7 +61,9 @@ export const SwitchArticleWrapper = styled.div` 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` diff --git a/src/containers/unit/Comments/List/index.tsx b/src/containers/unit/Comments/List/index.tsx index 9a4777f53..95a725d51 100644 --- a/src/containers/unit/Comments/List/index.tsx +++ b/src/containers/unit/Comments/List/index.tsx @@ -21,7 +21,6 @@ type TProps = { mode: TMode restProps: { loading: boolean - loadingFresh: boolean tobeDeleteId: string } } @@ -32,7 +31,7 @@ const CommentsList: FC = ({ foldedIds, isAllFolded, mode, - restProps: { loading, loadingFresh, tobeDeleteId }, + restProps: { loading, tobeDeleteId }, }) => (
= ({ mode={mode} loading={loading} /> - {loadingFresh && ( + {/* {loadingFresh && ( - )} + )} */} = ({ */}
- + {!loading && ( + + )} ) diff --git a/src/containers/unit/Comments/logic.ts b/src/containers/unit/Comments/logic.ts index dcb08768c..2a24bb088 100755 --- a/src/containers/unit/Comments/logic.ts +++ b/src/containers/unit/Comments/logic.ts @@ -1,9 +1,8 @@ import { useEffect } from 'react' -import { curry, isEmpty, reject, equals, mergeDeepRight } from 'ramda' +import { curry, isEmpty, reject, equals } from 'ramda' import type { TUser, TID } from '@/spec' -import { PAGE_SIZE } from '@/config' -import { TYPE, EVENT, ERR } from '@/constant' +import { EVENT, ERR } from '@/constant' import asyncSuit from '@/utils/async' import BStore from '@/utils/bstore' @@ -19,18 +18,15 @@ import S from './schema' const log = buildLog('L:Comments') const { SR71, $solver, asyncRes, asyncErr } = asyncSuit -const sr71$ = new SR71() +const sr71$ = new SR71({ + // @ts-ignore + receive: [EVENT.RELOAD_ARTICLE], +}) let sub$ = null let saveDraftTimmer = null let store: TStore | undefined -/* DESC_INSERTED, ASC_INSERTED */ -const defaultArgs = { - fresh: false, - filter: { page: 1, size: PAGE_SIZE.D, sort: TYPE.ASC_INSERTED }, -} - // variables = %{id: post.id, thread: "POST", filter: %{page: 1, size: page_size}} export const loadComments = (): void => { const { viewingArticle: article, mode } = store @@ -46,13 +42,6 @@ export const loadComments = (): void => { sr71$.query(S.pagedComments, args) } -const markLoading = (fresh): void => { - if (fresh) { - return store.mark({ loadingFresh: true }) - } - return store.mark({ loading: true }) -} - /* eslint-disable-next-line */ export const createComment = curry((cb, e) => { if (!store.validator('create')) return false @@ -256,8 +245,7 @@ export const pageChange = (page = 1): void => { scrollIntoEle('lists-info') } -const cancelLoading = () => - store.mark({ loading: false, loadingFresh: false, creating: false }) +const cancelLoading = () => store.mark({ loading: false, creating: false }) export const onReplyEditorClose = (): void => { closeReplyBox() @@ -300,7 +288,6 @@ const DataSolver = [ match: asyncRes('pagedComments'), action: ({ pagedComments }) => { cancelLoading() - console.log('## pagedComments: ', pagedComments) store.mark({ pagedComments, loading: false }) }, }, @@ -381,6 +368,13 @@ const DataSolver = [ match: asyncRes('searchUsers'), action: ({ searchUsers: { entries } }) => store.updateMentionList(entries), }, + { + match: asyncRes(EVENT.RELOAD_ARTICLE), + action: () => { + store.mark({ loading: true }) + loadComments() + }, + }, ] const ErrSolver = [ @@ -436,7 +430,7 @@ export const useInit = ( return () => { // log('effect uninit') - if (store.loading || store.loadingFresh || !sub$) return + if (store.loading || !sub$) return stopDraftTimmer() sr71$.stop() diff --git a/src/containers/unit/Comments/store.ts b/src/containers/unit/Comments/store.ts index e13b4f1a8..0f9193055 100755 --- a/src/containers/unit/Comments/store.ts +++ b/src/containers/unit/Comments/store.ts @@ -82,8 +82,6 @@ const CommentsStore = T.model('CommentsStore', { replying: T.optional(T.boolean, false), // toggle loading for comments list loading: T.optional(T.boolean, false), - // toggle loading for first item of commetns list - loadingFresh: T.optional(T.boolean, false), foldedCommentIds: T.optional(T.array(T.string), []), }) diff --git a/src/containers/viewer/ArticleViewer/logic.ts b/src/containers/viewer/ArticleViewer/logic.ts index 8f1ad8a99..b729e96c4 100755 --- a/src/containers/viewer/ArticleViewer/logic.ts +++ b/src/containers/viewer/ArticleViewer/logic.ts @@ -14,7 +14,7 @@ import type { TStore } from './store' const { SR71, $solver, asyncRes, asyncErr } = asyncSuit const sr71$ = new SR71({ // @ts-ignore - receive: [EVENT.DRAWER.CLOSE], + receive: [EVENT.DRAWER.CLOSE, EVENT.RELOAD_ARTICLE], }) let store: TStore | undefined @@ -29,8 +29,6 @@ const loadArticle = (): void => { const userHasLogin = store.isLogin const { id, meta } = store.viewingArticle - console.log('loadBefore: ', store.viewingArticle) - const variables = { id, userHasLogin } markLoading() const schema = S[meta.thread.toLowerCase()] @@ -74,6 +72,14 @@ const DataSolver = [ markLoading(false) }, }, + { + match: asyncRes(EVENT.RELOAD_ARTICLE), + action: () => { + markLoading(true) + loadArticle() + }, + }, + { match: asyncRes(EVENT.DRAWER.CLOSE), action: () => { diff --git a/utils/constant/event.ts b/utils/constant/event.ts index 214ff95c6..cdc68b6c9 100755 --- a/utils/constant/event.ts +++ b/utils/constant/event.ts @@ -34,6 +34,7 @@ const EVENT = { COMMUNITY_CHANGE: 'COMMUNITY_CHANGE', // refresh + RELOAD_ARTICLE: 'RELOAD_ARTICLE', REFRESH_COMMUNITIES: 'REFRESH_COMMUNITIES', REFRESH_ARTICLES: 'REFRESH_ARTICLES', REFRESH_POSTS: 'REFRESH_POSTS', From 097262b66311df80cd6a7123ff560e6f985cf9f8 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sun, 12 Sep 2021 21:10:41 +0800 Subject: [PATCH 2/2] refactor(drawer): preview navi with works --- src/containers/tool/Drawer/store.ts | 29 ++++++++++--------- .../ArticleViewer/WorksViewer/Header.tsx | 2 +- .../styles/works_viewer/header.ts | 1 + 3 files changed, 17 insertions(+), 15 deletions(-) diff --git a/src/containers/tool/Drawer/store.ts b/src/containers/tool/Drawer/store.ts index ef421ded8..ecc59b94e 100755 --- a/src/containers/tool/Drawer/store.ts +++ b/src/containers/tool/Drawer/store.ts @@ -6,7 +6,7 @@ import { types as T, getParent, Instance } from 'mobx-state-tree' import { concat, keys, reduce, merge, contains, values, findIndex } from 'ramda' -import type { TRootStore, TCommunity, TThread, TArticle } from '@/spec' +import type { TRootStore, TCommunity, TThread, TArticle, TWorks } from '@/spec' import { TYPE, ARTICLE_THREAD, THREAD } from '@/constant' import { markStates, toJS } from '@/utils/mobx' @@ -129,28 +129,29 @@ const DrawerStore = T.model('DrawerStore', { const root = getParent(self) as TRootStore const viewingArticleId = slf.viewingArticle.id + let pagedArticles switch (slf.curThread) { case THREAD.WORKS: { - return { - previous: null, // TODO: - next: null, // TODO: - } + pagedArticles = toJS(root.worksContent.pagedWorks) + break } default: { - const pagedArticles = toJS( + pagedArticles = toJS( root.articlesThread[`paged${titleCase(slf.curThread)}s`], ) - const curIndex = findIndex( - (a: TArticle) => a.id === viewingArticleId, - pagedArticles.entries, - ) - return { - previous: pagedArticles.entries[curIndex - 1] || null, - next: pagedArticles.entries[curIndex + 1] || null, - } + 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) => ({ diff --git a/src/containers/viewer/ArticleViewer/WorksViewer/Header.tsx b/src/containers/viewer/ArticleViewer/WorksViewer/Header.tsx index be938398c..ba8f9b505 100644 --- a/src/containers/viewer/ArticleViewer/WorksViewer/Header.tsx +++ b/src/containers/viewer/ArticleViewer/WorksViewer/Header.tsx @@ -37,7 +37,7 @@ const Header: FC = ({ article }) => { - CoderPlanets + {article.title} 可能是最性感的开发者社区, web first, pure diff --git a/src/containers/viewer/ArticleViewer/styles/works_viewer/header.ts b/src/containers/viewer/ArticleViewer/styles/works_viewer/header.ts index daacd7ad9..865d779a0 100644 --- a/src/containers/viewer/ArticleViewer/styles/works_viewer/header.ts +++ b/src/containers/viewer/ArticleViewer/styles/works_viewer/header.ts @@ -22,6 +22,7 @@ export const Intro = styled.div` ${css.flexColumn()}; ` export const Title = styled.div` + ${css.cutRest('350px')}; font-size: 22px; color: ${theme('thread.articleTitle')}; `