Skip to content

Commit

Permalink
feat(nav-bar): 增加标题点击事件
Browse files Browse the repository at this point in the history
  • Loading branch information
@smileying
smileying committed Jun 19, 2023
1 parent 65b5f6f commit 369e71e
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 23 deletions.
1 change: 1 addition & 0 deletions packages/taro-ui-docs/markdown/navbar.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,3 +83,4 @@ import { AtNavBar } from 'taro-ui'
| onClickLeftIcon | 左边第一个图标类型点击事件 | - |
| onClickRgIconSt | 从右到左第一个图标类型点击事件 | - |
| onClickRgIconNd | 从右到左第二个图标类型点击事件 | - |
| onClickTitle | 标题点击事件 | - |
45 changes: 26 additions & 19 deletions packages/taro-ui/rn/components/nav-bar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
this.props.onClickRgIconNd && this.props.onClickRgIconNd(event)
}

private handleClickTitle(event: ITouchEvent): void {
this.props.onClickTitle && this.props.onClickTitle(event)
}

public render(): JSX.Element {
const {
customStyle,
Expand All @@ -33,7 +37,7 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
leftText,
title,
rightFirstIconType,
rightSecondIconType,
rightSecondIconType
} = this.props
const linkStyle: any = {
// color,
Expand All @@ -49,7 +53,7 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
prefixClass: 'at-icon',
value: '',
color: '',
size: 24,
size: 24
}

const leftIconInfo =
Expand All @@ -61,9 +65,9 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
'at-nav-bar__at-icon',
{
[`${leftIconInfo.prefixClass}-${leftIconInfo.value}`]:
leftIconInfo.value,
leftIconInfo.value
},
leftIconInfo.className,
leftIconInfo.className
)

const rightFirstIconInfo =
Expand All @@ -75,9 +79,9 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
'at-nav-bar__at-icon',
{
[`${rightFirstIconInfo.prefixClass}-${rightFirstIconInfo.value}`]:
rightFirstIconInfo.value,
rightFirstIconInfo.value
},
rightFirstIconInfo.className,
rightFirstIconInfo.className
)

const rightSecondIconInfo =
Expand All @@ -89,9 +93,9 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
'at-nav-bar__at-icon',
{
[`${rightSecondIconInfo.prefixClass}-${rightSecondIconInfo.value}`]:
rightSecondIconInfo.value,
rightSecondIconInfo.value
},
rightSecondIconInfo.className,
rightSecondIconInfo.className
)

return (
Expand All @@ -100,9 +104,9 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
{
'at-nav-bar': true,
'at-nav-bar--fixed': fixed,
'at-nav-bar--no-border': !border,
'at-nav-bar--no-border': !border
},
className,
className
)}
style={customStyle}
>
Expand All @@ -120,7 +124,7 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
customStyle={Object.assign(
{},
linkStyle,
leftIconInfo.customStyle,
leftIconInfo.customStyle
)}
/>
)}
Expand All @@ -132,14 +136,17 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
{leftText}
</Text>
</View>
<View className='at-nav-bar__title'>
<View
className='at-nav-bar__title'
onClick={this.handleClickTitle.bind(this)}
>
{title || this.props.children}
</View>
<View className='at-nav-bar__right-view'>
<View
className={classNames({
'at-nav-bar__container': true,
'at-nav-bar__container--hide': !rightSecondIconType,
'at-nav-bar__container--hide': !rightSecondIconType
})}
style={linkStyle}
onClick={this.handleClickNd.bind(this)}
Expand All @@ -153,7 +160,7 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
customStyle={Object.assign(
{},
linkStyle,
leftIconInfo.customStyle,
leftIconInfo.customStyle
)}
/>
)}
Expand All @@ -164,7 +171,7 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
<View
className={classNames({
'at-nav-bar__container': true,
'at-nav-bar__container--hide': !rightFirstIconType,
'at-nav-bar__container--hide': !rightFirstIconType
})}
style={linkStyle}
onClick={this.handleClickSt.bind(this)}
Expand All @@ -178,7 +185,7 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
customStyle={Object.assign(
{},
linkStyle,
leftIconInfo.customStyle,
leftIconInfo.customStyle
)}
/>
)}
Expand All @@ -202,7 +209,7 @@ AtNavBar.defaultProps = {
leftText: '',
title: '',
rightFirstIconType: '',
rightSecondIconType: '',
rightSecondIconType: ''
}

AtNavBar.propTypes = {
Expand All @@ -217,9 +224,9 @@ AtNavBar.propTypes = {
rightFirstIconType: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
rightSecondIconType: PropTypes.oneOfType([
PropTypes.string,
PropTypes.object,
PropTypes.object
]),
onClickLeftIcon: PropTypes.func,
onClickRgIconSt: PropTypes.func,
onClickRgIconNd: PropTypes.func,
onClickRgIconNd: PropTypes.func
}
18 changes: 14 additions & 4 deletions packages/taro-ui/src/components/nav-bar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
this.props.onClickRgIconNd && this.props.onClickRgIconNd(event)
}

private handleClickTitle(event: ITouchEvent): void {
this.props.onClickTitle && this.props.onClickTitle(event)
}

public render(): JSX.Element {
const {
customStyle,
Expand Down Expand Up @@ -53,7 +57,8 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
const leftIconClass = classNames(
leftIconInfo.prefixClass,
{
[`${leftIconInfo.prefixClass}-${leftIconInfo.value}`]: leftIconInfo.value
[`${leftIconInfo.prefixClass}-${leftIconInfo.value}`]:
leftIconInfo.value
},
leftIconInfo.className
)
Expand All @@ -65,7 +70,8 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
const rightFirstIconClass = classNames(
rightFirstIconInfo.prefixClass,
{
[`${rightFirstIconInfo.prefixClass}-${rightFirstIconInfo.value}`]: rightFirstIconInfo.value
[`${rightFirstIconInfo.prefixClass}-${rightFirstIconInfo.value}`]:
rightFirstIconInfo.value
},
rightFirstIconInfo.className
)
Expand All @@ -77,7 +83,8 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
const rightSecondIconClass = classNames(
rightSecondIconInfo.prefixClass,
{
[`${rightSecondIconInfo.prefixClass}-${rightSecondIconInfo.value}`]: rightSecondIconInfo.value
[`${rightSecondIconInfo.prefixClass}-${rightSecondIconInfo.value}`]:
rightSecondIconInfo.value
},
rightSecondIconInfo.className
)
Expand Down Expand Up @@ -115,7 +122,10 @@ export default class AtNavBar extends React.Component<AtNavBarProps> {
)}
<Text className='at-nav-bar__text'>{leftText}</Text>
</View>
<View className='at-nav-bar__title'>
<View
className='at-nav-bar__title'
onClick={this.handleClickTitle.bind(this)}
>
{title || this.props.children}
</View>
<View className='at-nav-bar__right-view'>
Expand Down

0 comments on commit 369e71e

Please sign in to comment.