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

* refactor(Upvote): make it awesome

* refactor(Upvote): re-org codebase & naming

* refactor(Upvote): rm warning

Author: mydearxym

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``