Browse Source

♻️ refactor(tab-bar): 替换 clsx 导入为内部工具函数

- 移除对 clsx 外部库的直接导入
- 使用内部工具函数 cn 作为 clsx 的替代品
yourname 4 weeks ago
parent
commit
1071ed7ac3

+ 8 - 8
mini-ui-packages/mini-shared-ui-components/src/components/tab-bar.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { View, Text } from '@tarojs/components'
-import clsx from 'clsx'
+import { cn } from '../utils/cn'
 
 export interface TabBarItem {
   key: string
@@ -50,7 +50,7 @@ const TabBar = React.forwardRef<HTMLDivElement, TabBarProps>(({
   return (
     <View
       ref={ref}
-      className={clsx(
+      className={cn(
         'tab-bar',
         fixed && 'fixed bottom-0 left-0 right-0',
         safeArea && 'pb-safe',
@@ -69,7 +69,7 @@ const TabBar = React.forwardRef<HTMLDivElement, TabBarProps>(({
           return (
             <View
               key={item.key}
-              className={clsx(
+              className={cn(
                 'flex-1 flex flex-col items-center justify-center',
                 'px-2 py-1',
                 'cursor-pointer',
@@ -81,7 +81,7 @@ const TabBar = React.forwardRef<HTMLDivElement, TabBarProps>(({
               <View className="relative">
                 {(item.iconClass || item.icon) && (
                   <View
-                    className={clsx(
+                    className={cn(
                       'mb-1',
                       'flex items-center justify-center',
                       item.iconClass ? 'w-6 h-6' : 'text-2xl',
@@ -93,7 +93,7 @@ const TabBar = React.forwardRef<HTMLDivElement, TabBarProps>(({
                   >
                     {item.iconClass ? (
                       <View
-                        className={clsx(
+                        className={cn(
                           isActive && item.selectedIconClass
                             ? item.selectedIconClass
                             : item.iconClass,
@@ -108,7 +108,7 @@ const TabBar = React.forwardRef<HTMLDivElement, TabBarProps>(({
 
                 {item.badge && (
                   <View
-                    className={clsx(
+                    className={cn(
                       'absolute -top-1 -right-2',
                       'bg-red-500 text-white text-xs',
                       'rounded-full px-1.5 py-0.5',
@@ -121,7 +121,7 @@ const TabBar = React.forwardRef<HTMLDivElement, TabBarProps>(({
 
                 {item.dot && (
                   <View
-                    className={clsx(
+                    className={cn(
                       'absolute -top-1 -right-1',
                       'w-2 h-2 bg-red-500 rounded-full'
                     )}
@@ -130,7 +130,7 @@ const TabBar = React.forwardRef<HTMLDivElement, TabBarProps>(({
               </View>
 
               <Text
-                className={clsx(
+                className={cn(
                   'text-xs',
                   'leading-tight',
                   isActive ? 'font-medium' : 'font-normal'