Skip to content

Commit 167baac

Browse files
mydearxymmydearxym
committed
extract AdderCell
1 parent e6edd0b commit 167baac

File tree

12 files changed

+94
-126
lines changed

12 files changed

+94
-126
lines changed

‎components/AdderCell/index.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/*
2+
*
3+
* AdderCell
4+
*
5+
*/
6+
7+
import React from 'react'
8+
import PropTypes from 'prop-types'
9+
10+
import { ICON_ASSETS } from '../../config'
11+
12+
import { makeDebugger } from '../../utils'
13+
import { AddWrapper, AddIcon, AddText } from './styles'
14+
15+
/* eslint-disable no-unused-vars */
16+
const debug = makeDebugger('c:AdderCell:index')
17+
/* eslint-enable no-unused-vars */
18+
19+
const AdderCell = ({ onAdd }) => (
20+
<AddWrapper onClick={onAdd}>
21+
<AddIcon src={`${ICON_ASSETS}/cmd/plus.svg`} />
22+
<AddText>添加</AddText>
23+
</AddWrapper>
24+
)
25+
26+
AdderCell.propTypes = {
27+
// https://www.npmjs.com/package/prop-types
28+
onAdd: PropTypes.func,
29+
}
30+
31+
AdderCell.defaultProps = {
32+
onAdd: debug,
33+
}
34+
35+
export default AdderCell

‎components/AdderCell/styles/index.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import styled from 'styled-components'
2+
3+
import { Animate } from '../../../utils'
4+
import { Img } from '../../../components'
5+
6+
export const AddWrapper = styled.div`
7+
display: flex;
8+
justify-content: center;
9+
align-items: center;
10+
`
11+
export const AddIcon = styled(Img)`
12+
width: 15px;
13+
height: 15px;
14+
display: block;
15+
fill: lightgrey;
16+
&:hover {
17+
cursor: pointer;
18+
fill: #646479;
19+
}
20+
${AddWrapper}:hover & {
21+
cursor: pointer;
22+
fill: #646479;
23+
animation: ${Animate.pulse} 0.3s linear;
24+
}
25+
`
26+
27+
export const AddText = styled.div`
28+
margin-left: 5px;
29+
color: lightgrey;
30+
${AddWrapper}:hover & {
31+
cursor: pointer;
32+
color: #646479;
33+
}
34+
transition: color 0.2s linear;
35+
`
36+
//

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

‎components/CategoriesCell/index.js‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,13 @@ import shortid from 'shortid'
1111

1212
import { ICON_ASSETS } from '../../config'
1313

14+
import { AdderCell } from '../../components'
1415
import {
1516
Wrapper,
1617
CategoryWrapper,
1718
CategoryTag,
18-
AddWrapper,
1919
DeleteCross,
2020
AddIcon,
21-
AddText,
2221
} from './styles'
2322

