Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commitdf068c9

Browse files
authored
refactor(thread): common articles card comp (#1111)
* refactor(thread): extract article card comp* refactor(ThreadCard): adjust styles* refactor(ThreadCard): fix
1 parent3735094 commitdf068c9

File tree

12 files changed

+89
-50
lines changed

12 files changed

+89
-50
lines changed

‎src/components/JobItem/DesktopView/Footer.tsx‎renamed to ‎src/components/ArticleCard/Footer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import Upvote from '@/components/Upvote'
55
importDotDividerfrom'@/components/DotDivider'
66
importIconTextfrom'@/components/IconText'
77

8-
import{Wrapper,PublishWrapper,Bottom}from'../styles/desktop_view/footer'
8+
import{Wrapper,PublishWrapper,Bottom}from'./styles/footer'
99

1010
constFooter:FC=()=>{
1111
return(

‎src/components/JobItem/DesktopView/Header.tsx‎renamed to ‎src/components/ArticleCard/Header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import type { TTag } from '@/spec'
44
import{cutRest}from'@/utils'
55
importInlineTagsfrom'@/components/InlineTags'
66

7-
import{Wrapper,Title}from'../styles/desktop_view/header'
7+
import{Wrapper,Title}from'./styles/header'
88

99
typeTProps={
1010
title:string
Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import{FC,memo}from'react'
2+
3+
importtype{TJob}from'@/spec'
4+
// import { THREAD } from '@/constant'
5+
6+
import{cutRest}from'@/utils'
7+
importDigestSentencefrom'@/components/DigestSentence'
8+
import{Br,SpaceGrow}from'@/components/Common'
9+
importArticleImgWindowfrom'@/components/ArticleImgWindow'
10+
11+
importHeaderfrom'./Header'
12+
importFooterfrom'./Footer'
13+
14+
import{Wrapper}from'./styles'
15+
import{SIZE}from'@/constant'
16+
17+
typeTProps={
18+
data:TJob
19+
// thread?: TThread
20+
}
21+
constfakeDigest=
22+
'网络监测数据显示，从 7 月 12 日开始古巴限制了社交媒体和消息应用，此举被认为旨在限制信息流动。古巴上周末爆发了罕见的大规模反政府抗议。受到干扰的通讯平台包括了 WhatsApp、Facebook、Instagram 和部分 Telegram 服务。VPN 服务可以绕过这一干扰。古巴的反政府抗议与经济困难，疫苗短缺等问题有关。'
23+
24+
constArticleCard:FC<TProps>=({ data})=>{
25+
const{ title, tags}=data
26+
27+
return(
28+
<Wrapper>
29+
<Headertitle={title}tags={tags}/>
30+
<Brtop={15}/>
31+
<DigestSentence
32+
top={5}
33+
bottom={15}
34+
size={SIZE.MEDIUM}
35+
onPreview={()=>console.log('send preview')}
36+
>
37+
{cutRest(fakeDigest,150)}
38+
</DigestSentence>
39+
<Brtop={4}/>
40+
<ArticleImgWindow/>
41+
<Brtop={16}/>
42+
<SpaceGrow/>
43+
<Footer/>
44+
</Wrapper>
45+
)
46+
}
47+
48+
exportdefaultmemo(ArticleCard)

‎src/components/JobItem/styles/desktop_view/footer.ts‎renamed to ‎src/components/ArticleCard/styles/footer.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export const Wrapper = styled.div`
88
exportconstPublishWrapper=styled.div`
99
${css.flex('align-center')};
1010
margin-left: 3px;
11+
margin-bottom: 3px;
1112
font-size: 13px;
1213
`
1314
exportconstBottom=styled.div`
File renamed without changes.
File renamed without changes.
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// import React from 'react'
2+
// import { shallow } from 'enzyme'
3+
4+
// import ArticleCard from '../index'
5+
6+
describe('TODO <ArticleCard />',()=>{
7+
it('Expect to have unit tests specified',()=>{
8+
expect(true).toEqual(true)
9+
})
10+
})

‎src/components/DigestSentence/index.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66

77
import{FC,ReactNode,memo}from'react'
88

9+
importtype{TSIZE_SM}from'@/spec'
10+
import{SIZE}from'@/constant'
911
import{ICON}from'@/config'
1012
import{buildLog}from'@/utils'
1113

@@ -31,6 +33,7 @@ type TProps = {
3133
bottom?:number
3234
left?:number
3335
right?:number
36+
size?:TSIZE_SM
3437
onPreview:()=>void
3538
}
3639

@@ -42,6 +45,7 @@ const DigestSentence: FC<TProps> = ({
4245
bottom=0,
4346
left=0,
4447
right=0,
48+
size=SIZE.SMALL,
4549
})=>{
4650
return(
4751
<Wrapper
@@ -51,6 +55,7 @@ const DigestSentence: FC<TProps> = ({
5155
bottom={bottom}
5256
left={left}
5357
right={right}
58+
size={size}
5459
>
5560
{children}
5661
<Spaceleft={8}/>

‎src/components/DigestSentence/styles/index.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
importstyledfrom'styled-components'
22

3-
importtype{TTestable,TSpace}from'@/spec'
3+
importtype{TTestable,TSpace,TSIZE_SM}from'@/spec'
44
importImgfrom'@/Img'
55
import{css,theme}from'@/utils'
66

7+
import{getFontSize}from'./metric'
8+
9+
typeTWrapper=TTestable&TSpace&{size:TSIZE_SM}
710
exportconstWrapper=styled.div.attrs(({ testid}:TTestable)=>({
811
'data-test-id':testid,
9-
}))<TTestable&TSpace>`
12+
}))<TWrapper>`
1013
color:${theme('thread.articleDigest')};
11-
font-size:13px;
14+
font-size:${({ size})=>getFontSize(size)};
1215
1316
padding-top:${({ top})=>`${top}px`};
1417
padding-bottom:${({ bottom})=>`${bottom}px`};
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
importtype{TSIZE_SM}from'@/spec'
2+
import{SIZE}from'@/constant'
3+
4+
exportconstgetFontSize=(size:TSIZE_SM):string=>{
5+
switch(size){
6+
caseSIZE.MEDIUM:{
7+
return'14px'
8+
}
9+
10+
default:
11+
return'13px'
12+
}
13+
}
14+
15+
exportconstholder=1

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp