feat(upvote-button): fancy, animated upvote component

src/components/ArticleImgWindow/index.tsx

@@ -0,0 +1,29 @@
+/*
+ *
+ * ArticleImgWindow
+ *
+ */
+
+import { FC, memo } from 'react'
+
+import { buildLog } from '@/utils'
+
+import { Wrapper, Block } from './styles'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:ArticleImgWindow:index')
+
+type TProps = {
+  testid?: string
+}
+
+const ArticleImgWindow: FC<TProps> = ({ testid = 'article-img-window' }) => {
+  return (
+    <Wrapper testid={testid}>
+      <Block />
+      <Block />
+    </Wrapper>
+  )
+}
+
+export default memo(ArticleImgWindow)

src/components/ArticleImgWindow/styles/index.ts

@@ -0,0 +1,19 @@
+import styled from 'styled-components'
+
+import type { TTestable } from '@/spec'
+
+// import Img from '@/Img'
+import { css } from '@/utils'
+
+export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
+  'data-test-id': testid,
+}))<TTestable>`
+  ${css.flex('align-center')};
+`
+export const Block = styled.div`
+  width: 30%;
+  height: 60px;
+  background: #06303b;
+  margin-right: 10px;
+  border-radius: 5px;
+`

src/components/ArticleImgWindow/tests/index.test.ts

@@ -0,0 +1,10 @@
+// import React from 'react'
+// import { shallow } from 'enzyme'
+
+// import ArticleImgWindow from '../index'
+
+describe('TODO <ArticleImgWindow />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(true)
+  })
+})

src/components/AvatarsRow/index.tsx

