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

Commit d334e35

Browse files
mydearxymmydearxym
committed
refactor(table): add tags table
1 parent 8fbac99 commit d334e35

File tree

4 files changed

+199
-127
lines changed

4 files changed

+199
-127
lines changed

‎components/TagsTable/index.js‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
/*
2+
*
3+
* TagsTable
4+
*
5+
*/
6+
7+
import React from 'react'
8+
import PropTypes from 'prop-types'
9+
import { Table, Button } from 'antd'
10+
11+
import Pagi from '../Pagi'
12+
import { TableLoading } from '../LoadingEffects'
13+
import { Space } from '../BaseStyled'
14+
import ColorCell from '../ColorCell'
15+
import CommunityCell from '../CommunityCell'
16+
import TimeStampCell from '../TimeStampCell'
17+
18+
import { OperationWrapper } from './styles'
19+
20+
import { makeDebugger, Trans } from '../../utils'
21+
22+
/* eslint-disable no-unused-vars */
23+
const debug = makeDebugger('c:TagsTable:index')
24+
/* eslint-enable no-unused-vars */
25+
26+
class TagsTable extends React.PureComponent {
27+
columns() {
28+
const { onEdit, onDelete } = this.props
29+
30+
return [
31+
{
32+
title: 'id',
33+
dataIndex: 'id',
34+
align: 'center',
35+
width: 80,
36+
fixed: 'left',
37+
},
38+
{
39+
title: '标题',
40+
width: 120,
41+
dataIndex: 'title',
42+
align: 'left',
43+
render: text => (
44+
<div>
45+
{Trans(text)}({text})
46+
</div>
47+
),
48+
},
49+
{
50+
title: '颜色',
51+
width: 60,
52+
dataIndex: 'color',
53+
align: 'center',
54+
render: text => <ColorCell color={text} />,
55+
},
56+
{
57+
title: '社区',
58+
width: 200,
59+
dataIndex: 'community',
60+
align: 'center',
61+
render: community => <CommunityCell data={community} />,
62+
},
63+
{
64+
title: '版块',
65+
width: 200,
66+
dataIndex: 'thread',
67+
align: 'center',
68+
render: text => (
69+
<div>
70+
{Trans(text)}({text})
71+
</div>
72+
),
73+
},
74+
{
75+
title: '子话题',
76+
width: 150,
77+
dataIndex: 'topic',
78+
align: 'center',
79+
render: text => (
80+
<div>
81+
{Trans(text.title)}({text.title})
82+
</div>
83+
),
84+
},
85+
{
86+
title: '时间戳',
87+
width: 120,
88+
align: 'center',
89+
render: (text, record) => <TimeStampCell data={record} />,
90+
},
91+
{
92+
title: '操作',
93+
width: 200,
94+
dataIndex: '',
95+
align: 'center',
96+
render: (text, record) => (
97+
<OperationWrapper>
98+
<Button
99+
size="small"
100+
type="primary"
101+
ghost
102+
onClick={onEdit.bind(this, record)}
103+
>
104+
编辑
105+
</Button>
106+
<Space right="10px" />
107+
<Button
108+
size="small"
109+
type="red"
110+
ghost
111+
onClick={onDelete.bind(this, record)}
112+
>
113+
删除
114+
</Button>
115+
</OperationWrapper>
116+
),
117+
},
118+
]
119+
}
120+
121+
render() {
122+
const { data, loading, pageChange } = this.props
123+
124+
return (
125+
<React.Fragment>
126+
{data ? (
127+
<div>
128+
<Table
129+
columns={this.columns()}
130+
dataSource={data.entries}
131+
scroll={{ x: 1500 }}
132+
loading={TableLoading(loading)}
133+
pagination={false}
134+
/>
135+
<Pagi
136+
left="-10px"
137+
pageNumber={data.pageNumber}
138+
pageSize={data.pageSize}
139+
totalCount={data.totalCount}
140+
onChange={pageChange}
141+
/>
142+
</div>
143+
) : null}
144+
</React.Fragment>
145+
)
146+
}
147+
}
148+
149+
TagsTable.propTypes = {
150+
data: PropTypes.any.isRequired,
151+
loading: PropTypes.bool,
152+
pageChange: PropTypes.func,
153+
154+
onEdit: PropTypes.func,
155+
onDelete: PropTypes.func,
156+
}
157+
158+
TagsTable.defaultProps = {
159+
loading: false,
160+
pageChange: debug,
161+
onEdit: debug,
162+
onDelete: debug,
163+
}
164+
165+
export default TagsTable

