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.

Commit68bf38b

Browse files
committed
refactor(ArticleViewer): extract Header
1 parent4f5030c commit68bf38b

File tree

7 files changed

+184
-125
lines changed

7 files changed

+184
-125
lines changed

‎components/ArticleHeader/index.js‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
/*
2+
*
3+
* ArticleHeader
4+
*
5+
*/
6+
7+
importReactfrom'react'
8+
importPropTypesfrom'prop-types'
9+
importRfrom'ramda'
10+
importTimeAgofrom'timeago-react'
11+
12+
import{ICON_CMD}from'../../config'
13+
14+
import{
15+
Wrapper,
16+
UserInfo,
17+
ReactionWrapper,
18+
Reaction,
19+
ReactionAction,
20+
ReactionName,
21+
CollectIcon,
22+
LikeIcon,
23+
ReactionUserNum,
24+
Avatar,
25+
UserName,
26+
PublishAt,
27+
Divider,
28+
}from'./styles'
29+
30+
import{makeDebugger,TYPE,THREAD}from'../../utils'
31+
/* eslint-disable no-unused-vars */
32+
constdebug=makeDebugger('c:ArticleHeader:index')
33+
/* eslint-enable no-unused-vars */
34+
35+
constArticleHeader=({ thread, data, onReaction})=>(
36+
<Wrapper>
37+
<UserInfo>
38+
<Avatarsrc={data.author.avatar}alt="user_avatar"/>
39+
<div>
40+
<UserName>{data.author.nickname}</UserName>
41+
<PublishAt>
42+
发表于:<TimeAgodatetime={data.insertedAt}locale="zh_CN"/>
43+
</PublishAt>
44+
</div>
45+
</UserInfo>
46+
<ReactionWrapper>
47+
<Reaction>
48+
<ReactionAction
49+
onClick={onReaction.bind(
50+
this,
51+
thread,
52+
TYPE.FAVORITE,
53+
data.viewerHasFavorited,
54+
data
55+
)}
56+
>
57+
<CollectIconsrc={`${ICON_CMD}/uncollect.svg`}/>
58+
<ReactionName>
59+
{data.viewerHasFavorited ?<span>已收藏</span> :<span>收藏</span>}
60+
</ReactionName>
61+
</ReactionAction>
62+
<ReactionUserNum>{data.favoritedCount}</ReactionUserNum>
63+
<Divider/>
64+
</Reaction>
65+
<Reaction>
66+
<ReactionAction
67+
onClick={onReaction.bind(
68+
this,
69+
thread,
70+
TYPE.STAR,
71+
data.viewerHasStarred,
72+
data
73+
)}
74+
>
75+
<LikeIconsrc={`${ICON_CMD}/like.svg`}/>
76+
<ReactionName>赞</ReactionName>
77+
</ReactionAction>
78+
<ReactionUserNum>{data.starredCount}</ReactionUserNum>
79+
<Divider/>
80+
</Reaction>
81+
<Reaction>
82+
<ReactionAction>
83+
<ReactionName>浏览:</ReactionName>
84+
</ReactionAction>
85+
<ReactionUserNum>{data.views}</ReactionUserNum>
86+
</Reaction>
87+
</ReactionWrapper>
88+
</Wrapper>
89+
)
90+
91+
ArticleHeader.propTypes={
92+
author:PropTypes.shape({
93+
nickname:PropTypes.string,
94+
avatar:PropTypes.string,
95+
}).isRequired,
96+
97+
thread:PropTypes.oneOf(R.values(THREAD)),
98+
99+
data:PropTypes.shape({
100+
// star
101+
starredCount:PropTypes.number,
102+
viewerHasStarred:PropTypes.bool,
103+
// favorite
104+
favoritedCount:PropTypes.number,
105+
viewerHasFavorited:PropTypes.bool,
106+
// published at
107+
insertedAt:PropTypes.string,
108+
// views
109+
views:PropTypes.number,
110+
// handler
111+
}).isRequired,
112+
onReaction:PropTypes.func,
113+
}
114+
115+
ArticleHeader.defaultProps={
116+
thread:THREAD.POST,
117+
onReaction:debug,
118+
}
119+
120+
exportdefaultArticleHeader
Lines changed: 33 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
importstyledfrom'styled-components'
22

3-
importImgfrom'../../../components/Img'
3+
importImgfrom'../../Img'
44
import{theme}from'../../../utils'
55

