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

jdf2e · Nov 21, 2024 · 0648882 · 0648882
1 parent beb7be2
commit 0648882
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 5 deletions.
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,