@oceanbase/design 1.0.0-alpha.1 → 1.0.0-alpha.11

package/lib/table/style/index.js

@@ -1,33 +1,37 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/table/style/index.ts
-var style_exports = {};
-__export(style_exports, {
-  default: () => style_default,
-  genTableStyle: () => genTableStyle
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(style_exports);
-var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
-var genTableStyle = (token) => {
+exports.genTableStyle = exports.default = void 0;
+var _cssinjs = require("@ant-design/cssinjs");
+var _genComponentStyleHook = require("../../_util/genComponentStyleHook");
+const genSmallBtnStyle = token => {
+  const {
+    antCls
+  } = token;
+  return {
+    // button is small size by default
+    [`${antCls}-btn:not(${antCls}-btn-sm):not(${antCls}-btn-lg)`]: {
+      height: token.controlHeightSM,
+      fontSize: token.fontSizeSM,
+      [`&:not(${antCls}-btn-icon-only):not(${antCls}-btn-circle)`]: {
+        paddingInline: token.paddingXS
+      },
+      [`&${antCls}-btn-icon-only`]: {
+        width: token.controlHeightSM
+      },
+      [`&${antCls}-btn-circle`]: {
+        minWidth: token.controlHeightSM
+      }
+    }
+  };
+};
+const genTableStyle = token => {
   const {
     antCls,
     componentCls,
+    iconCls,
     colorText,
     colorBgBase,
     colorTextSecondary,
@@ -38,7 +42,8 @@ var genTableStyle = (token) => {
     colorBorderSecondary,
     padding,
     marginLG,
-    marginXS
+    marginXS,
+    calc
   } = token;
   return {
     // 表格通用样式
@@ -52,10 +57,9 @@ var genTableStyle = (token) => {
       },
       // head 样式
       [`${componentCls}-thead > tr`]: {
-        ["th"]: {
-          // 弱化列标题
+        ['th']: {
           color: colorTextSecondary,
-          fontWeight: "normal",
+          fontWeight: token.fontWeight,
           backgroundColor: colorBgBase
         },
         // 去掉排序列表头的灰色背景
@@ -75,34 +79,43 @@ var genTableStyle = (token) => {
         [`${componentCls}-tbody-virtual-scrollbar ${componentCls}-tbody-virtual-scrollbar-thumb`]: {
           background: `${token.colorFillSecondary} !important`
         },
+        // for custom expand icon
+        [`${componentCls}-row-indent+${iconCls}`]: {
+          marginInlineEnd: token.marginXS
+        },
         // expandRowByClick 行样式
         [`tr${componentCls}-expand-row-by-click`]: {
-          cursor: "pointer"
+          cursor: 'pointer'
         },
         // 去掉可展开行在展开时的底部 border
         [`tr > td:has(${componentCls}-row-expand-icon-expanded)`]: {
-          borderBottom: "none",
+          borderBottom: 'none',
           [`& ~ td`]: {
-            borderBottom: "none"
+            borderBottom: 'none'
           }
         },
         // 为了避免行展开/收起时出现 border 动画，覆盖 antd 默认配置，仅设置背景色动画
         [`tr > td`]: {
-          transition: `background ${token.motionDurationMid}`
+          fontWeight: token.fontWeight,
+          transition: `background ${token.motionDurationMid}`,
+          a: {
+            fontWeight: token.fontWeightStrong,
+            // work for ProTable link style
+            fontSize: token.fontSizeSM
+          }
         },
+        ...genSmallBtnStyle(token),
         // empty style
-        [`${componentCls}-placeholder td`]: {
-          borderBottom: "none"
-        },
+        [`${componentCls}-placeholder td`]: {},
         [`${componentCls}-empty-wrapper`]: {
-          minHeight: 360 - token.paddingSM * 2,
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center"
+          minHeight: calc(360).sub(calc(token.paddingSM).mul(2).equal()).equal(),
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center'
         },
         // 嵌套子表格样式
         [`tr > td > ${componentCls}-wrapper:only-child ${componentCls}`]: {
-          borderBottom: "none",
+          borderBottom: 'none',
           // 设置嵌套子表格的表头背景色
           [`${componentCls}-thead > tr > th`]: {
             backgroundColor: token.colorFillQuaternary
@@ -116,7 +129,7 @@ var genTableStyle = (token) => {
           },
           // empty wrapper style
           [`${componentCls}-empty-wrapper`]: {
-            minHeight: "auto"
+            minHeight: 'auto'
           }
         }
       }
@@ -125,7 +138,7 @@ var genTableStyle = (token) => {
     [`${componentCls}-wrapper ${componentCls}${componentCls}-middle`]: {
       [`${componentCls}-tbody`]: {
         [`${componentCls}-empty-wrapper`]: {
-          minHeight: 260 - token.paddingXS * 2
+          minHeight: calc(260).sub(calc(token.paddingXS).mul(2).equal()).equal()
         }
       }
     },
@@ -133,24 +146,24 @@ var genTableStyle = (token) => {
     [`${componentCls}-wrapper ${componentCls}${componentCls}-small`]: {
       [`${componentCls}-tbody`]: {
         [`${componentCls}-empty-wrapper`]: {
-          minHeight: 160 - token.paddingXXS * 2
+          minHeight: calc(160).sub(calc(token.paddingXXS).mul(2).equal()).equal()
         }
       }
     },
     // 带边框的表格样式
     [`${componentCls}-wrapper ${componentCls}${componentCls}-bordered`]: {
       [`${componentCls}-footer`]: {
-        borderRadius: `0px 0px ${token.borderRadiusLG}px ${token.borderRadiusLG}px`
+        borderRadius: `0px 0px ${(0, _cssinjs.unit)(token.borderRadiusLG)} ${(0, _cssinjs.unit)(token.borderRadiusLG)}`
       }
     },
-    // 带边框的表格样式
+    // 带内部边框的表格样式
     [`${componentCls}-wrapper${componentCls}-inner-bordered ${componentCls}-bordered`]: {
       [`${componentCls}-container`]: {
-        borderInlineStart: "none",
-        borderTop: "none",
+        borderInlineStart: 'none',
+        borderTop: 'none',
         [`${componentCls}-thead > tr > th, ${componentCls}-tbody > tr > td`]: {
-          ["&:last-child"]: {
-            borderInlineEnd: "none"
+          ['&:last-child']: {
+            borderInlineEnd: 'none'
           }
         }
       }
@@ -159,9 +172,8 @@ var genTableStyle = (token) => {
     [`${componentCls}-wrapper ${componentCls}:not(${componentCls}-bordered)`]: {
       // 单元格通用样式
       [`${componentCls}-thead, ${componentCls}-tbody`]: {
-        ["td, th"]: {
+        ['td, th']: {
           [`&${componentCls}-row-expand-icon-cell`]: {
-            backgroundColor: colorBgBase,
             // 设置 paddingRight 即可
             paddingRight: token.paddingXS
           },
@@ -192,6 +204,7 @@ var genTableStyle = (token) => {
     //       },
     //     },
     //   },
+
     // 非可展开表格、不带 footer 表格、非空表格、不带边框表格: 去掉底部圆角
     [`${componentCls}-wrapper:not(${componentCls}-expandable):not(${componentCls}-has-footer) ${componentCls}:not(${componentCls}-bordered):not(${componentCls}-empty)`]: {
       borderBottomLeftRadius: 0,
@@ -204,15 +217,19 @@ var genTableStyle = (token) => {
           [`${componentCls}-expanded-row > td`]: {
             // 除内嵌子表格外，设置其他内嵌元素样式
             [`& > *:not(${componentCls}-wrapper):not(${componentCls}-expanded-row-fixed)`]: {
-              marginLeft: token.marginXL + token.lineWidth * 2
+              marginLeft: calc(token.marginXL).add(calc(token.lineWidth).mul(2).equal()).equal()
             },
             [`& > *${componentCls}-expanded-row-fixed`]: {
-              paddingLeft: token.marginXL + token.lineWidth * 2 + token.padding
+              paddingLeft: calc(token.marginXL).add(calc(token.lineWidth).mul(2).equal()).add(token.padding).equal(),
+              margin: `-${(0, _cssinjs.unit)(token.marginXS)} -${(0, _cssinjs.unit)(token.margin)}`
             }
           },
           // 嵌套子表格和父表格第一列对齐
           [`tr > td > ${componentCls}-wrapper:only-child ${componentCls}`]: {
-            marginLeft: token.margin + token.lineWidth * 2
+            marginLeft: calc(token.margin).add(calc(token.lineWidth).mul(2).equal()).equal()
+          },
+          [`tr > td > ${componentCls}-expanded-row-fixed > ${componentCls}-wrapper:only-child ${componentCls}`]: {
+            marginLeft: -token.padding
           }
         }
       },
@@ -220,7 +237,7 @@ var genTableStyle = (token) => {
         [`${componentCls}-tbody`]: {
           // 嵌套子表格和父表格第一列对齐
           [`tr > td > ${componentCls}-wrapper:only-child ${componentCls}`]: {
-            marginLeft: token.margin + token.lineWidth * 2 + token.margin
+            marginLeft: calc(token.margin).add(calc(token.lineWidth).mul(2).equal()).add(token.margin).equal()
           }
         }
       }
@@ -232,15 +249,15 @@ var genTableStyle = (token) => {
           [`${componentCls}-expanded-row > td`]: {
             // 除内嵌子表格外，设置其他内嵌元素样式
             [`& > *:not(${componentCls}-wrapper):not(${componentCls}-expanded-row-fixed)`]: {
-              marginLeft: token.marginXL + token.marginXL + token.lineWidth * 2
+              marginLeft: calc(token.marginXL).add(token.marginXL).add(calc(token.lineWidth).mul(2).equal()).equal()
             },
             [`& > *${componentCls}-expanded-row-fixed`]: {
-              paddingLeft: token.marginXL + token.marginXL + token.lineWidth * 2 + token.padding
+              paddingLeft: calc(token.marginXL).add(token.marginXL).add(calc(token.lineWidth).mul(2).equal()).add(token.padding).equal()
             }
           },
           // 嵌套子表格和父表格第一列对齐
           [`tr > td > ${componentCls}-wrapper:only-child ${componentCls}`]: {
-            marginLeft: token.margin + token.marginXL + token.lineWidth * 2
+            marginLeft: calc(token.margin).add(token.marginXL).add(calc(token.lineWidth).mul(2).equal()).equal()
           }
         }
       },
@@ -248,7 +265,7 @@ var genTableStyle = (token) => {
         [`${componentCls}-tbody`]: {
           // 嵌套子表格和父表格第一列对齐
           [`tr > td > ${componentCls}-wrapper:only-child ${componentCls}`]: {
-            marginLeft: token.margin + token.marginXL + token.lineWidth * 2 + token.margin
+            marginLeft: calc(token.margin).add(token.marginXL).add(calc(token.lineWidth).mul(2).equal()).add(token.margin).equal()
           }
         }
       }
@@ -258,7 +275,7 @@ var genTableStyle = (token) => {
       [`${componentCls}-tbody`]: {
         [`${componentCls}-placeholder`]: {
           // hide empty when Table loading
-          visibility: "hidden"
+          visibility: 'hidden'
         }
       }
     },
@@ -266,23 +283,34 @@ var genTableStyle = (token) => {
     [`${componentCls}-wrapper`]: {
       [`${componentCls}-pagination`]: {
         [`&${antCls}-pagination`]: {
-          padding: `${padding}px 0`,
-          margin: "0 !important"
+          fontSize: token.fontSizeSM,
+          padding: `${(0, _cssinjs.unit)(token.paddingSM)} 0`,
+          margin: '0 !important',
+          [`${antCls}-pagination-item, ${antCls}-pagination-total-text, ${antCls}-pagination-prev, ${antCls}-pagination-next`]: {
+            height: token.controlHeightSM,
+            minWidth: token.controlHeightSM,
+            lineHeight: (0, _cssinjs.unit)(calc(token.controlHeightSM).sub(calc(token.lineWidth).mul(2)).equal())
+          },
+          [`${antCls}-pagination-options ${antCls}-select-single`]: {
+            height: token.controlHeightSM,
+            [`${antCls}-select-selector`]: {
+              paddingInline: calc(token.paddingXS).sub(token.lineWidth).equal()
+            }
+          }
         },
         // 批量操作栏样式
         [`${componentCls}-batch-operation-bar`]: {
-          position: "absolute",
+          position: 'absolute',
           left: 0,
-          display: "inline-block",
+          display: 'inline-block',
           marginRight: marginLG,
           [`${componentCls}-batch-operation-selection`]: {
-            color: colorTextSecondary,
-            fontWeight: 500,
             [`${componentCls}-batch-operation-selection-count`]: {
-              margin: `0 ${marginXS}px`,
+              margin: `0 ${(0, _cssinjs.unit)(marginXS)}`,
               color: colorLink
             }
-          }
+          },
+          ...genSmallBtnStyle(token)
         }
       }
     },
@@ -296,19 +324,13 @@ var genTableStyle = (token) => {
     [`${antCls}-popover, ${antCls}-tooltip`]: {
       [`${componentCls} ${componentCls}-tbody`]: {
         [`${componentCls}-empty-wrapper`]: {
-          minHeight: "auto"
+          minHeight: 'auto'
         }
       }
     }
   };
 };
-var style_default = (prefixCls) => {
-  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Table", (token) => {
-    return [genTableStyle(token)];
-  });
-  return useStyle(prefixCls);
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  genTableStyle
-});
+exports.genTableStyle = genTableStyle;
+var _default = exports.default = (0, _genComponentStyleHook.genStyleHooks)('Table', token => {
+  return [genTableStyle(token)];
+});

package/lib/tabs/TabPane.js

@@ -1,26 +1,9 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/tabs/TabPane.tsx
-var TabPane_exports = {};
-__export(TabPane_exports, {
-  default: () => TabPane_default
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(TabPane_exports);
-var import_antd = require("antd");
-var TabPane_default = import_antd.Tabs.TabPane;
+exports.default = void 0;
+var _antd = require("antd");
+"use client";
+var _default = exports.default = _antd.Tabs.TabPane;

package/lib/tabs/hooks/useLegacyItems.js

@@ -1,54 +1,38 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/tabs/hooks/useLegacyItems.tsx
-var useLegacyItems_exports = {};
-__export(useLegacyItems_exports, {
-  default: () => useLegacyItems
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(useLegacyItems_exports);
-var import_warning = __toESM(require("antd/es/_util/warning"));
-var import_toArray = __toESM(require("rc-util/lib/Children/toArray"));
-var React = __toESM(require("react"));
+exports.default = useLegacyItems;
+var _warning = _interopRequireDefault(require("antd/es/_util/warning"));
+var _toArray = _interopRequireDefault(require("rc-util/lib/Children/toArray"));
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+"use client";
 function filter(items) {
-  return items.filter((item) => item);
+  return items.filter(item => item);
 }
+
+// ref: https://github.com/ant-design/ant-design/blob/master/components/tabs/hooks/useLegacyItems.ts
 function useLegacyItems(items, children) {
   if (items) {
     return items;
   }
-  (0, import_warning.default)(!children, "Tabs", "Tabs.TabPane is deprecated. Please use `items` directly.");
-  const childrenItems = (0, import_toArray.default)(children).map((node) => {
-    if (React.isValidElement(node)) {
-      const { key, props } = node;
-      const { tab, ...restProps } = props || {};
-      const item = {
+  (0, _warning.default)(!children, 'Tabs', 'Tabs.TabPane is deprecated. Please use `items` directly.');
+  const childrenItems = (0, _toArray.default)(children).map(node => {
+    if ( /*#__PURE__*/React.isValidElement(node)) {
+      const {
         key,
+        props
+      } = node;
+      const {
+        tab,
+        ...restProps
+      } = props || {};
+      const item = {
+        key: key,
         ...restProps,
         label: tab
       };
@@ -57,4 +41,4 @@ function useLegacyItems(items, children) {
     return null;
   });
   return filter(childrenItems);
-}
+}