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

Commit 7ddd30e

Browse files
mydearxymmydearxym
committed
Merge branch 'pages' into dev
2 parents 97bd129 + c4a4aad commit 7ddd30e

File tree

71 files changed

+1352
-440
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

71 files changed

+1352
-440
lines changed

‎containers/PostBanner/ReactionNumbers.js renamed to ‎components/ContentBanner/ReactionNumbers.js

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
NumberItem,
99
} from './styles/reaction_numbers'
1010

11-
import { prettyNum } from '../../utils'
11+
import { prettyNum, numberWithCommas } from '../../utils'
1212

1313
const ReactionNumbers = ({ data: { views, favoritedCount, starredCount } }) => (
1414
<NumbersInfo>
@@ -17,15 +17,21 @@ const ReactionNumbers = ({ data: { views, favoritedCount, starredCount } }) => (
1717
<NumberItem dead>{prettyNum(views)}</NumberItem>
1818
</NumberSection>
1919
<NumberDivider />
20-
<NumberSection>
21-
<NumberTitle>喜欢</NumberTitle>
22-
<NumberItem>{prettyNum(starredCount)}</NumberItem>
23-
</NumberSection>
24-
<NumberDivider />
25-
<NumberSection>
26-
<NumberTitle>收藏</NumberTitle>
27-
<NumberItem>{prettyNum(favoritedCount)}</NumberItem>
28-
</NumberSection>
20+
{starredCount >= 0 ? (
21+
<React.Fragment>
22+
<NumberSection>
23+
<NumberTitle>喜欢</NumberTitle>
24+
<NumberItem>{numberWithCommas(starredCount)}</NumberItem>
25+
</NumberSection>
26+
<NumberDivider />
27+
</React.Fragment>
28+
) : null}
29+
{favoritedCount >= 0 ? (
30+
<NumberSection>
31+
<NumberTitle>收藏</NumberTitle>
32+
<NumberItem>{numberWithCommas(favoritedCount)}</NumberItem>
33+
</NumberSection>
34+
) : null}
2935
{/*
3036
<NumberDivider />
3137
<NumberSection>

‎components/ContentBanner/index.js

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
/*
2+
*
3+
* ContentBanner
4+
*
5+
*/
6+
7+
import React from 'react'
8+
import PropTypes from 'prop-types'
9+
import R from 'ramda'
10+
import TimeAgo from 'timeago-react'
11+
12+
import DotDivider from '../DotDivider'
13+
14+
import {
15+
BannerContainer,
16+
BannerContentWrapper,
17+
PostBrief,
18+
Title,
19+
Desc,
20+
MarkTag,
21+
} from './styles'
22+
23+
import ReactionNumbers from './ReactionNumbers'
24+
25+
import { makeDebugger } from '../../utils'
26+
27+
/* eslint-disable no-unused-vars */
28+
const debug = makeDebugger('c:ContentBanner:index')
29+
/* eslint-enable no-unused-vars */
30+
31+
const ContentBanner = ({ data }) => (
32+
<BannerContainer>
33+
{R.isNil(data.id) ? null : (
34+
<BannerContentWrapper>
35+
<PostBrief>
36+
<Title>{data.title}</Title>
37+
<Desc>
38+
<MarkTag>精华帖</MarkTag>
39+
<TimeAgo datetime={data.insertedAt} locale="zh_CN" />
40+
<DotDivider />
41+
字数: {data.length}
42+
</Desc>
43+
</PostBrief>
44+
<ReactionNumbers data={data} />
45+
</BannerContentWrapper>
46+
)}
47+
</BannerContainer>
48+
)
49+
50+
ContentBanner.propTypes = {
51+
data: PropTypes.shape({
52+
id: PropTypes.string,
53+
title: PropTypes.string,
54+
insertedAt: PropTypes.string,
55+
updatedAt: PropTypes.string,
56+
views: PropTypes.number,
57+
favoritedCount: PropTypes.number,
58+
starredCount: PropTypes.number,
59+
viewerHasFavorited: PropTypes.bool,
60+
viewerHasStarred: PropTypes.bool,
61+
}),
62+
}
63+
64+
ContentBanner.defaultProps = {
65+
data: {
66+
id: '',
67+
title: '',
68+
views: 0,
69+
favoritedCount: -1,
70+
starredCount: -1,
71+
viewerHasFavorited: false,
72+
viewerHasStarred: false,
73+
},
74+
}
75+
76+
export default ContentBanner

‎components/ContentBanner/styles/index.js

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import styled from 'styled-components'
2+
3+
import { theme } from '../../../utils'
4+
5+
export const BaseBanner = styled.nav`
6+
position: relative;
7+
min-height: 140px;
8+
border-bottom: 1px solid tomato;
9+
display: flex;
10+
flex-direction: column;
11+
justify-content: center;
12+
background: ${theme('banner.bg')};
13+
border-bottom: ${theme('banner.spliter')};
14+
@media (max-height: 800px) {
15+
min-height: 130px;
16+
}
17+
`
18+
export const BaseBannerContent = styled.div`
19+
display: flex;
20+
margin-left: 8%;
21+
margin-right: 8%;
22+
`
23+
export const BannerContainer = styled(BaseBanner)`
24+
height: 100px;
25+
min-height: 100px;
26+
`
27+
export const BannerContentWrapper = styled(BaseBannerContent)`
28+
display: flex;
29+
`
30+
export const PostBrief = styled.div`
31+
width: 60%;
32+
flex-grow: 1;
33+
display: flex;
34+
flex-direction: column;
35+
`
36+
37+
export const Title = styled.div`
38+
font-size: 1.6em;
39+
color: ${theme('thread.articleTitle')};
40+
width: 100%;
41+
white-space: nowrap;
42+
overflow: hidden;
43+
text-overflow: ellipsis;
44+
`
45+
export const Desc = styled.div`
46+
display: flex;
47+
align-items: center;
48+
margin-top: 5px;
49+
display: flex;
50+
font-size: 0.9rem;
51+
color: ${theme('thread.articleDigest')};
52+
`
53+
export const Avatar = styled.img`
54+
width: 25px;
55+
height: 25px;
56+
border-radius: 100%;
57+
margin-right: 5px;
58+
`
59+
export const MarkTag = styled.div`
60+
font-size: 0.8em;
61+
padding: 1px 8px;
62+
border-radius: 3px;
63+
border: 1px solid;
64+
border-color: tomato;
65+
color: tomato;
66+
margin-right: 8px;
67+
`

‎containers/PostBanner/styles/reaction_numbers.js renamed to ‎components/ContentBanner/styles/reaction_numbers.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ export const NumbersWrapper = styled.div`
77
text-align: center;
88
margin-top: -2.1rem;
99
`
10-
1110
export const NumbersInfo = styled(NumbersWrapper)`
1211
margin-top: 0;
1312
`

‎components/ContentBanner/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 ContentBanner from '../index'
5+
6+
describe('TODO <ContentBanner />', () => {
7+
it('Expect to have unit tests specified', () => {
8+
expect(true).toEqual(true)
9+
})
10+
})

‎components/ContentSourceCard/TagList.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react'
2+
import R from 'ramda'
3+
4+
import { Wrapper, TagDot, TagTitle, NomoreDesc } from './styles/tag_list'
5+
6+
import { uid } from '../../utils'
7+
8+
const TagList = ({ items }) => {
9+
if (R.isEmpty(items)) return <NomoreDesc>无标签</NomoreDesc>
10+
11+
return (
12+
<React.Fragment>
13+
{items.map(t => (
14+
<Wrapper key={uid.gen()}>
15+
<TagDot color={t.color} />
16+
<TagTitle>{t.title}</TagTitle>
17+
</Wrapper>
18+
))}
19+
</React.Fragment>
20+
)
21+
}
22+
23+
export default TagList

‎components/ContentSourceCard/index.js

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
/*
2+
*
3+
* ContentSourceCard
4+
*
5+
*/
6+
7+
import React from 'react'
8+
import PropTypes from 'prop-types'
9+
10+
import CommunityList from '../CommunityList'
11+
12+
import { Wrapper, Title, Desc, NomoreDesc } from './styles'
13+
14+
import TagList from './TagList'
15+
16+
import { makeDebugger } from '../../utils'
17+
18+
/* eslint-disable no-unused-vars */
19+
const debug = makeDebugger('c:ContentSourceCard:index')
20+
/* eslint-enable no-unused-vars */
21+
22+
const ContentSourceCard = ({ data }) => (
23+
<Wrapper>
24+
<Title>所属社区</Title>
25+
<Desc>
26+
<CommunityList
27+
items={data.communities}
28+
emptyHint={<NomoreDesc>不属于任何社区</NomoreDesc>}
29+
/>
30+
</Desc>
31+
<Title>标签</Title>
32+
33+
<Desc column noBottom>
34+
<TagList items={data.tags} />
35+
</Desc>
36+
</Wrapper>
37+
)
38+
39+
ContentSourceCard.propTypes = {
40+
data: PropTypes.shape({
41+
communities: PropTypes.arrayOf(
42+
PropTypes.shape({
43+
id: PropTypes.string,
44+
title: PropTypes.string,
45+
logo: PropTypes.string,
46+
raw: PropTypes.string,
47+
})
48+
),
49+
tags: PropTypes.arrayOf(
50+
PropTypes.shape({
51+
id: PropTypes.string,
52+
title: PropTypes.string,
53+
color: PropTypes.string,
54+
raw: PropTypes.string,
55+
})
56+
),
57+
}),
58+
}
59+
60+
ContentSourceCard.defaultProps = {
61+
data: {
62+
communities: [],
63+
tags: [],
64+
},
65+
}
66+
67+
export default ContentSourceCard

‎containers/PostContent/styles/source_card.js renamed to ‎components/ContentSourceCard/styles/index.js

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -31,19 +31,3 @@ export const NomoreDesc = styled.div`
3131
color: ${theme('banner.desc')};
3232
font-style: italic;
3333
`
34-
35-
export const TagWrapper = styled.div`
36-
display: flex;
37-
margin-bottom: 12px;
38-
margin-left: 2px;
39-
`
40-
export const TagDot = styled.div`
41-
width: 10px;
42-
height: 10px;
43-
background: tomato;
44-
border-radius: 50%;
45-
margin-right: 5px;
46-
`
47-
export const TagTitle = styled.div`
48-
margin-top: -5px;
49-
`

‎components/ContentSourceCard/styles/tag_list.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 { theme } from '../../../utils'
4+
5+
export const Wrapper = styled.div`
6+
display: flex;
7+
margin-bottom: 12px;
8+
margin-left: 2px;
9+
`
10+
export const TagDot = styled.div`
11+
width: 10px;
12+
height: 10px;
13+
background: tomato;
14+
border-radius: 50%;
15+
margin-right: 5px;
16+
`
17+
export const TagTitle = styled.div`
18+
margin-top: -5px;
19+
`
20+
21+
export const NomoreDesc = styled.div`
22+
color: ${theme('banner.desc')};
23+
font-style: italic;
24+
`

‎components/ContentSourceCard/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 ContentSourceCard from '../index'
5+
6+
describe('TODO <ContentSourceCard />', () => {
7+
it('Expect to have unit tests specified', () => {
8+
expect(true).toEqual(true)
9+
})
10+
})

0 commit comments

Comments
 (0)