@oceanbase/design 0.4.12 → 0.4.14

package/lib/tabs/index.d.ts

@@ -2,15 +2,19 @@ import React from 'react';
 import type { TabsProps as AntTabsProps, TabsPosition as AntTabsPosition } from 'antd/es/tabs';
 import type { Tab as AntTab } from 'rc-tabs/es/interface';
 import type { TabPaneProps } from './TabPane';
+import type { BadgeProps } from '../badge';
 export * from 'antd/es/tabs';
 export type { TabPaneProps };
+type BadgeType = BadgeProps | BadgeProps['count'];
 export interface AntTabOptional extends Omit<AntTab, 'key' | 'label'> {
     key?: string;
     label?: React.ReactNode;
 }
 export type Tab = {
+    /** @deprecated please use `badge` instead */
     tag?: React.ReactNode;
     divider?: boolean;
+    badge?: BadgeType;
 } & (AntTab | AntTabOptional);
 export interface TabsProps extends Omit<AntTabsProps, 'items'> {
     items?: Tab[];

package/lib/tabs/index.js

@@ -37,11 +37,15 @@ var import_util = require("@oceanbase/util");
 var import_antd = require("antd");
 var import_react = __toESM(require("react"));
 var import_classnames = __toESM(require("classnames"));
+var import_badge = __toESM(require("../badge"));
 var import_config_provider = __toESM(require("../config-provider"));
 var import_useLegacyItems = __toESM(require("./hooks/useLegacyItems"));
 var import_style = __toESM(require("./style"));
 var import_TabPane = __toESM(require("./TabPane"));
 __reExport(tabs_exports, require("antd/es/tabs"), module.exports);
+var isReactNode = (item) => {
+  return import_react.default.isValidElement(item);
+};
 var Tabs = ({
   children,
   items,
@@ -57,6 +61,15 @@ var Tabs = ({
   const tabsCls = (0, import_classnames.default)(className);
   const isHorizontal = !tabPosition || tabPosition === "top" || tabPosition === "bottom";
   const dividerList = (items == null ? void 0 : items.filter((item) => item.divider)) || [];
+  const renderBadge = (0, import_react.useCallback)(
+    (badge) => {
+      if (typeof badge === "object" && !isReactNode(badge)) {
+        return /* @__PURE__ */ import_react.default.createElement(import_badge.default, { ...badge, className: (0, import_classnames.default)(`${prefixCls}-tab-badge`, badge.className) });
+      }
+      return /* @__PURE__ */ import_react.default.createElement(import_badge.default, { className: `${prefixCls}-tab-badge`, count: badge });
+    },
+    [prefixCls]
+  );
   let newItems = (0, import_useLegacyItems.default)(items, children);
   newItems = newItems == null ? void 0 : newItems.map((item) => {
     if (!(0, import_util.isNullValue)(item.divider)) {
@@ -72,10 +85,10 @@ var Tabs = ({
         ),
         disabled: true
       };
-    } else if (!(0, import_util.isNullValue)(item.tag)) {
+    } else if (!(0, import_util.isNullValue)(item.tag) || !(0, import_util.isNullValue)(item.badge)) {
       return {
         ...item,
-        label: /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { size: 4 }, item.label, /* @__PURE__ */ import_react.default.createElement(import_antd.Tag, { bordered: false, className: `${prefixCls}-tab-tag` }, item.tag))
+        label: /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { size: 4 }, item.label, item.badge && renderBadge(item.badge), !(0, import_util.isNullValue)(item.tag) && /* @__PURE__ */ import_react.default.createElement(import_antd.Tag, { bordered: false, className: `${prefixCls}-tab-tag` }, item.tag))
       };
     }
     return item;

package/lib/tabs/style/index.js

@@ -25,7 +25,7 @@ __export(style_exports, {
 module.exports = __toCommonJS(style_exports);
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genTabsStyle = (token) => {
-  const { antCls, componentCls, colorInfo, colorInfoBg, colorTextSecondary } = token;
+  const { antCls, componentCls, colorInfo, colorInfoBg, colorTextSecondary, colorFillQuaternary } = token;
   return {
     [componentCls]: {
       [`&${componentCls}-top, &${componentCls}-bottom`]: {
@@ -35,6 +35,7 @@ var genTabsStyle = (token) => {
         }
       },
       [`${componentCls}-tab`]: {
+        /** @deprecated */
         [`${componentCls}-tab-tag`]: {
           color: colorTextSecondary,
           fontFamily: "PingFangSC",
@@ -42,12 +43,24 @@ var genTabsStyle = (token) => {
           borderRadius: 12,
           marginInlineEnd: 0,
           height: 20
+        },
+        [`${componentCls}-tab-badge`]: {
+          [`>${antCls}-badge-count`]: {
+            color: colorTextSecondary,
+            backgroundColor: colorFillQuaternary
+          },
+          borderRadius: 12
         }
       },
       [`${componentCls}-tab-active`]: {
+        /** @deprecated */
         [`${componentCls}-tab-tag`]: {
           color: colorInfo,
           backgroundColor: colorInfoBg
+        },
+        [`${componentCls}-tab-badge >${antCls}-badge-count`]: {
+          color: colorInfo,
+          backgroundColor: colorInfoBg
         }
       },
       [`${componentCls}-tab[data-node-key^=divider-]`]: {

package/lib/tag/style/index.js

@@ -59,7 +59,6 @@ var genTagStyle = (token) => {
       borderColor: getTagBorderColor(token.colorBorder),
       fontSize: token.fontSizeSM,
       [`${antCls}-typography`]: {
-        fontSize: token.fontSizeSM,
         [`${componentCls}-icon`]: {
           marginInlineEnd: paddingInline
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/design",
-  "version": "0.4.12",
+  "version": "0.4.14",
   "description": "The Design System of OceanBase",
   "keywords": [
     "oceanbase",
@@ -39,14 +39,14 @@
     "build": "father build && cp src/style/reset.css dist/"
   },
   "dependencies": {
-    "@ant-design/cssinjs": "^1.23.0",
+    "@ant-design/cssinjs": "^1.24.0",
     "@ctrl/tinycolor": "^4.1.0",
     "@inline-svg-unique-id/react": "^1.2.3",
     "@oceanbase/aliyun-theme": "^0.1.6",
     "@oceanbase/icons": "^0.4.7",
     "@oceanbase/util": "^0.4.4",
     "ahooks": "^2.10.14",
-    "antd": "^5.26.4",
+    "antd": "^5.26.7",
     "classnames": "^2.5.1",
     "lodash": "^4.17.21",
     "lottie-web": "^5.13.0",
@@ -66,5 +66,5 @@
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
-  "gitHead": "eea14051a255a8820d64e80e4c0d08527002477f"
+  "gitHead": "e5b9f06614070e38c9d6a77244da2320679e3ffa"
 }