Skip to content

Commit 4f5fcc2

Browse files
mydearxymmydearxym
committed
tag set/unset wip
1 parent cce034b commit 4f5fcc2

File tree

14 files changed

+258
-33
lines changed

14 files changed

+258
-33
lines changed

‎components/CategoriesCell/index.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@
77
import React from 'react'
88
import PropTypes from 'prop-types'
99
import R from 'ramda'
10-
1110
import shortid from 'shortid'
1211

12+
import { ICON_ASSETS } from '../../config'
13+
1314
import {
1415
Wrapper,
1516
CategoryWrapper,
@@ -20,8 +21,6 @@ import {
2021
AddText,
2122
} from './styles'
2223

23-
import { ICON_ASSETS } from '../../config'
24-
2524
// import { inject, observer } from 'mobx-react'
2625
// import Link from 'next/link'
2726

‎components/CategoriesCell/styles/index.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,5 +66,3 @@ export const AddText = styled.div`
6666
}
6767
transition: color 0.2s linear;
6868
`
69-
70-
export const Holder = styled.div``

‎components/CommunityCell/index.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import shortid from 'shortid'
1212

1313
import ReactTooltip from 'react-tooltip'
1414
import { makeDebugger } from '../../utils'
15-
import { Wrapper, Logo, Title } from './styles'
15+
import { Wrapper, Logo, Title, UnknowText } from './styles'
1616

1717
/* eslint-disable no-unused-vars */
1818
const debug = makeDebugger('c:CommunityCell:index')
@@ -45,15 +45,15 @@ const renderContent = (data, array) => {
4545
</Wrapper>
4646
)
4747
}
48-
return <div />
48+
return <UnknowText>未知</UnknowText>
4949
}
5050

5151
// TODO: array version && tooltip
5252
const CommunityCell = ({ data, array }) => (
53-
<div>
53+
<React.Fragment>
5454
{renderContent(data, array)}
5555
<ReactTooltip effect="solid" place="bottom" id="community_cell" />
56-
</div>
56+
</React.Fragment>
5757
)
5858

