@oceanbase/design 0.2.4 → 0.2.5

package/es/card/index.js

@@ -68,9 +68,8 @@ var Card = function Card(_ref) {
     tabPosition: tabProps === null || tabProps === void 0 ? void 0 : tabProps.tabPosition,
     containerRef: ref
   });
-  return wrapSSR( /*#__PURE__*/React.createElement("div", {
-    ref: ref
-  }, /*#__PURE__*/React.createElement(AntCard, _extends({
+  return wrapSSR( /*#__PURE__*/React.createElement(AntCard, _extends({
+    ref: ref,
     tabList: newTabList,
     defaultActiveTabKey: defaultActiveTabKey,
     activeTabKey: activeTabKey,
@@ -81,7 +80,7 @@ var Card = function Card(_ref) {
     tabProps: tabProps,
     prefixCls: customizePrefixCls,
     className: cardCls
-  }, restProps), children)));
+  }, restProps), children));
 };
 Card.Grid = AntCard.Grid;
 Card.Meta = AntCard.Meta;

package/es/card/style/index.js

@@ -10,6 +10,7 @@ export var genCardStyle = function genCardStyle(token) {
   var _$concat$concat, _ref;
   var componentCls = token.componentCls,
     tabsComponentCls = token.tabsComponentCls,
+    tabsPrefixCls = token.tabsPrefixCls,
     padding = token.padding,
     paddingSM = token.paddingSM,
     paddingLG = token.paddingLG;
@@ -19,12 +20,12 @@ export var genCardStyle = function genCardStyle(token) {
     padding: "0 ".concat(paddingLG, "px ").concat(padding, "px ").concat(paddingLG, "px")
   }), _$concat$concat)), _defineProperty(_ref, "".concat(componentCls, "-small").concat(componentCls, "-no-divider"), _defineProperty({}, "".concat(componentCls, "-body"), {
     padding: "0 ".concat(paddingSM, "px 12px ").concat(paddingSM, "px")
-  })), _defineProperty(_ref, "".concat(componentCls).concat(componentCls, "-contain-tabs"), _defineProperty({}, "".concat(componentCls, "-head"), _defineProperty({
+  })), _defineProperty(_ref, "".concat(componentCls).concat(componentCls, "-contain-tabs"), _defineProperty({}, "".concat(componentCls, "-head"), _objectSpread({
     // 包含页签时，去掉 head 的底部分割线
     borderBottom: 'none'
-  }, tabsComponentCls, _defineProperty({}, "&".concat(tabsComponentCls, "-top, &").concat(tabsComponentCls, "-bottom"), _defineProperty({}, "".concat(tabsComponentCls, "-nav::before"), {
-    // 包含位置为 top 和 bottom 的页签时，去掉 Tabs 的分割线
-    border: 'none'
+  }, genTagStyle(_objectSpread(_objectSpread({}, token), {}, {
+    componentCls: tabsComponentCls,
+    prefixCls: tabsPrefixCls
   }))))), _ref;
 };
 export default (function (prefixCls, tabsPrefixCls) {
@@ -32,9 +33,6 @@ export default (function (prefixCls, tabsPrefixCls) {
     return [genCardStyle(_objectSpread(_objectSpread({}, token), {}, {
       tabsComponentCls: ".".concat(tabsPrefixCls),
       tabsPrefixCls: tabsPrefixCls
-    })), genTagStyle(_objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(tabsPrefixCls),
-      prefixCls: tabsPrefixCls
     }))];
   });
   return useStyle(prefixCls);

package/es/tabs/hooks/useInkBar.d.ts

@@ -0,0 +1,12 @@
+import type { SizeType } from 'antd/es/config-provider/SizeContext';
+import type { TabsPosition, TabsType } from 'antd/es/tabs';
+import type { MutableRefObject } from 'react';
+declare const _default: ({ prefixCls, activeKey, size, type, tabPosition, containerRef, }: {
+    prefixCls: string;
+    activeKey: string;
+    size: SizeType;
+    type: TabsType;
+    tabPosition: TabsPosition;
+    containerRef: MutableRefObject<HTMLDivElement>;
+}) => void;
+export default _default;

package/es/tabs/hooks/useInkBar.js

@@ -23,8 +23,8 @@ export default (function (_ref) {
     var horizontalOffset = 8;
     setTimeout(function () {
       if ((!type || type === 'line') && inkBarNode) {
-        // 水平布局，如果 inkbar 宽度 > 32，则两侧各减去 8px，并保持水平居中
-        if (isHorizontal && (activeTabNode === null || activeTabNode === void 0 ? void 0 : activeTabNode.offsetWidth) > 32) {
+        // 水平布局，如果 inkbar 宽度 >= 24，则两侧各减去 8px，并保持水平居中
+        if (isHorizontal && (activeTabNode === null || activeTabNode === void 0 ? void 0 : activeTabNode.offsetWidth) >= 24) {
           inkBarNode.style.width = "".concat((activeTabNode === null || activeTabNode === void 0 ? void 0 : activeTabNode.offsetWidth) - horizontalOffset * 2, "px");
           inkBarNode.style.marginLeft = "".concat(horizontalOffset, "px");
           inkBarNode.style.marginTop = '0px';

package/es/tabs/index.js

@@ -72,9 +72,8 @@ var Tabs = function Tabs(_ref) {
     tabPosition: tabPosition,
     containerRef: ref
   });
-  return wrapSSR( /*#__PURE__*/React.createElement("div", {
-    ref: ref
-  }, /*#__PURE__*/React.createElement(AntTabs, _extends({
+  return wrapSSR( /*#__PURE__*/React.createElement(AntTabs, _extends({
+    ref: ref,
     items: newItems,
     defaultActiveKey: defaultActiveKey,
     activeKey: activeKey,
@@ -88,7 +87,7 @@ var Tabs = function Tabs(_ref) {
     tabBarGutter: !type || type === 'line' ? isHorizontal ? 24 : 0 : undefined,
     prefixCls: customizePrefixCls,
     className: tabsCls
-  }, restProps))));
+  }, restProps)));
 };
 Tabs.TabPane = TabPane;
 if (process.env.NODE_ENV !== 'production') {

package/es/tabs/style/index.d.ts

@@ -0,0 +1,8 @@
+import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+export declare type TabsToken = FullToken<'Tabs'>;
+export declare const genTagStyle: GenerateStyle<TabsToken>;
+declare const _default: (prefixCls: string) => {
+    wrapSSR: (node: import("react").ReactNode) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    hashId: string;
+};
+export default _default;

package/es/tabs/style/index.js

@@ -4,12 +4,15 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
 export var genTagStyle = function genTagStyle(token) {
-  var _componentCls, _ref;
+  var _componentCls;
   var componentCls = token.componentCls,
     colorInfo = token.colorInfo,
     colorInfoBg = token.colorInfoBg,
     colorTextSecondary = token.colorTextSecondary;
-  return _ref = {}, _defineProperty(_ref, componentCls, (_componentCls = {}, _defineProperty(_componentCls, "".concat(componentCls, "-tab"), _defineProperty({}, "".concat(componentCls, "-tab-tag"), {
+  return _defineProperty({}, componentCls, (_componentCls = {}, _defineProperty(_componentCls, "&".concat(componentCls, "-top, &").concat(componentCls, "-bottom"), _defineProperty({}, "".concat(componentCls, "-nav::before"), {
+    // 页签位置为 top 和 bottom 时，去掉分割线
+    border: 'none'
+  })), _defineProperty(_componentCls, "".concat(componentCls, "-tab"), _defineProperty({}, "".concat(componentCls, "-tab-tag"), {
     color: colorTextSecondary,
     fontFamily: 'PingFangSC',
     fontSize: 12,
@@ -22,10 +25,7 @@ export var genTagStyle = function genTagStyle(token) {
   })), _defineProperty(_componentCls, "".concat(componentCls, "-ink-bar"), {
     // inkbar 带圆角
     borderRadius: '1px'
-  }), _componentCls)), _defineProperty(_ref, componentCls, _defineProperty({}, "&".concat(componentCls, "-top, &").concat(componentCls, "-bottom"), _defineProperty({}, "".concat(componentCls, "-nav::before"), {
-    // 页签位置为 top 和 bottom 时，去掉分割线
-    border: 'none'
-  }))), _ref;
+  }), _componentCls));
 };
 export default (function (prefixCls) {
   var useStyle = genComponentStyleHook('Tabs', function (token) {

package/lib/card/index.js

@@ -86,9 +86,10 @@ var Card = ({
     containerRef: ref
   });
   return wrapSSR(
-    /* @__PURE__ */ import_react.default.createElement("div", { ref }, /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement(
       import_antd.Card,
       {
+        ref,
         tabList: newTabList,
         defaultActiveTabKey,
         activeTabKey,
@@ -102,7 +103,7 @@ var Card = ({
         ...restProps
       },
       children
-    ))
+    )
   );
 };
 Card.Grid = import_antd.Card.Grid;

package/lib/card/style/index.js

@@ -26,7 +26,7 @@ module.exports = __toCommonJS(style_exports);
 var import_style = require("../../tabs/style");
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genCardStyle = (token) => {
-  const { componentCls, tabsComponentCls, padding, paddingSM, paddingLG } = token;
+  const { componentCls, tabsComponentCls, tabsPrefixCls, padding, paddingSM, paddingLG } = token;
   return {
     [`${componentCls}${componentCls}-no-divider`]: {
       [`${componentCls}-head`]: {
@@ -45,14 +45,11 @@ var genCardStyle = (token) => {
       [`${componentCls}-head`]: {
         // 包含页签时，去掉 head 的底部分割线
         borderBottom: "none",
-        [tabsComponentCls]: {
-          [`&${tabsComponentCls}-top, &${tabsComponentCls}-bottom`]: {
-            [`${tabsComponentCls}-nav::before`]: {
-              // 包含位置为 top 和 bottom 的页签时，去掉 Tabs 的分割线
-              border: "none"
-            }
-          }
-        }
+        ...(0, import_style.genTagStyle)({
+          ...token,
+          componentCls: tabsComponentCls,
+          prefixCls: tabsPrefixCls
+        })
       }
     }
   };
@@ -64,11 +61,6 @@ var style_default = (prefixCls, tabsPrefixCls) => {
         ...token,
         tabsComponentCls: `.${tabsPrefixCls}`,
         tabsPrefixCls
-      }),
-      (0, import_style.genTagStyle)({
-        ...token,
-        componentCls: `.${tabsPrefixCls}`,
-        prefixCls: tabsPrefixCls
       })
     ];
   });

package/lib/tabs/hooks/useInkBar.d.ts

@@ -0,0 +1,12 @@
+import type { SizeType } from 'antd/es/config-provider/SizeContext';
+import type { TabsPosition, TabsType } from 'antd/es/tabs';
+import type { MutableRefObject } from 'react';
+declare const _default: ({ prefixCls, activeKey, size, type, tabPosition, containerRef, }: {
+    prefixCls: string;
+    activeKey: string;
+    size: SizeType;
+    type: TabsType;
+    tabPosition: TabsPosition;
+    containerRef: MutableRefObject<HTMLDivElement>;
+}) => void;
+export default _default;

package/lib/tabs/hooks/useInkBar.js

@@ -46,7 +46,7 @@ var useInkBar_default = ({
     const horizontalOffset = 8;
     setTimeout(() => {
       if ((!type || type === "line") && inkBarNode) {
-        if (isHorizontal && (activeTabNode == null ? void 0 : activeTabNode.offsetWidth) > 32) {
+        if (isHorizontal && (activeTabNode == null ? void 0 : activeTabNode.offsetWidth) >= 24) {
           inkBarNode.style.width = `${(activeTabNode == null ? void 0 : activeTabNode.offsetWidth) - horizontalOffset * 2}px`;
           inkBarNode.style.marginLeft = `${horizontalOffset}px`;
           inkBarNode.style.marginTop = "0px";

package/lib/tabs/index.js

@@ -84,9 +84,10 @@ var Tabs = ({
     containerRef: ref
   });
   return wrapSSR(
-    /* @__PURE__ */ import_react.default.createElement("div", { ref }, /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement(
       import_antd.Tabs,
       {
+        ref,
         items: newItems,
         defaultActiveKey,
         activeKey,
@@ -102,7 +103,7 @@ var Tabs = ({
         className: tabsCls,
         ...restProps
       }
-    ))
+    )
   );
 };
 Tabs.TabPane = import_TabPane.default;

package/lib/tabs/style/index.d.ts

@@ -0,0 +1,8 @@
+import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+export declare type TabsToken = FullToken<'Tabs'>;
+export declare const genTagStyle: GenerateStyle<TabsToken>;
+declare const _default: (prefixCls: string) => {
+    wrapSSR: (node: import("react").ReactNode) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    hashId: string;
+};
+export default _default;

package/lib/tabs/style/index.js

@@ -28,6 +28,12 @@ var genTagStyle = (token) => {
   const { componentCls, colorInfo, colorInfoBg, colorTextSecondary } = token;
   return {
     [componentCls]: {
+      [`&${componentCls}-top, &${componentCls}-bottom`]: {
+        [`${componentCls}-nav::before`]: {
+          // 页签位置为 top 和 bottom 时，去掉分割线
+          border: "none"
+        }
+      },
       [`${componentCls}-tab`]: {
         [`${componentCls}-tab-tag`]: {
           color: colorTextSecondary,
@@ -48,14 +54,6 @@ var genTagStyle = (token) => {
         // inkbar 带圆角
         borderRadius: "1px"
       }
-    },
-    [componentCls]: {
-      [`&${componentCls}-top, &${componentCls}-bottom`]: {
-        [`${componentCls}-nav::before`]: {
-          // 页签位置为 top 和 bottom 时，去掉分割线
-          border: "none"
-        }
-      }
     }
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/design",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "The Design System for OceanBase",
   "keywords": [
     "OceanBase",
@@ -55,5 +55,5 @@
     "react": "^16.9.0",
     "react-dom": "^16.9.0"
   },
-  "gitHead": "1d271a0b8bfe3d9412495d63fa581a1eb9231ed9"
+  "gitHead": "fa3eea6c268ba32858604c74c853147006c20e98"
 }

package/es/_util/genComponentStyleHook.d.ts

@@ -1,9 +0,0 @@
-import type { CSSObject } from '@ant-design/cssinjs';
-import type { ComponentTokenMap } from 'antd/es/theme/interface';
-import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
-export declare type ComponentName = keyof ComponentTokenMap;
-export declare function genComponentStyleHook(componentName: ComponentName, styleFn: GenerateStyle<FullToken<ComponentName>>): (prefixCls: string) => {
-    wrapSSR: (node: import("react").ReactNode) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    hashId: string;
-};
-export type { CSSObject, FullToken, GenerateStyle };

package/es/index.d.ts

@@ -1,21 +0,0 @@
-import 'antd/dist/reset.css';
-export * from 'antd';
-export { version } from '../package.json';
-export { default as Alert } from './alert';
-export { default as Button } from './button';
-export { default as Card } from './card';
-export { default as ConfigProvider } from './config-provider';
-export { default as Descriptions } from './descriptions';
-export { default as Form } from './form';
-export { default as Modal } from './modal';
-export { message, notification, token } from './static-function';
-export { default as Table } from './table';
-export { default as Tabs } from './tabs';
-export { default as theme } from './theme';
-export { default as Tooltip } from './tooltip';
-declare const useToken: () => {
-    theme: import("@ant-design/cssinjs").Theme<import("antd/es/theme/internal").SeedToken, import("antd/es/theme/interface").MapToken>;
-    token: import("antd").GlobalToken;
-    hashId: string;
-};
-export { useToken };

package/lib/_util/genComponentStyleHook.d.ts

@@ -1,9 +0,0 @@
-import type { CSSObject } from '@ant-design/cssinjs';
-import type { ComponentTokenMap } from 'antd/es/theme/interface';
-import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
-export declare type ComponentName = keyof ComponentTokenMap;
-export declare function genComponentStyleHook(componentName: ComponentName, styleFn: GenerateStyle<FullToken<ComponentName>>): (prefixCls: string) => {
-    wrapSSR: (node: import("react").ReactNode) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    hashId: string;
-};
-export type { CSSObject, FullToken, GenerateStyle };

package/lib/index.d.ts

@@ -1,21 +0,0 @@
-import 'antd/dist/reset.css';
-export * from 'antd';
-export { version } from '../package.json';
-export { default as Alert } from './alert';
-export { default as Button } from './button';
-export { default as Card } from './card';
-export { default as ConfigProvider } from './config-provider';
-export { default as Descriptions } from './descriptions';
-export { default as Form } from './form';
-export { default as Modal } from './modal';
-export { message, notification, token } from './static-function';
-export { default as Table } from './table';
-export { default as Tabs } from './tabs';
-export { default as theme } from './theme';
-export { default as Tooltip } from './tooltip';
-declare const useToken: () => {
-    theme: import("@ant-design/cssinjs").Theme<import("antd/es/theme/internal").SeedToken, import("antd/es/theme/interface").MapToken>;
-    token: import("antd").GlobalToken;
-    hashId: string;
-};
-export { useToken };