|
|
@@ -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'
|