From 369e71ee6852748e654eee3e6edebdf34a8d042b Mon Sep 17 00:00:00 2001 From: smileying Date: Wed, 14 Jun 2023 21:00:54 +0800 Subject: [PATCH] =?UTF-8?q?feat(nav-bar):=20=E5=A2=9E=E5=8A=A0=E6=A0=87?= =?UTF-8?q?=E9=A2=98=E7=82=B9=E5=87=BB=E4=BA=8B=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/taro-ui-docs/markdown/navbar.md | 1 + .../taro-ui/rn/components/nav-bar/index.tsx | 45 +++++++++++-------- .../taro-ui/src/components/nav-bar/index.tsx | 18 ++++++-- 3 files changed, 41 insertions(+), 23 deletions(-) diff --git a/packages/taro-ui-docs/markdown/navbar.md b/packages/taro-ui-docs/markdown/navbar.md index a7ecf045a..9c06b40d3 100644 --- a/packages/taro-ui-docs/markdown/navbar.md +++ b/packages/taro-ui-docs/markdown/navbar.md @@ -83,3 +83,4 @@ import { AtNavBar } from 'taro-ui' | onClickLeftIcon | 左边第一个图标类型点击事件 | - | | onClickRgIconSt | 从右到左第一个图标类型点击事件 | - | | onClickRgIconNd | 从右到左第二个图标类型点击事件 | - | +| onClickTitle | 标题点击事件 | - | \ No newline at end of file diff --git a/packages/taro-ui/rn/components/nav-bar/index.tsx b/packages/taro-ui/rn/components/nav-bar/index.tsx index 57302f4cf..021ccd509 100644 --- a/packages/taro-ui/rn/components/nav-bar/index.tsx +++ b/packages/taro-ui/rn/components/nav-bar/index.tsx @@ -22,6 +22,10 @@ export default class AtNavBar extends React.Component { 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, @@ -33,7 +37,7 @@ export default class AtNavBar extends React.Component { leftText, title, rightFirstIconType, - rightSecondIconType, + rightSecondIconType } = this.props const linkStyle: any = { // color, @@ -49,7 +53,7 @@ export default class AtNavBar extends React.Component { prefixClass: 'at-icon', value: '', color: '', - size: 24, + size: 24 } const leftIconInfo = @@ -61,9 +65,9 @@ export default class AtNavBar extends React.Component { 'at-nav-bar__at-icon', { [`${leftIconInfo.prefixClass}-${leftIconInfo.value}`]: - leftIconInfo.value, + leftIconInfo.value }, - leftIconInfo.className, + leftIconInfo.className ) const rightFirstIconInfo = @@ -75,9 +79,9 @@ export default class AtNavBar extends React.Component { 'at-nav-bar__at-icon', { [`${rightFirstIconInfo.prefixClass}-${rightFirstIconInfo.value}`]: - rightFirstIconInfo.value, + rightFirstIconInfo.value }, - rightFirstIconInfo.className, + rightFirstIconInfo.className ) const rightSecondIconInfo = @@ -89,9 +93,9 @@ export default class AtNavBar extends React.Component { 'at-nav-bar__at-icon', { [`${rightSecondIconInfo.prefixClass}-${rightSecondIconInfo.value}`]: - rightSecondIconInfo.value, + rightSecondIconInfo.value }, - rightSecondIconInfo.className, + rightSecondIconInfo.className ) return ( @@ -100,9 +104,9 @@ export default class AtNavBar extends React.Component { { '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} > @@ -120,7 +124,7 @@ export default class AtNavBar extends React.Component { customStyle={Object.assign( {}, linkStyle, - leftIconInfo.customStyle, + leftIconInfo.customStyle )} /> )} @@ -132,14 +136,17 @@ export default class AtNavBar extends React.Component { {leftText} - + {title || this.props.children} { customStyle={Object.assign( {}, linkStyle, - leftIconInfo.customStyle, + leftIconInfo.customStyle )} /> )} @@ -164,7 +171,7 @@ export default class AtNavBar extends React.Component { { customStyle={Object.assign( {}, linkStyle, - leftIconInfo.customStyle, + leftIconInfo.customStyle )} /> )} @@ -202,7 +209,7 @@ AtNavBar.defaultProps = { leftText: '', title: '', rightFirstIconType: '', - rightSecondIconType: '', + rightSecondIconType: '' } AtNavBar.propTypes = { @@ -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 } diff --git a/packages/taro-ui/src/components/nav-bar/index.tsx b/packages/taro-ui/src/components/nav-bar/index.tsx index bd6496ef4..7abfc2025 100644 --- a/packages/taro-ui/src/components/nav-bar/index.tsx +++ b/packages/taro-ui/src/components/nav-bar/index.tsx @@ -22,6 +22,10 @@ export default class AtNavBar extends React.Component { 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, @@ -53,7 +57,8 @@ export default class AtNavBar extends React.Component { const leftIconClass = classNames( leftIconInfo.prefixClass, { - [`${leftIconInfo.prefixClass}-${leftIconInfo.value}`]: leftIconInfo.value + [`${leftIconInfo.prefixClass}-${leftIconInfo.value}`]: + leftIconInfo.value }, leftIconInfo.className ) @@ -65,7 +70,8 @@ export default class AtNavBar extends React.Component { const rightFirstIconClass = classNames( rightFirstIconInfo.prefixClass, { - [`${rightFirstIconInfo.prefixClass}-${rightFirstIconInfo.value}`]: rightFirstIconInfo.value + [`${rightFirstIconInfo.prefixClass}-${rightFirstIconInfo.value}`]: + rightFirstIconInfo.value }, rightFirstIconInfo.className ) @@ -77,7 +83,8 @@ export default class AtNavBar extends React.Component { const rightSecondIconClass = classNames( rightSecondIconInfo.prefixClass, { - [`${rightSecondIconInfo.prefixClass}-${rightSecondIconInfo.value}`]: rightSecondIconInfo.value + [`${rightSecondIconInfo.prefixClass}-${rightSecondIconInfo.value}`]: + rightSecondIconInfo.value }, rightSecondIconInfo.className ) @@ -115,7 +122,10 @@ export default class AtNavBar extends React.Component { )} {leftText} - + {title || this.props.children}