Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit95c13a7

Browse files
committed
refactor(SectionLabel): simplify props, unify to addonNote
1 parent0fff854 commit95c13a7

File tree

4 files changed

+37
-130
lines changed

4 files changed

+37
-130
lines changed

‎components/SectionLabel/index.js‎

Lines changed: 5 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -18,33 +18,20 @@ import {
1818
Desc,
1919
Divider,
2020
LabelIcon,
21-
AdderWrapper,
22-
AdderText,
23-
AdderIcon,
21+
AddonWrapper,
2422
}from'./styles'
2523

2624
import{makeDebugger}from'../../utils'
2725
/* eslint-disable no-unused-vars */
2826
constdebug=makeDebugger('c:SectionLabel:index')
2927
/* eslint-enable no-unused-vars */
3028

31-
constSectionLabel=({
32-
title,
33-
iconSrc,
34-
desc,
35-
node,
36-
withAdder,
37-
onAdd,
38-
adderText,
39-
})=>(
29+
constSectionLabel=({ title, iconSrc, desc, node, addonNode})=>(
4030
<Wrapper>
4131
<Label>
4232
<LabelIconsrc={iconSrc}/>
4333
<Title>{title}</Title>
44-
<AdderWrappershow={withAdder}onClick={onAdd}>
45-
<AdderIconsrc={`${ICON_CMD}/add_circle.svg`}/>
46-
<AdderText>{adderText}</AdderText>
47-
</AdderWrapper>
34+
<AddonWrappershow={addonNode!==''}>{addonNode}</AddonWrapper>
4835
</Label>
4936
<Divider/>
5037
<Maybetest={desc}>
@@ -62,20 +49,14 @@ SectionLabel.propTypes = {
6249
iconSrc:PropTypes.string,
6350
desc:PropTypes.string,
6451
node:PropTypes.oneOfType([PropTypes.string,PropTypes.node]),
65-
withAdder:PropTypes.bool,
66-
onAdd:PropTypes.func,
67-
adderText:PropTypes.string,
68-
// addonNode: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
52+
addonNode:PropTypes.oneOfType([PropTypes.string,PropTypes.node]),
6953
}
7054

7155
SectionLabel.defaultProps={
7256
iconSrc:`${ICON_CMD}/setting_theme.svg`,
7357
desc:'',
7458
node:'',
75-
withAdder:false,
76-
onAdd:debug,
77-
adderText:'添加',
78-
// addonNode: '',
59+
addonNode:'',
7960
}
8061

8162
exportdefaultSectionLabel

‎components/SectionLabel/styles/index.js‎

Lines changed: 1 addition & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -16,40 +16,13 @@ export const Title = styled.div`
1616
font-size: 0.9rem;
1717
flex-grow: 1;
1818
`
19-
exportconstAdderWrapper=styled.div`
19+
exportconstAddonWrapper=styled.div`
2020
margin-right: 5%;
2121
display:${({ show})=>(show ?'flex' :'none')};
2222
&:active {
2323
animation:${Animate.pulse} 0.3s linear;
2424
}
2525
`
26-
exportconstAdderText=styled.div`
27-
font-size: 0.9rem;
28-
color:${theme('tabs.header')};
29-
margin-top: -2px;
30-
${Label}:hover & {
31-
color:${theme('tabs.headerActive')};
32-
}
33-
&:hover {
34-
cursor: pointer;
35-
font-weight: bold;
36-
}
37-
transition: color 0.3s linear;
38-
`
39-
exportconstAdderIcon=styled(Img)`
40-
fill:${theme('tabs.header')};
41-
width: 17px;
42-
height: 17px;
43-
margin-right: 3px;
44-
${Label}:hover & {
45-
fill:${theme('tabs.headerActive')};
46-
}
47-
&:hover {
48-
cursor: pointer;
49-
fill:${theme('tabs.headerActive')};
50-
}
51-
`
52-
5326
exportconstDivider=styled.div`
5427
border-bottom: 1px solid;
5528
border-color:${theme('banner.desc')};

‎containers/FavoritesCats/index.js‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,13 @@
66

77
importReactfrom'react'
88
importPropTypesfrom'prop-types'
9-
109
import{inject,observer}from'mobx-react'
1110

1211
import{ICON_CMD}from'../../config'
13-
1412
import{Modal,SectionLabel}from'../../components'
13+
14+
import{AdderWrapper,AdderText,AdderIcon}from'./styles'
15+
1516
importBoxViewfrom'./BoxView'
1617
importCreatorfrom'./Creator'
1718
importUpdaterfrom'./Updater'
@@ -55,9 +56,12 @@ class FavoritesCatsContainer extends React.Component {
5556
title="收藏夹"
5657
iconSrc={`${ICON_CMD}/folder.svg`}
5758
desc={`当前共有收藏夹${totalCount} 个。`}
58-
withAdder
59-
onAdd={logic.changeViewTo.bind(this,'creator')}
60-
adderText="创建"
59+
addonNode={
60+
<AdderWrapperonClick={logic.changeViewTo.bind(this,'creator')}>
61+
<AdderIconsrc={`${ICON_CMD}/add_circle.svg`}/>
62+
<AdderText>创建</AdderText>
63+
</AdderWrapper>
64+
}
6165
/>
6266
) :null}
6367
<Modal
Lines changed: 22 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,34 @@
11
importstyledfrom'styled-components'
22

33
importImgfrom'../../../components/Img'
4-
import{theme}from'../../../utils'
4+
import{theme,Animate}from'../../../utils'
55

6-
exportconstWrapper=styled.div`
6+
exportconstAdderWrapper=styled.div`
77
display: flex;
8-
flex-wrap: wrap;
8+
width: 80px;
9+
text-align: right;
10+
justify-content: flex-end;
11+
&:active {
12+
animation:${Animate.pulse} 0.3s linear;
13+
}
914
`
10-
11-
exportconstBoxWrapper=styled.div`
12-
display: flex;
13-
flex-direction: column;
14-
border: 1px solid;
15-
border:${({ active})=>(active ?'2px solid' :'1px dashed')};
16-
border-color:${theme('banner.desc')};
17-
margin-right: 15px;
18-
margin-bottom: 18px;
19-
height: 130px;
20-
width: 210px;
21-
padding: 10px;
22-
border-radius: 5px;
15+
exportconstAdderText=styled.div`
16+
font-size: 0.9rem;
17+
color:${theme('tabs.header')};
18+
margin-top: -2px;
2319
&:hover {
24-
border-top: 2px solid;
25-
border-bottom: 2px solid;
26-
border-color:${theme('banner.desc')};
20+
cursor: pointer;
21+
font-weight: bold;
2722
}
23+
transition: color 0.3s linear;
2824
`
29-
30-
exportconstHeader=styled.div`
31-
display: flex;
32-
align-items: center;
33-
`
34-
35-
exportconstFooter=styled.div`
36-
display: flex;
37-
`
38-
39-
exportconstTitle=styled.div`
40-
display: flex;
41-
align-items: center;
42-
flex-grow: 1;
43-
`
44-
45-
exportconstEditIcon=styled(Img)`
46-
fill:${theme('banner.desc')};
47-
width: 20px;
48-
height: 20px;
49-
display: none;
50-
51-
${BoxWrapper}:hover & {
52-
display: block;
25+
exportconstAdderIcon=styled(Img)`
26+
fill:${theme('tabs.header')};
27+
width: 17px;
28+
height: 17px;
29+
margin-right: 3px;
30+
&:hover {
5331
cursor: pointer;
54-
fill:${theme('banner.title')};
32+
fill:${theme('tabs.headerActive')};
5533
}
5634
`
57-
58-
exportconstTitleText=styled.div`
59-
font-size: 1rem;
60-
color:${theme('banner.title')};
61-
`
62-
63-
exportconstLockIcon=styled(Img)`
64-
width: 18px;
65-
height: 18px;
66-
fill:${theme('banner.desc')};
67-
margin-left: 5px;
68-
margin-top: 5px;
69-
`
70-
71-
exportconstDesc=styled.div`
72-
color:${theme('banner.desc')};
73-
flex-grow: 1;
74-
margin-top: 5px;
75-
`
76-
77-
exportconstFooterCounter=styled.div`
78-
color:${theme('banner.desc')};
79-
flex-grow: 1;
80-
font-size: 0.8rem;
81-
`
82-
exportconstFooterUpdate=styled.div`
83-
color:${theme('banner.desc')};
84-
font-size: 0.8rem;
85-
`

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp