Skip to content
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit ba2d5b4

Browse files
mydearxymmydearxym
committed
Merge branch 'reaction-header' into dev
2 parents fda666b + c9eca37 commit ba2d5b4

File tree

28 files changed

+618
-300
lines changed

28 files changed

+618
-300
lines changed

‎components/ArticleHeader/CompanyInfo.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React from 'react'
2+
import TimeAgo from 'timeago-react'
3+
4+
import { ICON_CMD } from '../../config'
5+
6+
import { DotDivider } from '..'
7+
8+
import {
9+
Wrapper,
10+
Logo,
11+
Title,
12+
PublishAt,
13+
Username,
14+
HomtPage,
15+
HomeIcon,
16+
HomepageLink,
17+
} from './styles/company_info'
18+
19+
import { cutFrom } from '../../utils'
20+
21+
const CompanyInfo = ({ company, insertedAt, author }) => (
22+
<Wrapper>
23+
<Logo src={company.logo} alt="user_avatar" />
24+
<div>
25+
<Title>{cutFrom(company.title, 14)}</Title>
26+
<HomtPage>
27+
<HomeIcon src={`${ICON_CMD}/home.svg`} />
28+
<HomepageLink
29+
href="https://github.com"
30+
rel="noopener noreferrer"
31+
target="_blank"
32+
>
33+
https://github.com/mydearxym
34+
</HomepageLink>
35+
</HomtPage>
36+
<PublishAt>
37+
<Username>{author.nickname}</Username>
38+
<DotDivider />
39+
发布于: <TimeAgo datetime={insertedAt} locale="zh_CN" />
40+
</PublishAt>
41+
</div>
42+
</Wrapper>
43+
)
44+
45+
export default CompanyInfo

‎components/ArticleHeader/UserInfo.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react'
2+
import TimeAgo from 'timeago-react'
3+
4+
import { Wrapper, Avatar, UserName, PublishAt } from './styles/user_info'
5+
6+
const UserInfo = ({ author, insertedAt }) => (
7+
<Wrapper>
8+
<Avatar src={author.avatar} alt="user_avatar" />
9+
<div>
10+
<UserName>{author.nickname}</UserName>
11+
<PublishAt>
12+
发布于: <TimeAgo datetime={insertedAt} locale="zh_CN" />
13+
</PublishAt>
14+
</div>
15+
</Wrapper>
16+
)
17+
18+
export default UserInfo

