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.

Commit58d4c41

Browse files
committed
refactor(ArticleViewer): clear bundary of post/job or other type
1 parent620fa6b commit58d4c41

File tree

20 files changed

+403
-219
lines changed

20 files changed

+403
-219
lines changed
Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
importReactfrom'react'
2+
importTimeAgofrom'timeago-react'
3+
4+
import{DotDivider}from'..'
5+
6+
import{
7+
Wrapper,
8+
Logo,
9+
Title,
10+
PublishAt,
11+
Username,
12+
}from'./styles/company_info'
13+
14+
constCompanyInfo=({ company, insertedAt, author})=>(
15+
<Wrapper>
16+
<Logosrc={company.logo}alt="user_avatar"/>
17+
<div>
18+
<Title>{company.title}</Title>
19+
<PublishAt>
20+
<Username>{author.nickname}</Username>
21+
<DotDivider/>
22+
发布于:<TimeAgodatetime={insertedAt}locale="zh_CN"/>
23+
</PublishAt>
24+
</div>
25+
</Wrapper>
26+
)
27+
28+
exportdefaultCompanyInfo
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
importReactfrom'react'
2+
importTimeAgofrom'timeago-react'
3+
4+
import{Wrapper,Avatar,UserName,PublishAt}from'./styles/user_info'
5+
6+
constUserInfo=({ author, insertedAt})=>(
7+
<Wrapper>
8+
<Avatarsrc={author.avatar}alt="user_avatar"/>
9+
<div>
10+
<UserName>{author.nickname}</UserName>
11+
<PublishAt>
12+
发布于:<TimeAgodatetime={insertedAt}locale="zh_CN"/>
13+
</PublishAt>
14+
</div>
15+
</Wrapper>
16+
)
17+
18+
exportdefaultUserInfo

‎components/ArticleHeader/index.js‎

Lines changed: 75 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -7,111 +7,117 @@
77
importReactfrom'react'
88
importPropTypesfrom'prop-types'
99
importRfrom'ramda'
10-
importTimeAgofrom'timeago-react'
1110

1211
import{ICON_CMD}from'../../config'
1312

1413
importMaybefrom'../Maybe'
1514

1615
import{
1716
Wrapper,
18-
UserInfo,
1917
ReactionWrapper,
2018
Reaction,
2119
ReactionAction,
2220
ReactionName,
2321
CollectIcon,
2422
LikeIcon,
2523
ReactionUserNum,
26-
Avatar,
27-
UserName,
28-
PublishAt,
2924
Divider,
3025
}from'./styles'
3126

27+
importUserInfofrom'./UserInfo'
28+
importCompanyInfofrom'./CompanyInfo'
29+
3230
import{makeDebugger,TYPE,THREAD}from'../../utils'
3331
/* eslint-disable no-unused-vars */
3432
constdebug=makeDebugger('c:ArticleHeader:index')
3533
/* eslint-enable no-unused-vars */
3634

3735
constArticleHeader=({
3836
thread,
37+
author,
38+
company,
3939
data,
4040
onReaction,
4141
showFavorite,
4242
showStar,
43-
})=>(
44-
<Wrapper>
45-
<UserInfo>
46-
<Avatarsrc={data.author.avatar}alt="user_avatar"/>
47-
<div>
48-
<UserName>{data.author.nickname}</UserName>
49-
<PublishAt>
50-
发表于:<TimeAgodatetime={data.insertedAt}locale="zh_CN"/>
51-
</PublishAt>
52-
</div>
53-
</UserInfo>
54-
<ReactionWrapper>
55-
<Maybetext={showFavorite}>
56-
<Reaction>
57-
<ReactionAction
58-
onClick={onReaction.bind(
59-
this,
60-
thread,
61-
TYPE.FAVORITE,
62-
data.viewerHasFavorited,
63-
data
64-
)}
65-
>
66-
<CollectIconsrc={`${ICON_CMD}/uncollect.svg`}/>
67-
<ReactionName>
68-
{data.viewerHasFavorited ?(
69-
<span>已收藏</span>
70-
) :(
71-
<span>收藏</span>
43+
})=>{
44+
return(
45+
<Wrapper>
46+
{author&&!company ?(
47+
<UserInfoauthor={author}insertedAt={data.insertedAt}/>
48+
) :null}
49+
{company ?(
50+
<CompanyInfo
51+
company={company}
52+
insertedAt={data.insertedAt}
53+
author={author}
54+
/>
55+
) :null}
56+
<ReactionWrapper>
57+
<Maybetext={showFavorite}>
58+
<Reaction>
59+
<ReactionAction
60+
onClick={onReaction.bind(
61+
this,
62+
thread,
63+
TYPE.FAVORITE,
64+
data.viewerHasFavorited,
65+
data
7266
)}
73-
</ReactionName>
74-
</ReactionAction>
75-
<ReactionUserNum>{data.favoritedCount}</ReactionUserNum>
76-
<Divider/>
77-
</Reaction>
78-
</Maybe>
67+
>
68+
<CollectIconsrc={`${ICON_CMD}/uncollect.svg`}/>
69+
<ReactionName>
70+
{data.viewerHasFavorited ?(
71+
<span>已收藏</span>
72+
) :(
73+
<span>收藏</span>
74+
)}
75+
</ReactionName>
76+
</ReactionAction>
77+
<ReactionUserNum>{data.favoritedCount}</ReactionUserNum>
78+
<Divider/>
79+
</Reaction>
80+
</Maybe>
81+
82+
<Maybetest={showStar}>
83+
<Reaction>
84+
<ReactionAction
85+
onClick={onReaction.bind(
86+
this,
87+
thread,
88+
TYPE.STAR,
89+
data.viewerHasStarred,
90+
data
91+
)}
92+
>
93+
<LikeIconsrc={`${ICON_CMD}/like.svg`}/>
94+
<ReactionName>赞</ReactionName>
95+
</ReactionAction>
96+
<ReactionUserNum>{data.starredCount}</ReactionUserNum>
97+
<Divider/>
98+
</Reaction>
99+
</Maybe>
79100

80-
<Maybetest={showStar}>
81101
<Reaction>
82-
<ReactionAction
83-
onClick={onReaction.bind(
84-
this,
85-
thread,
86-
TYPE.STAR,
87-
data.viewerHasStarred,
88-
data
89-
)}
90-
>
91-
<LikeIconsrc={`${ICON_CMD}/like.svg`}/>
92-
<ReactionName>赞</ReactionName>
102+
<ReactionAction>
103+
<ReactionName>浏览:</ReactionName>
93104
</ReactionAction>
94-
<ReactionUserNum>{data.starredCount}</ReactionUserNum>
95-
<Divider/>
105+
<ReactionUserNum>{data.views}</ReactionUserNum>
96106
</Reaction>
97-
</Maybe>
98-
99-
<Reaction>
100-
<ReactionAction>
101-
<ReactionName>浏览:</ReactionName>
102-
</ReactionAction>
103-
<ReactionUserNum>{data.views}</ReactionUserNum>
104-
</Reaction>
105-
</ReactionWrapper>
106-
</Wrapper>
107-
)
107+
</ReactionWrapper>
108+
</Wrapper>
109+
)
110+
}
108111