66
exportconstWrapper=styled.div`
@@ -10,19 +10,10 @@ export const Wrapper = styled.div`
1010
padding-top: 10px;
1111
padding-bottom: 6px;
1212
`
13-
exportconstDivider=styled.span`
14-
margin: 0 8px;
15-
display: inline-block;
16-
height: 0.9em;
17-
align-self: center;
18-
border-right: 1px solid;
19-
border-right-color:${theme('preview.divider')};
20-
`
2113
exportconstUserInfo=styled.div`
2214
flex-grow: 1;
2315
display: flex;
2416
`
25-
2617
exportconstUserName=styled.div`
2718
margin-bottom: 2px;
2819
font-size: 1.2em;
@@ -32,55 +23,67 @@ export const PublishAt = styled.div`
3223
font-size: 0.9em;
3324
color:${theme('banner.desc')};
3425
`
35-
3626
exportconstAvatar=styled.img`
3727
border-radius: 100%;
3828
width: 40px;
3929
height: 40px;
4030
margin-right: 10px;
4131
`
42-
4332
exportconstReactionWrapper=styled.div`
4433
display: flex;
34+
align-items: center;
35+
margin-right: 5px;
36+
`
37+
exportconstDivider=styled.div`
38+
border-right: 1px solid;
39+
border-color:${theme('banner.desc')};
40+
height: 15px;
41+
margin-left: 8px;
42+
opacity: 0.8;
43+
margin-right: 6px;
44+
`
45+
exportconstReaction=styled.div`
46+
align-items: center;
47+
display: flex;
4548
`
46-
4749
exportconstReactionAction=styled.div`
4850
display: flex;
49-
padding: 0 3px;
51+
align-items: center;
52+
padding: 2px 3px;
5053
&:hover {
5154
cursor: pointer;
5255
font-weight: bold;
5356
background:${theme('article.reactionHoverBg')};
5457
border-radius: 6px;
5558
}
5659
`
57-
5860
exportconstReactionName=styled.div`
59-
align-self: center;
6061
color:${theme('article.reactionTitle')};
61-
font-size: 0.9em;
62-
margin-left: 1px;
62+
font-size: 0.9rem;
6363
`
6464
exportconstReactionUserNum=styled.div`
65-
align-self: center;
6665
color:${theme('article.reactionTitle')};
67-
font-size: 0.9em;
66+
font-size: 1rem;
67+
margin-left: 2px;
6868
6969
&:hover {
7070
cursor: pointer;
7171
text-decoration: underline;
72+
color:${theme('contrastFg')};
7273
}
7374
`
74-
75-
exportconstReactionIcon=styled(Img)`
76-
margin-top: 4px;
75+
constReactionIcon=styled(Img)`
7776
fill:${theme('article.reactionTitle')};
78-
width:${({ width})=>width||'1.5em'};
79-
height:${({ height})=>height||'1.5em'};
77+
width: 24px;
78+
height: 24px;
79+
display: block;
80+
margin-right: 2px;
8081
`
81-
82-
exportconstReaction=styled.div`
83-
align-self: center;
84-
font-size: 1.2em;
85-
display: flex;
82+
exportconstCollectIcon=styled(ReactionIcon)`
83+
margin-top: -2px;
84+
`
85+
exportconstLikeIcon=styled(ReactionIcon)`
86+
margin-top: -5px;
87+
width: 22px;
88+
height: 22px;
8689
`
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 ArticleHeader from '../index'
5+
6+
describe('TODO <ArticleHeader />',()=>{
7+
it('Expect to have unit tests specified',()=>{
8+
expect(true).toEqual(true)
9+
})
10+
})

‎components/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export { default as RepoItem } from './RepoItem'
1616
export{defaultasVideoItem}from'./VideoItem'
1717

1818
// Utils component
19+
export{defaultasArticleHeader}from'./ArticleHeader'
1920
export{defaultasMaybe}from'./Maybe'
2021
export{defaultasDotDivider}from'./DotDivider'
2122
export{defaultasPublishLabel}from'./PublishLabel'

‎containers/ArticleViwer/Header.js‎

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

‎containers/ArticleViwer/JobViewer.js‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
11
importReactfrom'react'
22
importCommentsfrom'../Comments'
3-
importHeaderfrom'./Header'
4-
importBodyfrom'./Body'
3+
4+
import{ArticleHeader}from'../../components'
55

66
import{CommentsWrapper}from'./styles/body'
7+
importBodyfrom'./Body'
8+
79
import{THREAD}from'../../utils'
10+
import*aslogicfrom'./logic'
811

912
constJobViewer=({ data, loading, accountInfo})=>(
1013
<React.Fragment>
11-
<Headerdata={data}/>
14+
<ArticleHeader
15+
data={data}
16+
author={data.author}
17+
onReaction={logic.onReaction}
18+
THREAD={THREAD.JOB}
19+
/>
1220
<Body
1321
data={data}
1422
loading={loading}

‎containers/ArticleViwer/PostViewer.js‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
11
importReactfrom'react'
22
importCommentsfrom'../Comments'
3-
importHeaderfrom'./Header'
3+
//import Header from './Header'
44
importBodyfrom'./Body'
55

6+
import{ArticleHeader}from'../../components'
67
import{CommentsWrapper}from'./styles/body'
78

89
import{THREAD}from'../../utils'
10+
import*aslogicfrom'./logic'
911

10-
constPostViewer=({ data, loading, accountInfo})=>(
12+
// <Header data={data} />
13+
constPostViewer=({ data, loading})=>(
1114
<React.Fragment>
12-
<Headerdata={data}/>
13-
<Body
15+
<ArticleHeader
1416
data={data}
15-
loading={loading}
16-
accountInfo={accountInfo}
17-
thread={THREAD.POST}
17+
author={data.author}
18+
onReaction={logic.onReaction}
1819
/>
20+
<Bodydata={data}loading={loading}thread={THREAD.POST}/>
1921
<CommentsWrapper>
2022
<Comments/>
2123
</CommentsWrapper>

0 commit comments

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