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

Commit 79b61e9

Browse files
mydearxymmydearxym
committed
extract Banner Count component
1 parent 4f473f6 commit 79b61e9

File tree

22 files changed

+247
-255
lines changed

22 files changed

+247
-255
lines changed

‎components/BannerCountBrief/index.js

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
/*
2+
*
3+
* BannerCountBrief
4+
*
5+
*/
6+
7+
import React from 'react'
8+
import PropTypes from 'prop-types'
9+
10+
import { makeDebugger, toPercentNum } from '../../utils'
11+
12+
import {
13+
Result,
14+
ResultTop,
15+
ResultBottom,
16+
ResultNumber,
17+
ResultText,
18+
} from './styles'
19+
20+
/* eslint-disable no-unused-vars */
21+
const debug = makeDebugger('c:BannerCountBrief:index')
22+
/* eslint-enable no-unused-vars */
23+
24+
const CountBrief = ({ curCount, totalCount, part, unit }) => {
25+
if (totalCount === curCount) {
26+
return (
27+
<Result>
28+
<ResultBottom>
29+
<ResultText>当前共有{part}</ResultText>
30+
<ResultNumber>{totalCount} </ResultNumber>
31+
<ResultText>{unit}</ResultText>
32+
</ResultBottom>
33+
</Result>
34+
)
35+
} else if (curCount < 0 && totalCount === 0) {
36+
return <Result>正在加载, 请稍后...</Result>
37+
}
38+
return (
39+
<Result>
40+
<ResultTop>
41+
{part}总数为 {totalCount} {unit}
42+
</ResultTop>
43+
<ResultBottom>
44+
<ResultText>符合当前条件的{part}</ResultText>
45+
<ResultNumber>{curCount} </ResultNumber>
46+
<ResultText>
47+
{unit}, 占比 {toPercentNum(curCount, totalCount)}
48+
</ResultText>
49+
</ResultBottom>
50+
</Result>
51+
)
52+
}
53+
54+
const BannerCountBrief = ({ curCount, totalCount, part, unit }) => (
55+
<CountBrief
56+
curCount={curCount}
57+
totalCount={totalCount}
58+
part={part}
59+
unit={unit}
60+
/>
61+
)
62+
63+
BannerCountBrief.propTypes = {
64+
curCount: PropTypes.number.isRequired,
65+
totalCount: PropTypes.number.isRequired,
66+
unit: PropTypes.string,
67+
part: PropTypes.string,
68+
}
69+
70+
BannerCountBrief.defaultProps = {
71+
part: '帖子',
72+
unit: '篇',
73+
}
74+
75+
export default BannerCountBrief

‎components/BannerCountBrief/styles/index.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import styled from 'styled-components'
2+
3+
export const Result = styled.div`
4+
flex-grow: 1;
5+
display: flex;
6+
flex-direction: column;
7+
`
8+
9+
export const ResultTop = styled.div`
10+
margin-bottom: 4px;
11+
`
12+
export const ResultBottom = styled.div`
13+
display: flex;
14+
`
15+
16+
export const ResultNumber = styled.div`
17+
color: #e0e0e3;
18+
font-size: 1.1rem;
19+
margin-left: 10px;
20+
margin-right: 10px;
21+
`
22+
23+
export const ResultText = styled.div`
24+
margin-top: 3px;
25+
`