109112
ArticleHeader.propTypes={
110113
author:PropTypes.shape({
111114
nickname:PropTypes.string,
112115
avatar:PropTypes.string,
113-
}).isRequired,
114-
116+
}),
117+
company:PropTypes.shape({
118+
title:PropTypes.string,
119+
logo:PropTypes.string,
120+
}),
115121
thread:PropTypes.oneOf(R.values(THREAD)),
116122

117123
data:PropTypes.shape({
@@ -138,6 +144,8 @@ ArticleHeader.defaultProps = {
138144
onReaction:debug,
139145
showFavorite:true,
140146
showStar:true,
147+
author:null,
148+
company:null,
141149
}
142150

143151
exportdefaultArticleHeader
Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
importstyledfrom'styled-components'
2+
3+
importImgfrom'../../Img'
4+
import{theme}from'../../../utils'
5+
6+
exportconstWrapper=styled.div`
7+
flex-grow: 1;
8+
display: flex;
9+
align-items: center;
10+
margin-left: 4px;
11+
`
12+
exportconstTitle=styled.div`
13+
font-size: 1rem;
14+
color:${theme('thread.articleTitle')};
15+
margin-top: 2px;
16+
`
17+
exportconstUsername=styled.div`
18+
font-size: 0.9rem;
19+
`
20+
exportconstPublishAt=styled.div`
21+
display: flex;
22+
align-items: center;
23+
font-size: 0.8rem;
24+
color:${theme('thread.articleDigest')};
25+
`
26+
exportconstLogo=styled(Img)`
27+
border-radius: 3px;
28+
width: 44px;
29+
height: 44px;
30+
margin-right: 10px;
31+
`

‎components/ArticleHeader/styles/index.js‎

Lines changed: 2 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,30 +5,12 @@ import { theme } from '../../../utils'
55

66
exportconstWrapper=styled.div`
77
display: flex;
8-
padding-left: 30px;
8+
align-items: center;
9+
padding-left: 35px;
910
padding-right: 30px;
1011
padding-top: 10px;
1112
padding-bottom: 6px;
1213
`
13-
exportconstUserInfo=styled.div`
14-
flex-grow: 1;
15-
display: flex;
16-
`
17-
exportconstUserName=styled.div`
18-
margin-bottom: 2px;
19-
font-size: 1.2em;
20-
color:${theme('banner.title')};
21-
`
22-
exportconstPublishAt=styled.div`
23-
font-size: 0.9em;
24-
color:${theme('banner.desc')};
25-
`
26-
exportconstAvatar=styled.img`
27-
border-radius: 100%;
28-
width: 40px;
29-
height: 40px;
30-
margin-right: 10px;
31-
`
3214
exportconstReactionWrapper=styled.div`
3315
display: flex;
3416
align-items: center;
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
importstyledfrom'styled-components'
2+
3+
importImgfrom'../../Img'
4+
import{theme}from'../../../utils'
5+
6+
exportconstWrapper=styled.div`
7+
flex-grow: 1;
8+
display: flex;
9+
align-items: center;
10+
`
11+
exportconstUserName=styled.div`
12+
font-size: 0.9rem;
13+
color:${theme('thread.articleTitle')};
14+
`
15+
exportconstPublishAt=styled.div`
16+
font-size: 0.8rem;
17+
color:${theme('thread.articleDigest')};
18+
`
19+
exportconstAvatar=styled(Img)`
20+
border-radius: 100%;
21+
width: 35px;
22+
height: 35px;
23+
margin-right: 10px;
24+
`

‎containers/ArticleViwer/Body.js‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎containers/ArticleViwer/BodyFooter.js‎

Lines changed: 0 additions & 37 deletions
This file was deleted.

0 commit comments

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