Skip to content

Commit a0c7ed2

Browse files
smileyingsmileying
authored
Merge pull request #1622 from smileying/feature_navbar
Feature navbar
2 parents 65b5f6f + ae17a88 commit a0c7ed2

File tree

3 files changed

+43
-23
lines changed

3 files changed

+43
-23
lines changed

‎packages/taro-ui-docs/markdown/navbar.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,3 +83,4 @@ import { AtNavBar } from 'taro-ui'
8383
| onClickLeftIcon | 左边第一个图标类型点击事件 | - |
8484
| onClickRgIconSt | 从右到左第一个图标类型点击事件 | - |
8585
| onClickRgIconNd | 从右到左第二个图标类型点击事件 | - |
86+
| onClickTitle | 标题点击事件 | - |

‎packages/taro-ui/rn/components/nav-bar/index.tsx

Lines changed: 26 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
2222
this.props.onClickRgIconNd && this.props.onClickRgIconNd(event)
2323
}
2424

25+
private handleClickTitle(event: ITouchEvent): void {
26+
this.props.onClickTitle && this.props.onClickTitle(event)
27+
}
28+
2529
public render(): JSX.Element {
2630
const {
2731
customStyle,
@@ -33,7 +37,7 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
3337
leftText,
3438
title,
3539
rightFirstIconType,
36-
rightSecondIconType,
40+
rightSecondIconType
3741
} = this.props
3842
const linkStyle: any = {
3943
// color,
@@ -49,7 +53,7 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
4953
prefixClass: 'at-icon',
5054
value: '',
5155
color: '',
52-
size: 24,
56+
size: 24
5357
}
5458

5559
const leftIconInfo =
@@ -61,9 +65,9 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
6165
'at-nav-bar__at-icon',
6266
{
6367
[`${leftIconInfo.prefixClass}-${leftIconInfo.value}`]:
64-
leftIconInfo.value,
68+
leftIconInfo.value
6569
},
66-
leftIconInfo.className,
70+
leftIconInfo.className
6771
)
6872

6973
const rightFirstIconInfo =
@@ -75,9 +79,9 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
7579
'at-nav-bar__at-icon',
7680
{
7781
[`${rightFirstIconInfo.prefixClass}-${rightFirstIconInfo.value}`]:
78-
rightFirstIconInfo.value,
82+
rightFirstIconInfo.value
7983
},
80-
rightFirstIconInfo.className,
84+
rightFirstIconInfo.className
8185
)
8286

8387
const rightSecondIconInfo =
@@ -89,9 +93,9 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
8993
'at-nav-bar__at-icon',
9094
{
9195
[`${rightSecondIconInfo.prefixClass}-${rightSecondIconInfo.value}`]:
92-
rightSecondIconInfo.value,
96+
rightSecondIconInfo.value
9397
},
94-
rightSecondIconInfo.className,
98+
rightSecondIconInfo.className
9599
)
96100

97101
return (
@@ -100,9 +104,9 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
100104
{
101105
'at-nav-bar': true,
102106
'at-nav-bar--fixed': fixed,
103-
'at-nav-bar--no-border': !border,
107+
'at-nav-bar--no-border': !border
104108
},
105-
className,
109+
className
106110
)}
107111
style={customStyle}
108112
>
@@ -120,7 +124,7 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
120124
customStyle={Object.assign(
121125
{},
122126
linkStyle,
123-
leftIconInfo.customStyle,
127+
leftIconInfo.customStyle
124128
)}
125129
/>
126130
)}
@@ -132,14 +136,17 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
132136
{leftText}
133137
</Text>
134138
</View>
135-
<View className='at-nav-bar__title'>
139+
<View
140+
className='at-nav-bar__title'
141+
onClick={this.handleClickTitle.bind(this)}
142+
>
136143
{title || this.props.children}
137144
</View>
138145
<View className='at-nav-bar__right-view'>
139146
<View
140147
className={classNames({
141148
'at-nav-bar__container': true,
142-
'at-nav-bar__container--hide': !rightSecondIconType,
149+
'at-nav-bar__container--hide': !rightSecondIconType
143150
})}
144151
style={linkStyle}
145152
onClick={this.handleClickNd.bind(this)}
@@ -153,7 +160,7 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
153160
customStyle={Object.assign(
154161
{},
155162
linkStyle,
156-
leftIconInfo.customStyle,
163+
leftIconInfo.customStyle
157164
)}
158165
/>
159166
)}
@@ -164,7 +171,7 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
164171
<View
165172
className={classNames({
166173
'at-nav-bar__container': true,
167-
'at-nav-bar__container--hide': !rightFirstIconType,
174+
'at-nav-bar__container--hide': !rightFirstIconType
168175
})}
169176
style={linkStyle}
170177
onClick={this.handleClickSt.bind(this)}
@@ -178,7 +185,7 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
178185
customStyle={Object.assign(
179186
{},
180187
linkStyle,
181-
leftIconInfo.customStyle,
188+
leftIconInfo.customStyle
182189
)}
183190
/>
184191
)}
@@ -202,7 +209,7 @@ AtNavBar.defaultProps = {
202209
leftText: '',
203210
title: '',
204211
rightFirstIconType: '',
205-
rightSecondIconType: '',
212+
rightSecondIconType: ''
206213
}
207214