‎components/BannerCountBrief/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 BannerCountBrief from '../index'
5+
6+
describe('TODO <BannerCountBrief />', () => {
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
@@ -7,6 +7,7 @@ export { default as Popover } from './Popover'
77
export { Space, SpaceGrow } from './BaseStyled'
88

99
// Utils component
10+
export { default as BannerCountBrief } from './BannerCountBrief'
1011
export { default as MarkDownPreviewer } from './MarkDownPreviewer'
1112
export { default as ContentFilter } from './ContentFilter'
1213
export { default as FileUploader } from './FileUploader'

‎containers/Comments/CommentsList.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import TimeAgo from 'timeago-react'
44
import shortid from 'shortid'
55

66
import { ICON_ASSETS } from '../../config'
7-
/* import { fakeUsers, getRandomInt, Global, prettyNum } from '../../utils' */
87
import { Global, prettyNum } from '../../utils'
98

109
import {

‎containers/CommunitiesBanner/CategoryBanner.js

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

‎containers/CommunitiesBanner/EditorsBanner.js

Lines changed: 45 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,10 @@ import React from 'react'
22

33
import { ICON_ASSETS } from '../../config'
44
import * as logic from './logic'
5-
import { Tag, Popover } from '../../components'
5+
import { Tag, Popover, BannerCountBrief } from '../../components'
66

77
import {
88
BannerContentWrapper,
9-
Result,
10-
ResultBottom,
11-
ResultNumber,
12-
ResultText,
139
Operation,
1410
OperationItem,
1511
OperationDivider,
@@ -19,45 +15,50 @@ import {
1915
OperationIconChart,
2016
} from './styles/common_banner'
2117

22-
const EditorsBanner = () => {
23-
return (
24-
<BannerContentWrapper>
25-
<Result>
26-
{/* <ResultTop>帖子总数为 4837 条</ResultTop> */}
27-
<ResultBottom>
28-
<ResultText>共找到</ResultText>
29-
<ResultNumber>xx 个</ResultNumber>
30-
<ResultText>编辑</ResultText>
31-
</ResultBottom>
32-
</Result>
33-
<Operation>
34-
<OperationItem>
35-
<OperationIcon path={`${ICON_ASSETS}/cmd/filter2.svg`} />
36-
<Popover
37-
content={<div>兼容各个页面的 Filter 菜单</div>}
38-
trigger="hover"
39-
>
40-
<OperationTitle>过滤</OperationTitle>
41-
</Popover>
42-
<FilterTags>
43-
<Tag closable>最多xx</Tag>
44-
<Tag closable>最少..</Tag>
45-
</FilterTags>
46-
</OperationItem>
47-
<OperationDivider />
48-
<OperationItem onClick={logic.onAdd}>
49-
<OperationIconChart path={`${ICON_ASSETS}/cmd/plus.svg`} />
50-
添加
51-
</OperationItem>
52-
<OperationDivider />
53-
<OperationItem>
54-
<OperationIcon path={`${ICON_ASSETS}/cmd/chart.svg`} />
55-
{/* <OperationIconChart path={`${ICON_ASSETS}/cmd/list.svg`} /> */}
56-
统计
57-
</OperationItem>
58-
</Operation>
59-
</BannerContentWrapper>
60-
)
18+
class EditorsBanner extends React.Component {
19+
componentWillMount() {
20+
// logic.loadEditors()
21+
}
22+
23+
render() {
24+
const { curCount, totalCount } = this.props
25+
return (
26+
<BannerContentWrapper>
27+
<BannerCountBrief
28+
curCount={curCount}
29+
totalCount={totalCount}
30+
part="编辑"
31+
unit="人"
32+
/>
33+
<Operation>
34+
<OperationItem>
35+
<OperationIcon path={`${ICON_ASSETS}/cmd/filter2.svg`} />
36+
<Popover
37+
content={<div>兼容各个页面的 Filter 菜单</div>}
38+
trigger="hover"
39+
>
40+
<OperationTitle>过滤</OperationTitle>
41+
</Popover>
42+
<FilterTags>
43+
<Tag closable>最多xx</Tag>
44+
<Tag closable>最少..</Tag>
45+
</FilterTags>
46+
</OperationItem>
47+
<OperationDivider />
48+
<OperationItem onClick={logic.onAdd}>
49+
<OperationIconChart path={`${ICON_ASSETS}/cmd/plus.svg`} />
50+
添加
51+
</OperationItem>
52+
<OperationDivider />
53+
<OperationItem>
54+
<OperationIcon path={`${ICON_ASSETS}/cmd/chart.svg`} />
55+
{/* <OperationIconChart path={`${ICON_ASSETS}/cmd/list.svg`} /> */}
56+
统计
57+
</OperationItem>
58+
</Operation>
59+
</BannerContentWrapper>
60+
)
61+
}
6162
}
6263

6364
export default EditorsBanner

‎containers/CommunitiesBanner/IndexBanner.js

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,10 @@ import React from 'react'
22

33
import { ICON_ASSETS } from '../../config'
44
import * as logic from './logic'
5-
import { Tag, Popover } from '../../components'
5+
import { Tag, Popover, BannerCountBrief } from '../../components'
66

77
import {
88
BannerContentWrapper,
9-
Result,
10-
ResultTop,
11-
ResultBottom,
12-
ResultNumber,
13-
ResultText,
149
Operation,
1510
OperationItem,
1611
OperationDivider,
@@ -28,14 +23,12 @@ class IndexBanner extends React.Component {
2823
const { curCount, totalCount } = this.props
2924
return (
3025
<BannerContentWrapper>
31-
<Result>
32-
<ResultTop>社区总数总数为 {totalCount} 个</ResultTop>
33-
<ResultBottom>
34-
<ResultText>社区共</ResultText>
35-
<ResultNumber>{curCount}个</ResultNumber>
36-
<ResultText>项结果符合过滤条件</ResultText>
37-
</ResultBottom>
38-
</Result>
26+
<BannerCountBrief
27+
curCount={curCount}
28+
totalCount={totalCount}
29+
part="社区"
30+
unit="个"
31+
/>
3932
<Operation>
4033
<OperationItem>
4134
<OperationIcon path={`${ICON_ASSETS}/cmd/filter2.svg`} />

‎containers/CommunitiesBanner/PostsBanner.js

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,10 @@ import React from 'react'
22

33
import { ICON_ASSETS } from '../../config'
44
import * as logic from './logic'
5-
import { Tag, Popover } from '../../components'
5+
import { Tag, Popover, BannerCountBrief } from '../../components'
66

77
import {
88
BannerContentWrapper,
9-
Result,
10-
ResultTop,
11-
ResultBottom,
12-
ResultNumber,
13-
ResultText,
149
Operation,
1510
OperationItem,
1611
OperationDivider,
@@ -28,14 +23,7 @@ class PostsBanner extends React.Component {
2823
const { curCount, totalCount } = this.props
2924
return (
3025
<BannerContentWrapper>
31-
<Result>
32-
<ResultTop>帖子总数为 {totalCount} 条</ResultTop>
33-
<ResultBottom>
34-
<ResultText>符合当前条件的帖子</ResultText>
35-
<ResultNumber>{curCount} 个</ResultNumber>
36-
<ResultText>占比 22%</ResultText>
37-
</ResultBottom>
38-
</Result>
26+
<BannerCountBrief curCount={curCount} totalCount={totalCount} />
3927
<Operation>
4028
<OperationItem>
4129
<OperationIcon path={`${ICON_ASSETS}/cmd/filter2.svg`} />

0 commit comments

Comments
 (0)