5959
CommunityCell.propTypes = {

‎components/CommunityCell/styles/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,8 @@ export const Logo = styled(Img)`
1616
export const Title = styled.div`
1717
margin-left: 5px;
1818
`
19+
20+
export const UnknowText = styled.div`
21+
color: tomato;
22+
font-size: 0.8rem;
23+
`

‎components/TagsCell/index.js‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
/*
2+
*
3+
* TagsCell
4+
*
5+
*/
6+
7+
import React from 'react'
8+
import PropTypes from 'prop-types'
9+
import R from 'ramda'
10+
import shortid from 'shortid'
11+
12+
import { ICON_ASSETS } from '../../config'
13+
14+
// import { inject, observer } from 'mobx-react'
15+
// import Link from 'next/link'
16+
import {
17+
Wrapper,
18+
CategoryWrapper,
19+
CategoryTag,
20+
AddWrapper,
21+
DeleteCross,
22+
AddIcon,
23+
AddText,
24+
} from './styles'
25+
26+
const TagsList = ({ tags, partId, onDelete }) => (
27+
<CategoryWrapper>
28+
{tags.map(c => (
29+
<CategoryTag
30+
key={shortid.generate()}
31+
onClick={onDelete.bind(this, partId, c)}
32+
>
33+
{c.title}
34+
<DeleteCross>x</DeleteCross>
35+
</CategoryTag>
36+
))}
37+
</CategoryWrapper>
38+
)
39+
40+
class TagsCell extends React.Component {
41+
componentDidMount() {}
42+
43+
componentWillUnmount() {}
44+
45+
render() {
46+
const { tags, partId, onDelete, onAdd } = this.props
47+
48+
return (
49+
<React.Fragment>
50+
{R.isEmpty(tags) ? (
51+
<AddWrapper>
52+
<AddIcon src={`${ICON_ASSETS}/cmd/plus.svg`} />
53+
<AddText onClick={onAdd.bind(this, [])}>添加</AddText>
54+
</AddWrapper>
55+
) : (
56+
<Wrapper>
57+
<TagsList tags={tags} partId={partId} onDelete={onDelete} />
58+
<div onClick={onAdd.bind(this, tags)}>
59+
<AddIcon src={`${ICON_ASSETS}/cmd/plus.svg`} />
60+
</div>
61+
</Wrapper>
62+
)}
63+
</React.Fragment>
64+
)
65+
}
66+
}
67+
68+
export default TagsCell
69+
70+
TagsCell.propTypes = {
71+
// https://www.npmjs.com/package/prop-types
72+
/* communityId: PropTypes.number.isRequired, */
73+
tags: PropTypes.arrayOf(
74+
PropTypes.shape({
75+
id: PropTypes.string,
76+
title: PropTypes.string,
77+
color: PropTypes.string,
78+
})
79+
),
80+
partId: PropTypes.string.isRequired,
81+
onDelete: PropTypes.func.isRequired,
82+
onAdd: PropTypes.func.isRequired,
83+
}
84+
85+
TagsCell.defaultProps = {
86+
tags: [],
87+
}

‎components/TagsCell/styles/index.js‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import styled from 'styled-components'
2+
3+
import { Animate } from '../../../utils'
4+
5+
import { Img } from '../../../components'
6+
7+
export const UnsetText = styled.div`
8+
color: tomato;
9+
`
10+
export const Wrapper = styled.div`
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
`
15+
export const CategoryWrapper = styled.div`
16+
display: flex;
17+
`
18+
19+
export const CategoryTag = styled.div`
20+
display: flex;
21+
align-items: center;
22+
background: #e4f7fe;
23+
border: 1px dashed #97dbfc;
24+
color: #0692fa;
25+
padding: 0 10px;
26+
padding-right: 6px;
27+
border-radius: 3px;
28+
margin-right: 7px;
29+
&:hover {
30+
border: 1px solid #97dbfc;
31+
}
32+
`
33+
34+
export const DeleteCross = styled.div`
35+
margin-left: 8px;
36+
&:hover {
37+
cursor: pointer;
38+
animation: ${Animate.pulse} 0.3s linear;
39+
}
40+
`
41+
42+
export const AddWrapper = Wrapper.extend``
43+
44+
export const AddIcon = styled(Img)`
45+
width: 15px;
46+
height: 15px;
47+
display: block;
48+
fill: lightgrey;
49+
&:hover {
50+
cursor: pointer;
51+
fill: #646479;
52+
}
53+
${AddWrapper}:hover & {
54+
cursor: pointer;
55+
fill: #646479;
56+
animation: ${Animate.pulse} 0.3s linear;
57+
}
58+
`
59+
60+
export const AddText = styled.div`
61+
margin-left: 5px;
62+
color: lightgrey;
63+
${AddWrapper}:hover & {
64+
cursor: pointer;
65+
color: #646479;
66+
}
67+
transition: color 0.2s linear;
68+
`

‎components/TagsCell/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 TagsCell from '../index'
5+
6+
describe('TODO <TagsCell />', () => {
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
@@ -29,6 +29,7 @@ export { default as FormInputer } from './FormInputer'
2929
export { default as FormSelector } from './FormSelector'
3030
export { default as TagColorSelector } from './TagColorSelector'
3131
export { default as CategoriesCell } from './CategoriesCell'
32+
export { default as TagsCell } from './TagsCell'
3233

3334
// loading component
3435
export {

‎containers/CommunitiesContent/IndexContent.js‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ const columns = [
7373
categories={categoriesArray}
7474
communityId={record.id}
7575
onDelete={logic.unsetCategory}
76-
onAdd={logic.addCategory}
76+
onAdd={logic.setCategory}
7777
/>
7878
)
7979
},
@@ -154,10 +154,7 @@ class IndexContent extends React.Component {
154154
}
155155

156156
render() {
157-
const {
158-
data,
159-
restProps: { communitiesLoading },
160-
} = this.props
157+
const { data, restProps: { communitiesLoading } } = this.props
161158

162159
return (
163160
<div>

‎containers/CommunitiesContent/PostsContent.js‎

Lines changed: 31 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import {
99
Button,
1010
Space,
1111
UserCell,
12+
CommunityCell,
13+
TagsCell,
1214
} from '../../components'
1315

1416
import { OperationWrapper } from './styles'
@@ -33,8 +35,33 @@ const columns = [
3335
},
3436
},
3537
{
36-
title: '标题',
38+
title: '社区',
39+
width: 150,
40+
dataIndex: 'communities',
41+
align: 'center',
42+
render: communities => {
43+
return <CommunityCell array={communities} />
44+
},
45+
},
46+
{
47+
title: '标签',
3748
width: 200,
49+
dataIndex: 'tags',
50+
align: 'center',
51+
render: (tags, record) => {
52+
return (
53+
<TagsCell
54+
tags={tags}
55+
partId={record.id}
56+
onAdd={console.log}
57+
onDelete={logic.unsetTag}
58+
/>
59+
)
60+
},
61+
},
62+
{
63+
title: '标题',
64+
width: 300,
3865
dataIndex: 'title',
3966
align: 'center',
4067
render: text => {
@@ -43,7 +70,7 @@ const columns = [
4370
},
4471
{
4572
title: '摘要',
46-
width: 300,
73+
width: 400,
4774
dataIndex: 'digest',
4875
align: 'center',
4976
render: text => {
@@ -144,18 +171,15 @@ class PostsContent extends React.Component {
144171
*/
145172

146173
render() {
147-
const {
148-
data,
149-
restProps: { communitiesLoading },
150-
} = this.props
174+
const { data, restProps: { communitiesLoading } } = this.props
151175
return (
152176
<div>
153177
{data ? (
154178
<div>
155179
<Table
156180
columns={columns}
157181
dataSource={data.entries}
158-
scroll={{ x: 1500 }}
182+
scroll={{ x: 2000 }}
159183
loading={TableLoading(communitiesLoading)}
160184
pagination={false}
161185
/>

0 commit comments

Comments
 (0)