208215
AtNavBar.propTypes = {
@@ -217,9 +224,10 @@ AtNavBar.propTypes = {
217224
rightFirstIconType: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
218225
rightSecondIconType: PropTypes.oneOfType([
219226
PropTypes.string,
220-
PropTypes.object,
227+
PropTypes.object
221228
]),
222229
onClickLeftIcon: PropTypes.func,
223230
onClickRgIconSt: PropTypes.func,
224231
onClickRgIconNd: PropTypes.func,
232+
onClickTitle: PropTypes.func
225233
}

‎packages/taro-ui/src/components/nav-bar/index.tsx

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
2222
this.props.onClickRgIconNd && this.props.onClickRgIconNd(event)
2323
}
2424

25+
private handleClickTitle(event: ITouchEvent): void {
26+
this.props.onClickTitle && this.props.onClickTitle(event)
27+
}
28+
2529
public render(): JSX.Element {
2630
const {
2731
customStyle,
@@ -53,7 +57,8 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
5357
const leftIconClass = classNames(
5458
leftIconInfo.prefixClass,
5559
{
56-
[`${leftIconInfo.prefixClass}-${leftIconInfo.value}`]: leftIconInfo.value
60+
[`${leftIconInfo.prefixClass}-${leftIconInfo.value}`]:
61+
leftIconInfo.value
5762
},
5863
leftIconInfo.className
5964
)
@@ -65,7 +70,8 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
6570
const rightFirstIconClass = classNames(
6671
rightFirstIconInfo.prefixClass,
6772
{
68-
[`${rightFirstIconInfo.prefixClass}-${rightFirstIconInfo.value}`]: rightFirstIconInfo.value
73+
[`${rightFirstIconInfo.prefixClass}-${rightFirstIconInfo.value}`]:
74+
rightFirstIconInfo.value
6975
},
7076
rightFirstIconInfo.className
7177
)
@@ -77,7 +83,8 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
7783
const rightSecondIconClass = classNames(
7884
rightSecondIconInfo.prefixClass,
7985
{
80-
[`${rightSecondIconInfo.prefixClass}-${rightSecondIconInfo.value}`]: rightSecondIconInfo.value
86+
[`${rightSecondIconInfo.prefixClass}-${rightSecondIconInfo.value}`]:
87+
rightSecondIconInfo.value
8188
},
8289
rightSecondIconInfo.className
8390
)
@@ -115,7 +122,10 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
115122
)}
116123
<Text className='at-nav-bar__text'>{leftText}</Text>
117124
</View>
118-
<View className='at-nav-bar__title'>
125+
<View
126+
className='at-nav-bar__title'
127+
onClick={this.handleClickTitle.bind(this)}
128+
>
119129
{title || this.props.children}
120130
</View>
121131
<View className='at-nav-bar__right-view'>
@@ -200,5 +210,6 @@ AtNavBar.propTypes = {
200210
]),
201211
onClickLeftIcon: PropTypes.func,
202212
onClickRgIconSt: PropTypes.func,
203-
onClickRgIconNd: PropTypes.func
213+
onClickRgIconNd: PropTypes.func,
214+
onClickTitle: PropTypes.func
204215
}

0 commit comments

Comments
 (0)