feat(Tabbar): harmony 适配 (#2783)

xiaoyatong · web-flow · commit 064888276bc2 · 2024-11-21T19:55:55.000+08:00
diff --git a/src/config.json b/src/config.json
@@ -353,7 +353,7 @@
           "author": "hx"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "Tabbar",
           "type": "component",
           "cName": "标签栏",
diff --git a/src/packages/tabbaritem/tabbaritem.scss b/src/packages/tabbaritem/tabbaritem.scss
@@ -42,10 +42,20 @@
     color: $tabbar-active-color;
 
     .nut-tabbar-item-icon-box {
+      /* #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
@@ -4,6 +4,7 @@ import { View } from '@tarojs/components'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import Badge from '@/packages/badge/index.taro'
 import TabbarContext from '@/packages/tabbar/context'
+import addColorForHarmony from '@/utils/add-color-for-harmony'
 
 export interface TabbarItemProps extends BasicComponent {
   title: ReactNode
@@ -83,13 +84,32 @@ export const TabbarItem: FunctionComponent<Partial<TabbarItemProps>> = (
       {icon ? (
         <>
           <Badge {...badgeProps}>
-            <View className={boxPrefix}>{icon}</View>
+            <View className={boxPrefix}>
+              {addColorForHarmony(
+                icon,
+                active ? ctx?.activeColor : ctx?.inactiveColor
+              )}
+            </View>
           </Badge>
-          <View className={titleClass}>{title}</View>
+          <View
+            className={titleClass}
+            style={{
+              color: active ? ctx?.activeColor : ctx?.inactiveColor,
+            }}
+          >
+            {title}
+          </View>
         </>
       ) : (
         <Badge {...badgeProps}>
-          <View className={titleClass}>{title}</View>
+          <View
+            className={titleClass}
+            style={{
+              color: active ? ctx?.activeColor : ctx?.inactiveColor,
+            }}
+          >
+            {title}
+          </View>
         </Badge>
       )}
     </View>
diff --git a/src/utils/add-color-for-harmony.ts b/src/utils/add-color-for-harmony.ts
@@ -11,7 +11,7 @@ interface ColorProps {
  * @param color - 要添加的颜色值（如：'#ff0000'）
  * @returns 处理后的 React 节点
  */
-function addColorForHarmony(maybeElement: ReactNode, color: string) {
+function addColorForHarmony(maybeElement: ReactNode, color?: string) {
   if (React.isValidElement(maybeElement) && harmony()) {
     return React.cloneElement<ColorProps>(maybeElement as ReactElement, {
       color,

Original file line number	Diff line number	Diff line change
`@@ -353,7 +353,7 @@`
`353`	`353`	`"author": "hx"`
`354`	`354`	`},`
`355`	`355`	`{`
`356`		`- "version": "2.0.0",`
	`356`	`+ "version": "3.0.0",`
`357`	`357`	`"name": "Tabbar",`
`358`	`358`	`"type": "component",`
`359`	`359`	`"cName": "标签栏",`
Original file line number	Diff line number	Diff line change
`@@ -42,10 +42,20 @@`
`42`	`42`	`color: $tabbar-active-color;`
`43`	`43`
`44`	`44`	`.nut-tabbar-item-icon-box {`
	`45`	`+ /* #ifdef harmony*/`
	`46`	`+ color: $tabbar-active-color;`
	`47`	`+ /* #endif*/`
	`48`	`+ /* #ifndef harmony*/`
`45`	`49`	`color: inherit;`
	`50`	`+ /* #endif*/`
`46`	`51`
`47`	`52`	`.nut-icon {`
	`53`	`+ /* #ifdef harmony*/`
	`54`	`+ color: $tabbar-active-color;`
	`55`	`+ /* #endif*/`
	`56`	`+ /* #ifndef harmony*/`
`48`	`57`	`color: inherit;`
	`58`	`+ /* #endif*/`
`49`	`59`	`}`
`50`	`60`	`}`
`51`	`61`	`}`