refactor(article): adjust post item style (#1045)

* chore(js-ts): PostItem

* refactor(DigestSentence): add image, video count concept UI

* refactor(post-item): extract ActiveBadge comp

* chore(js-ts): AvatarsRow

* chore(js-ts): AvatarsRow, use local spec

Author: mydearxym

.eslintignore

@@ -2,4 +2,5 @@
 .gitignore
 *.json
 *.lock
-*.hbs
+*.hbs
+*.svg

public/icons/static/shape/image.svg

@@ -1,8 +1,10 @@
-import React, { useCallback } from 'react'
+import React from 'react'
 
 import { prettyNum } from '@/utils'
 import Tooltip from '@/components/Tooltip'
 
+import type { TProps as TAvatarsProps } from './index'
+
 import {
   Wrapper,
   NumbersMore,
@@ -12,13 +14,19 @@ import {
   Focus,
 } from './styles/more_item'
 
-const MoreItem = ({ users, size, total, onTotalSelect, showTotalNumber }) => {
-  const handleClick = useCallback(() => {
-    onTotalSelect({ users, total })
-  }, [onTotalSelect, total, users])
+type TProps = Pick<
+  TAvatarsProps,
+  'size' | 'total' | 'showTotalNumber' | 'onTotalSelect'
+>
 
+const MoreItem: React.FC<TProps> = ({
+  size,
+  total,
+  onTotalSelect,
+  showTotalNumber,
+}) => {
   return (
-    <Wrapper onClick={handleClick}>
+    <Wrapper size={size} onClick={() => onTotalSelect()}>
       <Tooltip
         content={
           showTotalNumber ? (
@@ -29,10 +37,9 @@ const MoreItem = ({ users, size, total, onTotalSelect, showTotalNumber }) => {
             </TotalCommentStateHint>
           )
         }
-        duration={0}
       >
         {showTotalNumber ? (
-          <TextMore>
+          <TextMore size={size} total={total}>
             <DotText>...</DotText>
           </TextMore>
         ) : (

public/icons/static/shape/video.svg

@@ -4,16 +4,17 @@
  *
  */
 
-import React, { useCallback } from 'react'
-import T from 'prop-types'
-import { compose, not, isNil, filter, reverse, slice } from 'ramda'
+import React from 'react'
+import { compose, not, isNil, filter, reverse as reverseFn, slice } from 'ramda'
 import { trackWindowScroll } from 'react-lazy-load-image-component'
 
+import type { TUser } from '@/spec'
 import { AVATARS_LIST_LENGTH } from '@/config'
 import { SIZE } from '@/constant'
-import { buildLog, o2s, s2o } from '@/utils'
+import { buildLog } from '@/utils'
 
 import Tooltip from '@/components/Tooltip'
+import type { TAvatarSize } from './spec'
 
 import MoreItem from './MoreItem'
 
@@ -45,41 +46,46 @@ const getUniqueArray = (arr, comp) => {
   return unique
 }
 
-const AvatarsRow = ({
+export type TProps = {
+  users?: TUser[]
+  size?: TAvatarSize
+  total: number
+  limit: number
+  showTotalNumber?: boolean
+  reverse?: boolean
+  scrollPosition?: any
+
+  onUserSelect: (user: TUser) => void
+  onTotalSelect: () => void
+}
+
+const AvatarsRow: React.FC<TProps> = ({
+  size = SIZE.SMALL,
   total,
-  users,
-  size,
-  limit,
-  onUserSelect,
-  onTotalSelect,
-  showTotalNumber,
-  reverse: isReverse,
-  scrollPosition,
+  users = [],
+  limit = AVATARS_LIST_LENGTH.POSTS,
+  onUserSelect = log,
+  onTotalSelect = log,
+  showTotalNumber = false,
+  reverse = true,
+  // see https://github.com/Aljullu/react-lazy-load-image-component/issues/42
+  scrollPosition = null,
 }) => {
-  const handleUserSelect = useCallback(
-    (e) => {
-      const user = s2o(e.target.dataset.user)
-      onUserSelect(user)
-    },
-    [onUserSelect],
-  )
-
   if (users.length === 0) {
     return <span />
   }
 
   users = filter(validUser, getUniqueArray(users, 'id'))
-  const sortedUsers = isReverse ? users : reverse(users)
+  const sortedUsers = reverse ? users : reverseFn(users)
 
   return (
-    <Wrapper size={size} total={total}>
+    <Wrapper total={total}>
       {total <= 1 ? (
         <TotalOneOffset />
       ) : (
         <MoreItem
           size={size}
           total={total}
-          users={users}
           showTotalNumber={showTotalNumber}
           onTotalSelect={onTotalSelect}
         />
@@ -91,18 +97,18 @@ const AvatarsRow = ({
           content={user.nickname}
           duration={0}
           delay={300}
-          contentHeight={getAvatarSize(size)}
+          contentHeight={getAvatarSize(size, 'number') as string}
+          noPadding
         >
           <AvatarsItem size={size} noHoverMargin={total === 1}>
             <AvatarsImg
               src={user.avatar}
               size={size}
-              data-user={o2s(user)}
-              onClick={handleUserSelect}
+              onClick={() => onUserSelect(user)}
               scrollPosition={scrollPosition}
               fallback={
                 <AvatarFallback
-                  size={getAvatarSize(size, 'number')}
+                  size={getAvatarSize(size, 'number') as number}
                   user={user}
                 />
               }
@@ -114,35 +120,4 @@ const AvatarsRow = ({
   )
 }
 
-AvatarsRow.propTypes = {
-  users: T.arrayOf(
-    T.shape({
-      id: T.string,
-      avatar: T.string,
-      nickname: T.string,
-      extra_id: T.string,
-    }),
-  ),
-  size: T.oneOf([SIZE.SMALL, SIZE.MEDIUM]),
-  total: T.number.isRequired,
-  limit: T.number,
-  onUserSelect: T.func,
-  onTotalSelect: T.func,
-  showTotalNumber: T.bool,
-  reverse: T.bool,
-  scrollPosition: T.any,
-}
-
-AvatarsRow.defaultProps = {
-  size: SIZE.SMALL,
-  users: [],
-  limit: AVATARS_LIST_LENGTH.POSTS,
-  onUserSelect: log,
-  onTotalSelect: log,
-  showTotalNumber: false,
-  reverse: true,
-  // see https://github.com/Aljullu/react-lazy-load-image-component/issues/42
-  scrollPosition: null,
-}
-
 export default trackWindowScroll(AvatarsRow)

src/components/AvatarsRow/MoreItem.js renamed to src/components/AvatarsRow/MoreItem.tsx

@@ -0,0 +1,3 @@
+import type { TSIZE_SM } from '@/spec'
+
+export type TAvatarSize = TSIZE_SM

src/components/AvatarsRow/index.js renamed to src/components/AvatarsRow/index.tsx

@@ -5,6 +5,7 @@ import { theme, css } from '@/utils'
 
 import ImgFallback from '@/components/ImgFallback'
 import { getLiSize, getAvatarSize, getUlMarginRight } from './metric'
+import type { TAvatarSize } from '../spec'
 
 export const Wrapper = styled.ul<{ total: number }>`
   ${css.flex('align-center')};
@@ -15,7 +16,7 @@ export const Wrapper = styled.ul<{ total: number }>`
   margin-right: ${({ total }) => getUlMarginRight(total)};
 `
 // height: 49px;
-type TBaseAvatarItem = { size: string; noHoverMargin: string }
+type TBaseAvatarItem = { size: TAvatarSize; noHoverMargin: boolean }
 const BaseAvatarItem = styled.li<TBaseAvatarItem>`
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
@@ -45,7 +46,8 @@ export const AvatarsItem = styled(BaseAvatarItem)`
 export const TotalOneOffset = styled.span`
   margin-right: 10px;
 `
-export const AvatarsImg = styled(Img)<{ size: string }>`
+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;
@@ -60,7 +62,7 @@ export const AvatarsImg = styled(Img)<{ size: string }>`
 
   text-align: center;
 `
-type TAvatarsMore = { size: string; total: number }
+type TAvatarsMore = { size: TAvatarSize; total: number }
 export const AvatarsMore = styled.span<TAvatarsMore>`
   ${css.flex('align-both')};
   font-size: 14px;

src/components/AvatarsRow/spec.ts

@@ -1,9 +1,11 @@
 import { SIZE } from '@/constant'
+import type { TAvatarSize } from '../spec'
+
 /**
  * NOTE:  Li size should always smaller than the avatar size
  */
 
-export const getLiSize = (size: string): string => {
+export const getLiSize = (size: TAvatarSize): string => {
   switch (size) {
     case SIZE.SMALL: {
       return '15px'