‎components/TagsTable/styles/index.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import styled from 'styled-components'
2+
3+
import { Img } from '../..'
4+
import { theme } from '../../../utils'
5+
6+
export const Wrapper = styled.div`
7+
min-height: 800px;
8+
`
9+
export const CommunityIcon = styled(Img)`
10+
fill: ${theme('banner.title')};
11+
width: 30px;
12+
height: 30px;
13+
`
14+
export const OperationWrapper = styled.div`
15+
display: flex;
16+
justify-content: center;
17+
`

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

‎containers/CommunitiesContent/TagsContent.js‎

Lines changed: 7 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1,135 +1,15 @@
11
import React from 'react'
22

3-
import {
4-
Pagi,
5-
Table,
6-
TableLoading,
7-
Button,
8-
Space,
9-
ColorCell,
10-
CommunityCell,
11-
TimeStampCell,
12-
} from '../../components'
13-
14-
import { OperationWrapper } from './styles'
15-
16-
import { Trans } from '../../utils'
3+
import TagsTable from '../../components/TagsTable'
174
import * as logic from './logic'
185

19-
/* eslint-disable react/display-name */
20-
const columns = [
21-
{
22-
title: 'id',
23-
dataIndex: 'id',
24-
align: 'center',
25-
width: 80,
26-
fixed: 'left',
27-
},
28-
{
29-
title: '标题',
30-
width: 120,
31-
dataIndex: 'title',
32-
align: 'left',
33-
render: text => (
34-
<div>
35-
{Trans(text)}({text})
36-
</div>
37-
),
38-
},
39-
{
40-
title: '颜色',
41-
width: 60,
42-
dataIndex: 'color',
43-
align: 'center',
44-
render: text => <ColorCell color={text} />,
45-
},
46-
{
47-
title: '社区',
48-
width: 200,
49-
dataIndex: 'community',
50-
align: 'center',
51-
render: community => <CommunityCell data={community} />,
52-
},
53-
{
54-
title: '版块',
55-
width: 200,
56-
dataIndex: 'thread',
57-
align: 'center',
58-
render: text => (
59-
<div>
60-
{Trans(text)}({text})
61-
</div>
62-
),
63-
},
64-
{
65-
title: '子话题',
66-
width: 150,
67-
dataIndex: 'topic',
68-
align: 'center',
69-
render: text => (
70-
<div>
71-
{Trans(text.title)}({text.title})
72-
</div>
73-
),
74-
},
75-
{
76-
title: '时间戳',
77-
width: 120,
78-
align: 'center',
79-
render: (text, record) => <TimeStampCell data={record} />,
80-
},
81-
{
82-
title: '操作',
83-
width: 200,
84-
dataIndex: '',
85-
align: 'center',
86-
render: (text, record) => (
87-
<OperationWrapper>
88-
<Button
89-
size="small"
90-
type="primary"
91-
ghost
92-
onClick={logic.onEditTag.bind(this, record)}
93-
>
94-
编辑
95-
</Button>
96-
<Space right="10px" />
97-
<Button
98-
size="small"
99-
type="red"
100-
ghost
101-
onClick={logic.onDeleteTag.bind(this, record)}
102-
>
103-
删除
104-
</Button>
105-
</OperationWrapper>
106-
),
107-
},
108-
]
109-
1106
const TagsContent = ({ data, restProps: { tagsLoading } }) => (
111-
<React.Fragment>
112-
{data ? (
113-
<div>
114-
<Table
115-
columns={columns}
116-
dataSource={data.entries}
117-
scroll={{ x: 1500 }}
118-
loading={TableLoading(tagsLoading)}
119-
pagination={false}
120-
/>
121-
<Pagi
122-
left="-10px"
123-
pageNumber={data.pageNumber}
124-
pageSize={data.pageSize}
125-
totalCount={data.totalCount}
126-
onChange={logic.loadTags}
127-
/>
128-
</div>
129-
) : (
130-
<div />
131-
)}
132-
</React.Fragment>
7+
<TagsTable
8+
data={data}
9+
loading={tagsLoading}
10+
onDelete={logic.onDeleteTag}
11+
onEdit={logic.onEditTag}
12+
/>
13313
)
13414

13515
export default TagsContent

0 commit comments

Comments
 (0)