From 66a840ac3b1533541da142567c31376b4b7bd183 Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Thu, 6 Feb 2025 15:34:54 +0800 Subject: [PATCH 1/2] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=B8=B2?= =?UTF-8?q?=E6=9F=93=E8=8A=82=E7=82=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/badge/badge.taro.tsx | 31 +++++++++--------- src/packages/badge/badge.tsx | 31 +++++++++--------- src/packages/tabbaritem/tabbaritem.scss | 12 ++----- src/packages/tabbaritem/tabbaritem.taro.tsx | 35 ++++++++++----------- src/packages/tabbaritem/tabbaritem.tsx | 10 +++--- 5 files changed, 54 insertions(+), 65 deletions(-) diff --git a/src/packages/badge/badge.taro.tsx b/src/packages/badge/badge.taro.tsx index 31a1d8cf10..1e37dee713 100644 --- a/src/packages/badge/badge.taro.tsx +++ b/src/packages/badge/badge.taro.tsx @@ -36,19 +36,17 @@ export const Badge: FunctionComponent> = (props) => { right, fill, size, - } = { - ...defaultProps, - ...props, - } + } = { ...defaultProps, ...props } + const classPrefix = 'nut-badge' const isHarmony = harmony() const classes = classNames(classPrefix, className) const badgeRef = useRef(null) const [contentStyle, setContentStyle] = useState({}) - function content() { - if (dot || typeof value === 'object' || value === 0) return null - if (typeof value === 'number' && typeof max === 'number') { + function getContent() { + if (dot || value === 0) return null + if (typeof value === 'number') { return max < value ? `${max}+` : `${value}` } return value @@ -70,7 +68,7 @@ export const Badge: FunctionComponent> = (props) => { [`${classPrefix}-sup`]: isNumber() || isString() || dot, [`${classPrefix}-number`]: isNumber(), [`${classPrefix}-one`]: - typeof content() === 'string' && `${content()}`?.length === 1, + typeof getContent() === 'string' && `${getContent()}`?.length === 1, [`${classPrefix}-dot`]: dot, [`${classPrefix}-dot-${size}`]: dot, [`${classPrefix}-${fill}`]: fill === 'outline', @@ -82,13 +80,14 @@ export const Badge: FunctionComponent> = (props) => { getPositionStyle() } }, []) + const getPositionStyle = async () => { - const style: CSSProperties = {} - style.top = pxTransform(Number(top) || 0) - const dir = rtl ? 'left' : 'right' - style[dir] = isHarmony - ? pxTransform(Number(right)) - : `${Number(right) || 0}px` + const style: CSSProperties = { + top: pxTransform(Number(top) || 0), + [rtl ? 'left' : 'right']: isHarmony + ? pxTransform(Number(right)) + : `${Number(right) || 0}px`, + } setContentStyle(style) } @@ -106,9 +105,9 @@ export const Badge: FunctionComponent> = (props) => { )} {children} - {!isIcon() && ( + {!isIcon() && (getContent() || dot) && ( - {content()} + {getContent()} )} diff --git a/src/packages/badge/badge.tsx b/src/packages/badge/badge.tsx index edc527ec87..fe39349873 100644 --- a/src/packages/badge/badge.tsx +++ b/src/packages/badge/badge.tsx @@ -14,6 +14,7 @@ const defaultProps = { fill: 'solid', size: 'large', } as BadgeProps + export const Badge: FunctionComponent> = (props) => { const rtl = useRtl() const { @@ -27,16 +28,14 @@ export const Badge: FunctionComponent> = (props) => { right, fill, size, - } = { - ...defaultProps, - ...props, - } + } = { ...defaultProps, ...props } + const classPrefix = 'nut-badge' const classes = classNames(classPrefix, className) - function content() { - if (dot || typeof value === 'object' || value === 0) return null - if (typeof value === 'number' && typeof max === 'number') { + const getContent = () => { + if (dot || value === 0) return null + if (typeof value === 'number') { return max < value ? `${max}+` : `${value}` } return value @@ -58,19 +57,17 @@ export const Badge: FunctionComponent> = (props) => { [`${classPrefix}-sup`]: isNumber() || isString() || dot, [`${classPrefix}-number`]: isNumber(), [`${classPrefix}-one`]: - typeof content() === 'string' && `${content()}`?.length === 1, + typeof getContent() === 'string' && `${getContent()}`?.length === 1, [`${classPrefix}-dot`]: dot, [`${classPrefix}-dot-${size}`]: dot, [`${classPrefix}-${fill}`]: fill === 'outline', [`${classPrefix}-content`]: children, }) - const getPositionStyle = () => { - const style: CSSProperties = {} - style.top = `${Number(top) || 0}px` - const dir = rtl ? 'left' : 'right' - style[dir] = `${Number(right) || parseFloat(String(right)) || 0}px` - return style - } + + const getPositionStyle = (): CSSProperties => ({ + top: `${Number(top) || 0}px`, + [rtl ? 'left' : 'right']: `${Number(right) || 0}px`, + }) return (
@@ -86,9 +83,9 @@ export const Badge: FunctionComponent> = (props) => {
)} {children} - {!isIcon() && ( + {!isIcon() && (getContent() || dot) && (
- {content()} + {getContent()}
)} diff --git a/src/packages/tabbaritem/tabbaritem.scss b/src/packages/tabbaritem/tabbaritem.scss index 537a261b52..89039a35c2 100644 --- a/src/packages/tabbaritem/tabbaritem.scss +++ b/src/packages/tabbaritem/tabbaritem.scss @@ -43,22 +43,14 @@ &-active { color: $tabbar-active-color; - .nut-tabbar-item-icon-box { + .nut-tabbar-item-icon-box, + .nut-icon { /* #ifdef harmony*/ color: $tabbar-active-color; /* #endif*/ /* #ifndef harmony*/ color: inherit; /* #endif*/ - - .nut-icon { - /* #ifdef harmony*/ - color: $tabbar-active-color; - /* #endif*/ - /* #ifndef harmony*/ - color: inherit; - /* #endif*/ - } } } } diff --git a/src/packages/tabbaritem/tabbaritem.taro.tsx b/src/packages/tabbaritem/tabbaritem.taro.tsx index 86d2f290f3..8ca4f03da5 100644 --- a/src/packages/tabbaritem/tabbaritem.taro.tsx +++ b/src/packages/tabbaritem/tabbaritem.taro.tsx @@ -71,6 +71,21 @@ export const TabbarItem: FunctionComponent> = ( color: ctx?.activeColor, } + const renderTitleText = () => { + return ( + title && ( + + {title} + + ) + ) + } + return ( > = ( )} - - {title} - + {renderTitleText()} ) : ( - - - {title} - - + {renderTitleText()} )} ) diff --git a/src/packages/tabbaritem/tabbaritem.tsx b/src/packages/tabbaritem/tabbaritem.tsx index df37c51f10..a56225e357 100644 --- a/src/packages/tabbaritem/tabbaritem.tsx +++ b/src/packages/tabbaritem/tabbaritem.tsx @@ -69,6 +69,10 @@ export const TabbarItem: FunctionComponent> = ( color: ctx?.activeColor, } + const renderTitleText = () => { + return title &&
{title}
+ } + return (
> = (
{icon}
 -
{title}
+ {renderTitleText()} ) : ( - -
{title}
- + {renderTitleText()} )}
) From 3f7c730d89da7d40205d045fdc7bc6a9d2e2d069 Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Thu, 6 Feb 2025 18:39:06 +0800 Subject: [PATCH 2/2] =?UTF-8?q?test:=20=E4=BF=AE=E6=94=B9=E5=8D=95?= =?UTF-8?q?=E6=B5=8Bsnap?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap b/src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap index 65b96e1b0b..0cac7282f9 100644 --- a/src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap +++ b/src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap @@ -1,5 +1,5 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`should only render title 1`] = `"
首页
11
分类
逛
"`; +exports[`should only render title 1`] = `"
首页
11
分类
逛
"`; -exports[`should render fixed element when using bottom prop 1`] = `"
首页
分类
"`; +exports[`should render fixed element when using bottom prop 1`] = `"
首页
分类
"`;