@@ -42,8 +42,9 @@ const getUniqueArray = (arr, comp) => {
 export type TProps = {
   users?: TUser[]
   size?: TAvatarSize
-  total: number
+  total?: number | null
   limit: number
+  showMore?: boolean
   showTotalNumber?: boolean
   reverse?: boolean
   scrollPosition?: any
@@ -54,11 +55,12 @@ export type TProps = {
 
 const AvatarsRow: FC<TProps> = ({
   size = SIZE.SMALL,
-  total,
+  total = null,
   users = [],
   limit = AVATARS_LIST_LENGTH.POSTS,
   onUserSelect = log,
   onTotalSelect = log,
+  showMore = true,
   showTotalNumber = false,
   reverse = true,
   // see https://github.com/Aljullu/react-lazy-load-image-component/issues/42
@@ -68,23 +70,25 @@ const AvatarsRow: FC<TProps> = ({
     return <span />
   }
 
+  const totalCount = total || users.length
+
   users = filter(validUser, getUniqueArray(users, 'id'))
   const sortedUsers = reverse ? users : reverseFn(users)
 
   return (
-    <Wrapper total={total}>
-      {total <= 1 ? (
+    <Wrapper total={totalCount}>
+      {totalCount <= 1 || !showMore ? (
         <TotalOneOffset />
       ) : (
         <MoreItem
           size={size}
-          total={total}
+          total={totalCount}
           showTotalNumber={showTotalNumber}
           onTotalSelect={onTotalSelect}
         />
       )}
 
-      {total === 1 ? (
+      {totalCount === 1 ? (
         <RealAvatar
           user={sortedUsers[0]}
           size={size}

src/components/IconText/styles/metric.ts

@@ -4,10 +4,10 @@ import { SIZE } from '@/constant'
 export const getIconSize = (size: TSIZE): string => {
   switch (size) {
     case SIZE.LARGE: {
-      return '14px'
+      return '16px'
     }
     case SIZE.MEDIUM: {
-      return '13px'
+      return '15px'
     }
     case SIZE.TINY: {
       return '11px'
@@ -26,6 +26,9 @@ export const getTextSize = (size: TSIZE): string => {
     case SIZE.LARGE: {
       return '15px'
     }
+    case SIZE.MEDIUM: {
+      return '14px'
+    }
     case SIZE.TINY: {
       return '11px'
     }

src/components/JobItem/DesktopView/Footer.tsx

@@ -1,13 +1,26 @@
 import { FC, memo } from 'react'
 
+import { ICON } from '@/config'
+import Upvote from '@/components/Upvote'
+import DotDivider from '@/components/DotDivider'
+import IconText from '@/components/IconText'
+
+import { Wrapper, PublishWrapper, Bottom } from '../styles/desktop_view/footer'
+
 const Footer: FC = () => {
   return (
-    <div>
-      <div>mydearxym 发布于： 3 天前</div>
-      <div>
-        你和 头像 Raw 等 24 人觉得不错 -- 评论 35，收藏, 分享, 举报(more 里面)
-      </div>
-    </div>
+    <Wrapper>
+      <PublishWrapper>
+        mydearxym <DotDivider space={6} /> 3 天前
+      </PublishWrapper>
+      <Bottom>
+        {/* 你和 头像 Raw 等 24 人觉得很赞 -- 评论 35，收藏, 分享, 举报(more 里面) */}
+        <Upvote />
+        <IconText iconSrc={`${ICON}/article/comment.svg`} size="medium">
+          9
+        </IconText>
+      </Bottom>
+    </Wrapper>
   )
 }
 

src/components/JobItem/DesktopView/index.tsx

@@ -4,7 +4,8 @@ import type { TJob } from '@/spec'
 
 import { cutRest } from '@/utils'
 import DigestSentence from '@/components/DigestSentence'
-import { Br } from '@/components/Common'
+import { Br, SpaceGrow } from '@/components/Common'
+import ArticleImgWindow from '@/components/ArticleImgWindow'
 
 import Header from './Header'
 import Footer from './Footer'
@@ -28,9 +29,10 @@ const DesktopView: FC<TProps> = ({ entry }) => {
           100,
         )}
       </DigestSentence>
-      <Br top={10} />
-      <div>图片列表，可预览</div>
-      <Br top={20} />
+      <Br top={4} />
+      <ArticleImgWindow />
+      <Br top={16} />
+      <SpaceGrow />
       <Footer />
     </Wrapper>
   )

src/components/JobItem/index.tsx

@@ -7,7 +7,7 @@
 import { FC, memo } from 'react'
 
 import type { TJob, TID } from '@/spec'
-import { buildLog, getRandomInt } from '@/utils'
+import { buildLog } from '@/utils'
 import { useAccount } from '@/hooks'
 
 import ArticleItemPrefixLabel from '@/components/ArticleItemPrefixLabel'
@@ -18,21 +18,16 @@ import { Wrapper } from './styles'
 /* eslint-disable-next-line */
 const log = buildLog('c:JobItem:index')
 
-const randomHeight = () => {
-  return `${getRandomInt(200, 420)}px`
-}
-
 type TProps = {
   entry: TJob
   activeId: TID | null
 }
 
 const JobItem: FC<TProps> = ({ entry, activeId }) => {
-  const height = randomHeight()
   const { c11n } = useAccount()
 
   return (
-    <Wrapper entry={entry} activeId={activeId} c11n={c11n} height={height}>
+    <Wrapper entry={entry} activeId={activeId} c11n={c11n}>
       <ArticleItemPrefixLabel entry={entry} topOffset="9px" />
       <DesktopView entry={entry} />
     </Wrapper>

src/components/JobItem/styles/desktop_view/footer.ts

@@ -0,0 +1,15 @@
+import styled from 'styled-components'
+
+import { theme, css } from '@/utils'
+
+export const Wrapper = styled.div`
+  color: ${theme('thread.articleDigest')};
+`
+export const PublishWrapper = styled.div`
+  ${css.flex('align-center')};
+  margin-left: 3px;
+  font-size: 13px;
+`
+export const Bottom = styled.div`
+  ${css.flex('justify-between', 'align-center')};
+`

src/components/JobItem/styles/desktop_view/index.ts

@@ -1,7 +1,10 @@
 import styled from 'styled-components'
 
-// import { theme, css } from '@/utils'
+import { css } from '@/utils'
 
-export const Wrapper = styled.div``
+export const Wrapper = styled.div`
+  ${css.flexColumn()};
+  height: 100%;
+`
 
 export const Holder = styled.div``

src/components/JobItem/styles/index.ts

@@ -4,18 +4,19 @@ import type { TJob, TID, TC11N } from '@/spec'
 import { css } from '@/utils'
 import { getOpacity } from './metric'
 
-type TWrapper = { entry: TJob; activeId: TID; c11n: TC11N; height?: string }
+type TWrapper = { entry: TJob; activeId: TID; c11n: TC11N }
 export const Wrapper = styled.article<TWrapper>`
   ${css.flex('align-start')};
   width: 100%;
-  height: ${({ height }) => height};
+  height: auto;
   margin-bottom: 18px;
   margin-right: 0;
   background: #0d3644;
   border-radius: 8px;
 
   position: relative;
-  padding: 15px;
+  padding: 14px;
+  padding-top: 20px;
   opacity: ${({ entry, activeId, c11n }) => getOpacity(entry, activeId, c11n)};
 
   transition: all 0.25s;

src/components/Upvote/Desc.tsx

@@ -0,0 +1,53 @@
+/*
+ * Desc
+ */
+
+import { FC, Fragment, memo } from 'react'
+
+import { buildLog } from '@/utils'
+import { Space } from '@/components/Common'
+
+import TotalCount from './TotalCount'
+import { Text } from './styles'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:Upvote:Desc')
+
+type TProps = {
+  count?: number
+  avatarsRowLimit?: number
+  noOne: boolean
+  alias?: string // 觉得很赞(default), 觉得很酷(works), 学到了(blog), 感兴趣(meetup), 有意思(Radar)
+}
+
+const Desc: FC<TProps> = ({
+  noOne,
+  count = 4,
+  avatarsRowLimit = 3,
+  alias = '觉得很赞',
+}) => {
+  const onlyOne = count === 1
+
+  return (
+    <Fragment>
+      {!noOne && !onlyOne && count > avatarsRowLimit && (
+        <Fragment>
+          <Space left={3} />
+          <Text>等</Text>
+          <Space left={3} />
+          <TotalCount count={count} /> <Space left={4} />
+          <Text>人</Text>
+        </Fragment>
+      )}
+      {noOne ? (
+        <Fragment>
+          <TotalCount count={count} /> <Space left={4} />
+        </Fragment>
+      ) : (
+        <Text>{alias}</Text>
+      )}
+    </Fragment>
+  )
+}
+
+export default memo(Desc)

src/components/Upvote/TotalCount/AnimatedCount.tsx

@@ -0,0 +1,24 @@
+import { FC, memo } from 'react'
+
+import { AnimateOnChange } from 'react-animation'
+import { Wrapper } from '../styles/total_count'
+
+type TProps = {
+  count?: number
+}
+
+const AnimatedCount: FC<TProps> = ({ count = 0 }) => {
+  return (
+    <Wrapper>
+      <AnimateOnChange
+        animationIn="fadeInUp"
+        animationOut="bounceOut"
+        durationOut={200}
+      >
+        {count}
+      </AnimateOnChange>
+    </Wrapper>
+  )
+}
+
+export default memo(AnimatedCount)

src/components/Upvote/TotalCount/index.tsx

@@ -0,0 +1,33 @@
+import { FC, memo, createContext, useContext } from 'react'
+import dynamic from 'next/dynamic'
+
+import { Wrapper } from '../styles/total_count'
+
+// @ts-ignore
+const LoadingValueContext = createContext()
+
+// props is not accessable in loading
+// see https://github.com/vercel/next.js/issues/7906#issuecomment-787686440
+const AnimatedCount = dynamic(() => import('./AnimatedCount'), {
+  /* eslint-disable react/display-name */
+  loading: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const value = useContext(LoadingValueContext) as number
+    return <Wrapper>{value}</Wrapper>
+  },
+  ssr: false,
+})
+
+type TProps = {
+  count?: number
+}
+
+const TotalCount: FC<TProps> = ({ count }) => {
+  return (
+    <LoadingValueContext.Provider value={count}>
+      <AnimatedCount count={count} />
+    </LoadingValueContext.Provider>
+  )
+}
+
+export default memo(TotalCount)