From 9fdc1d93cdceade55723d64822f0746caa06f1cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=A8=E6=9D=AA?= <mumiao@dtstack.com>
Date: Thu, 3 Dec 2020 15:08:40 +0800
Subject: [PATCH] feat: extend the ClassNames interface

---
 src/common/className.ts           | 25 ++++++++++++++++++++++---
 src/components/tabs/tabButton.tsx |  2 +-
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/common/className.ts b/src/common/className.ts
index 730915869..91cdc903c 100644
--- a/src/common/className.ts
+++ b/src/common/className.ts
@@ -10,10 +10,29 @@ export function prefixClaName(name: string, prefix: string = APP_PREFIX) {
     return name ? `${prefix}-${name}` : '';
 }
 
-export function classNames(...names) {
-    return names.filter((name) => !!name).join(' ');
+export function classNames(...args) {
+    let classList: string[] = [];
+    for (let arg of args) {
+        if (!arg) continue;
+        let argType = typeof arg;
+        if (argType === 'string' || argType === 'number') {
+            classList.push(arg);
+            continue
+        }
+        if (argType === 'object') {
+            if (arg.toString !== Object.prototype.toString) {
+                classList.push(arg.toString());
+                continue
+            }
+            for (let key in arg) {
+                if (Object.hasOwnProperty.call(arg, key) && arg[key]) {
+                    classList.push(key);
+                }
+            }
+        }
+    }
+    return classList.join(' ');
 }
-
 /**
  * Element names may consist of Latin letters, digits, dashes and underscores.
  * CSS class is formed as block name plus two underscores plus element name: .block__elem
diff --git a/src/components/tabs/tabButton.tsx b/src/components/tabs/tabButton.tsx
index 88f80c651..f01f1fefd 100644
--- a/src/components/tabs/tabButton.tsx
+++ b/src/components/tabs/tabButton.tsx
@@ -44,7 +44,7 @@ export default function TabButton({
         <div
             className={classNames(
                 'tab-button',
-                active ? 'tab-button--active' : '',
+                { 'tab-button--active': true },
                 className
             )}
             onClick={handleClick}