2423
// import { inject, observer } from 'mobx-react'
@@ -49,10 +48,7 @@ class CategoriesCell extends React.Component {
4948
return (
5049
<div>
5150
{R.isEmpty(source.categories) ? (
52-
<AddWrapper>
53-
<AddIcon src={`${ICON_ASSETS}/cmd/plus.svg`} />
54-
<AddText onClick={onAdd.bind(this, source)}>添加</AddText>
55-
</AddWrapper>
51+
<AdderCell onAdd={onAdd.bind(this, source)} />
5652
) : (
5753
<Wrapper>
5854
<CategoriesList source={source} onDelete={onDelete} />

‎components/CategoriesCell/styles/index.js‎

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,6 @@ export const DeleteCross = styled.div`
3939
}
4040
`
4141

42-
export const AddWrapper = Wrapper.extend``
43-
4442
export const AddIcon = styled(Img)`
4543
width: 15px;
4644
height: 15px;
@@ -50,19 +48,4 @@ export const AddIcon = styled(Img)`
5048
cursor: pointer;
5149
fill: #646479;
5250
}
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;
6851
`

‎components/CommunityCell/index.js‎

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

1313
import { ICON_ASSETS } from '../../config'
1414
import { makeDebugger } from '../../utils'
15+
import { AdderCell } from '../../components'
1516

1617
import {
1718
Wrapper,
@@ -20,8 +21,6 @@ import {
2021
SetterWrapper,
2122
DeleteCross,
2223
UnknowText,
23-
AddText,
24-
AddWrapper,
2524
AddIcon,
2625
} from './styles'
2726

@@ -97,10 +96,7 @@ const renderContent = props => {
9796
return (
9897
<React.Fragment>
9998
{withSetter ? (
100-
<AddWrapper onClick={onAdd.bind(this, part, source)}>
101-
<AddIcon src={`${ICON_ASSETS}/cmd/plus.svg`} />
102-
<AddText>添加</AddText>
103-
</AddWrapper>
99+
<AdderCell onAdd={onAdd.bind(this, part, source)} />
104100
) : (
105101
<UnknowText>漂浮中</UnknowText>
106102
)}

‎components/CommunityCell/styles/index.js‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@ export const Wrapper = styled.div`
99
justify-content: center;
1010
`
1111

12-
export const AddWrapper = Wrapper.extend``
13-
1412
export const CommunityLogo = styled(Img)`
1513
width: 22px;
1614
height: 22px;
@@ -50,22 +48,8 @@ export const AddIcon = styled(Img)`
5048
cursor: pointer;
5149
fill: #646479;
5250
}
53-
${AddWrapper}:hover & {
54-
cursor: pointer;
55-
fill: #646479;
56-
animation: ${Animate.pulse} 0.3s linear;
57-
}
5851
`
5952
export const UnknowText = styled.div`
6053
color: lightgrey;
6154
font-size: 0.8rem;
6255
`
63-
export const AddText = styled.div`
64-
margin-left: 5px;
65-
color: lightgrey;
66-
${AddWrapper}:hover & {
67-
cursor: pointer;
68-
color: #646479;
69-
}
70-
transition: color 0.2s linear;
71-
`

‎components/PermissionCell/index.js‎

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,10 @@ import R from 'ramda'
99
import PropTypes from 'prop-types'
1010
import shortid from 'shortid'
1111

12-
import { ICON_ASSETS } from '../../config'
12+
import { makeDebugger, isEmptyNil, isObject, objToArray } from '../../utils'
13+
14+
import { AdderCell } from '../../components'
1315

14-
import { makeDebugger, isEmptyNil, isObject } from '../../utils'
1516
import {
1617
Wrapper,
1718
Number,
@@ -20,9 +21,6 @@ import {
2021
UnitText,
2122
NumberInfo,
2223
PermissionWrapper,
23-
AddWrapper,
24-
AddIcon,
25-
AddText,
2624
} from './styles'
2725
/* eslint-disable no-unused-vars */
2826
const debug = makeDebugger('c:PermissionCell:index')
@@ -31,11 +29,6 @@ const debug = makeDebugger('c:PermissionCell:index')
3129
const valueIsObj = v => isObject(v)
3230
const valueIsNotObj = R.complement(valueIsObj)
3331

34-
const objToArray = input =>
35-
Object.keys(input).map(key => {
36-
return { [key]: input[key] }
37-
})
38-
3932
const key = R.compose(R.head, R.keys)
4033
const value = R.compose(R.head, R.values)
4134

@@ -64,7 +57,7 @@ const RootPermissions = ({ data }) => {
6457

6558
return (
6659
<PermissionWrapper>
67-
<Label>system: </Label>
60+
<Label>general: </Label>
6861
<NumberInfo>
6962
<RootNumber>{plength.length}</RootNumber>
7063
<UnitText>项</UnitText>
@@ -76,12 +69,7 @@ const RootPermissions = ({ data }) => {
7669
const PermissionCell = ({ source, onMutate }) => {
7770
const cmsps = source.cmsPassportString
7871
if (isEmptyNil(cmsps)) {
79-
return (
80-
<AddWrapper>
81-
<AddIcon src={`${ICON_ASSETS}/cmd/plus.svg`} />
82-
<AddText onClick={onMutate.bind(this, source)}>添加</AddText>
83-
</AddWrapper>
84-
)
72+
return <AdderCell onAdd={onMutate.bind(this, source)} />
8573
}
8674
const pjson = JSON.parse(cmsps)
8775
const cdata = R.pickBy(valueIsObj, pjson)

‎components/PermissionCell/styles/index.js‎

Lines changed: 0 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
import styled from 'styled-components'
22

3-
import { Animate } from '../../../utils'
4-
import { Img } from '../../../components'
5-
63
export const Wrapper = styled.div`
74
display: flex;
85
flex-direction: column;
@@ -34,12 +31,6 @@ export const Number = styled.span`
3431
export const RootNumber = Number.extend`
3532
color: orange;
3633
`
37-
export const NoneText = styled.div`
38-
text-align: center;
39-
font-size: 0.8rem;
40-
color: lightgrey;
41-
font-style: italic;
42-
`
4334

4435
export const Label = styled.div`
4536
flex-grow: 1;
@@ -57,35 +48,3 @@ export const PermissionWrapper = styled.div`
5748
align-items: center;
5849
width: 100%;
5950
`
60-
61-
// TODO: use a component
62-
export const AddWrapper = styled.div`
63-
display: flex;
64-
justify-content: center;
65-
align-items: center;
66-
`
67-
export const AddIcon = styled(Img)`
68-
width: 15px;
69-
height: 15px;
70-
display: block;
71-
fill: lightgrey;
72-
&:hover {
73-
cursor: pointer;
74-
fill: #646479;
75-
}
76-
${AddWrapper}:hover & {
77-
cursor: pointer;
78-
fill: #646479;
79-
animation: ${Animate.pulse} 0.3s linear;
80-
}
81-
`
82-
83-
export const AddText = styled.div`
84-
margin-left: 5px;
85-
color: lightgrey;
86-
${AddWrapper}:hover & {
87-
cursor: pointer;
88-
color: #646479;
89-
}
90-
transition: color 0.2s linear;
91-
`

‎components/TagsCell/index.js‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,14 @@ import { ICON_ASSETS } from '../../config'
1313

1414
// import { inject, observer } from 'mobx-react'
1515
// import Link from 'next/link'
16+
import { AdderCell } from '../../components'
17+
1618
import {
1719
Wrapper,
1820
ListWrapper,
1921
TagWrapper,
20-
AddWrapper,
2122
DeleteCross,
2223
AddIcon,
23-
AddText,
2424
} from './styles'
2525

2626
const TagsList = ({ source, onDelete }) => (
@@ -48,10 +48,7 @@ class TagsCell extends React.Component {
4848
return (
4949
<React.Fragment>
5050
{R.isEmpty(source.tags) ? (
51-
<AddWrapper>
52-
<AddIcon src={`${ICON_ASSETS}/cmd/plus.svg`} />
53-
<AddText onClick={onAdd.bind(this, part, source)}>添加</AddText>
54-
</AddWrapper>
51+
<AdderCell onAdd={onAdd.bind(this, part, source)} />
5552
) : (
5653
<Wrapper>
5754
<TagsList source={source} onDelete={onDelete} />

0 commit comments

Comments
 (0)