‎components/ArticleHeader/index.js

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
/*
2+
*
3+
* ArticleHeader
4+
*
5+
*/
6+
7+
import React from 'react'
8+
import PropTypes from 'prop-types'
9+
import R from 'ramda'
10+
11+
import { ICON_CMD } from '../../config'
12+
13+
import Maybe from '../Maybe'
14+
15+
import {
16+
Wrapper,
17+
ReactionWrapper,
18+
Reaction,
19+
ReactionAction,
20+
ReactionName,
21+
CollectIcon,
22+
LikeIcon,
23+
ReactionUserNum,
24+
Divider,
25+
} from './styles'
26+
27+
import UserInfo from './UserInfo'
28+
import CompanyInfo from './CompanyInfo'
29+
30+
import { makeDebugger, TYPE, THREAD } from '../../utils'
31+
/* eslint-disable no-unused-vars */
32+
const debug = makeDebugger('c:ArticleHeader:index')
33+
/* eslint-enable no-unused-vars */
34+
35+
const ArticleHeader = ({
36+
thread,
37+
author,
38+
company,
39+
data,
40+
onReaction,
41+
showFavorite,
42+
showStar,
43+
}) => {
44+
return (
45+
<Wrapper>
46+
{author && !company ? (
47+
<UserInfo author={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+
<Maybe text={showFavorite}>
58+
<Reaction>
59+
<ReactionAction
60+
onClick={onReaction.bind(
61+
this,
62+
thread,
63+
TYPE.FAVORITE,
64+
data.viewerHasFavorited,
65+
data
66+
)}
67+
>
68+
<CollectIcon src={`${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+
<Maybe test={showStar}>
83+
<Reaction>
84+
<ReactionAction
85+
onClick={onReaction.bind(
86+
this,
87+
thread,
88+
TYPE.STAR,
89+
data.viewerHasStarred,
90+
data
91+
)}
92+
>
93+
<LikeIcon src={`${ICON_CMD}/like.svg`} />
94+
<ReactionName>赞</ReactionName>
95+
</ReactionAction>
96+
<ReactionUserNum>{data.starredCount}</ReactionUserNum>
97+
<Divider />
98+
</Reaction>
99+
</Maybe>
100+
101+
<Reaction>
102+
<ReactionAction>
103+
<ReactionName>浏览:</ReactionName>
104+
</ReactionAction>
105+
<ReactionUserNum>{data.views}</ReactionUserNum>
106+
</Reaction>
107+
</ReactionWrapper>
108+
</Wrapper>
109+
)
110+
}
111+
112+
ArticleHeader.propTypes = {
113+
author: PropTypes.shape({
114+
nickname: PropTypes.string,
115+
avatar: PropTypes.string,
116+
}),
117+
company: PropTypes.shape({
118+
title: PropTypes.string,
119+
logo: PropTypes.string,
120+
}),
121+
thread: PropTypes.oneOf(R.values(THREAD)),
122+
123+
data: PropTypes.shape({
124+
// star
125+
starredCount: PropTypes.number,
126+
viewerHasStarred: PropTypes.bool,
127+
// favorite
128+
favoritedCount: PropTypes.number,
129+
viewerHasFavorited: PropTypes.bool,
130+
// published at
131+
insertedAt: PropTypes.string,
132+
// views
133+
views: PropTypes.number,
134+
// handler
135+
}).isRequired,
136+
onReaction: PropTypes.func,
137+
// ui
138+
showFavorite: PropTypes.bool,
139+
showStar: PropTypes.bool,
140+
}
141+
142+
ArticleHeader.defaultProps = {
143+
thread: THREAD.POST,
144+
onReaction: debug,
145+
showFavorite: true,
146+
showStar: true,
147+
author: null,
148+
company: null,
149+
}
150+
151+
export default ArticleHeader

‎components/ArticleHeader/styles/company_info.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import styled from 'styled-components'
2+
3+
import Img from '../../Img'
4+
import { theme } from '../../../utils'
5+
6+
export const Wrapper = styled.div`
7+
flex-grow: 1;
8+
display: flex;
9+
align-items: center;
10+
margin-left: 4px;
11+
`
12+
export const Title = styled.div`
13+
font-size: 1rem;
14+
color: ${theme('thread.articleTitle')};
15+
margin-top: 2px;
16+
`
17+
export const HomtPage = styled.div`
18+
display: flex;
19+
align-items: center;
20+
`
21+
export const HomeIcon = styled(Img)`
22+
fill: ${theme('thread.articleDigest')};
23+
width: 15px;
24+
height: 15px;
25+
display: block;
26+
`
27+
export const HomepageLink = styled.a`
28+
color: ${theme('thread.articleDigest')};
29+
margin-left: 3px;
30+
&:hover {
31+
text-decoration: underline;
32+
color: ${theme('thread.articleTitle')};
33+
}
34+
`
35+
export const Username = styled.div`
36+
font-size: 0.9rem;
37+
`
38+
export const PublishAt = styled.div`
39+
display: flex;
40+
align-items: center;
41+
font-size: 0.8rem;
42+
color: ${theme('thread.articleDigest')};
43+
`
44+
export const Logo = styled(Img)`
45+
border-radius: 3px;
46+
width: 64px;
47+
height: 64px;
48+
margin-right: 12px;
49+
`

‎components/ArticleHeader/styles/index.js

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import styled from 'styled-components'
2+
3+
import Img from '../../Img'
4+
import { theme } from '../../../utils'
5+
6+
export const Wrapper = styled.div`
7+
display: flex;
8+
align-items: center;
9+
padding-left: 35px;
10+
padding-right: 30px;
11+
padding-top: 10px;
12+
padding-bottom: 6px;
13+
`
14+
export const ReactionWrapper = styled.div`
15+
display: flex;
16+
align-items: center;
17+
margin-right: 5px;
18+
`
19+
export const Divider = styled.div`
20+
border-right: 1px solid;
21+
border-color: ${theme('banner.desc')};
22+
height: 15px;
23+
margin-left: 8px;
24+
opacity: 0.8;
25+
margin-right: 6px;
26+
`
27+
export const Reaction = styled.div`
28+
align-items: center;
29+
display: flex;
30+
`
31+
export const ReactionAction = styled.div`
32+
display: flex;
33+
align-items: center;
34+
padding: 2px 3px;
35+
&:hover {
36+
cursor: pointer;
37+
font-weight: bold;
38+
background: ${theme('article.reactionHoverBg')};
39+
border-radius: 6px;
40+
}
41+
`
42+
export const ReactionName = styled.div`
43+
color: ${theme('article.reactionTitle')};
44+
font-size: 0.9rem;
45+
`
46+
export const ReactionUserNum = styled.div`
47+
color: ${theme('article.reactionTitle')};
48+
font-size: 1rem;
49+
margin-left: 2px;
50+
51+
&:hover {
52+
cursor: pointer;
53+
text-decoration: underline;
54+
color: ${theme('contrastFg')};
55+
}
56+
`
57+
const ReactionIcon = styled(Img)`
58+
fill: ${theme('article.reactionTitle')};
59+
width: 24px;
60+
height: 24px;
61+
display: block;
62+
margin-right: 2px;
63+
`
64+
export const CollectIcon = styled(ReactionIcon)`
65+
margin-top: -2px;
66+
`
67+
export const LikeIcon = styled(ReactionIcon)`
68+
margin-top: -5px;
69+
width: 22px;
70+
height: 22px;
71+
`

‎components/ArticleHeader/styles/user_info.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import styled from 'styled-components'
2+
3+
import Img from '../../Img'
4+
import { theme } from '../../../utils'
5+
6+
export const Wrapper = styled.div`
7+
flex-grow: 1;
8+
display: flex;
9+
align-items: center;
10+
`
11+
export const UserName = styled.div`
12+
font-size: 0.9rem;
13+
color: ${theme('thread.articleTitle')};
14+
`
15+
export const PublishAt = styled.div`
16+
font-size: 0.8rem;
17+
color: ${theme('thread.articleDigest')};
18+
`
19+
export const Avatar = styled(Img)`
20+
border-radius: 100%;
21+
width: 35px;
22+
height: 35px;
23+
margin-right: 10px;
24+
`

‎components/ArticleHeader/tests/index.test.js

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/MarkDownRender/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ class MarkDownRender extends React.Component {
5454
NOTE: the '---' in normal markdown will break the render process
5555
this is the most mother fucking disgusting bug i ever seen
5656
*/
57-
const safeBody = R.replace(/---(\r\n|\r|\n)/g, '----', body)
57+
const safeBody = R.replace(/---(\r\n|\r|\n)/g, '----', body || '')
5858

5959
return (
6060
<PreviewerContainer>

‎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 { default as VideoItem } from './VideoItem'
1717

1818
// Utils component
19+
export { default as ArticleHeader } from './ArticleHeader'
1920
export { default as Maybe } from './Maybe'
2021
export { default as DotDivider } from './DotDivider'
2122
export { default as PublishLabel } from './PublishLabel'

0 commit comments

Comments
 (0)