@oceanbase/design 1.0.0-alpha.0 → 1.0.0-alpha.10

package/lib/drawer/index.js

@@ -43,9 +43,11 @@ var import_button = __toESM(require("../button"));
 var import_en_US = __toESM(require("../locale/en-US"));
 var import_style = __toESM(require("./style"));
 __reExport(drawer_exports, require("antd/es/drawer"), module.exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var Drawer = ({
   locale: customLocale,
   children,
+  loading,
   onOk,
   onClose,
   onCancel,
@@ -71,28 +73,29 @@ var Drawer = ({
   };
   const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
   const prefixCls = getPrefixCls("drawer", customizePrefixCls);
-  const { wrapSSR } = (0, import_style.default)(prefixCls);
+  const [wrapCSSVar] = (0, import_style.default)(prefixCls);
   const [contentElment, setContentElement] = (0, import_react.useState)(null);
   (0, import_ahooks.useSize)(contentElment);
   const scroll = (0, import_ahooks.useScroll)(contentElment);
-  const isScroll = (contentElment == null ? void 0 : contentElment.scrollHeight) !== (contentElment == null ? void 0 : contentElment.clientHeight);
-  const isStartScroll = scroll.top > 0;
-  const isTotalScroll = Math.abs(
+  const isScroll = !loading && (contentElment == null ? void 0 : contentElment.scrollHeight) !== (contentElment == null ? void 0 : contentElment.clientHeight);
+  const isStartScroll = !loading && scroll.top > 0;
+  const isTotalScroll = !loading && Math.abs(
     ((contentElment == null ? void 0 : contentElment.scrollHeight) || 0) - ((contentElment == null ? void 0 : contentElment.clientHeight) || 0) - ((contentElment == null ? void 0 : contentElment.scrollTop) || 0)
   ) < 1;
   const handleCancel = onCancel || onClose;
   const showFooter = !!(footer || onOk) && footer !== false && footer !== null;
   const drawerCls = (0, import_classnames.default)(
-    prefixCls,
     {
+      [`${prefixCls}-loading`]: loading,
       [`${prefixCls}-with-footer`]: showFooter
     },
     rootClassName
   );
-  return wrapSSR(
-    /* @__PURE__ */ import_react.default.createElement(
+  return wrapCSSVar(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       import_antd.Drawer,
       {
+        loading,
         destroyOnClose: true,
         onClose: handleCancel,
         rootClassName: drawerCls,
@@ -103,34 +106,42 @@ var Drawer = ({
           })
         },
         styles: (0, import_lodash.omit)(styles, ["body", "footer"]),
-        ...restProps
-      },
-      /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          ref: (element) => {
-            setContentElement(element);
-          },
-          className: `${prefixCls}-body-content`,
-          style: {
-            ...bodyStyle,
-            ...styles == null ? void 0 : styles.body
-          }
-        },
-        children
-      ),
-      showFooter && // footer className should not be `${prefixCls}-footer` to avoid conflicts with antd
-      // ref: https://github.com/ant-design/ant-design/blob/master/components/drawer/style/index.ts#L214
-      /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          className: (0, import_classnames.default)(`${prefixCls}-footer-container`, {
-            [`${prefixCls}-footer-container-shadow`]: isScroll && !isTotalScroll
-          }),
-          style: styles == null ? void 0 : styles.footer
-        },
-        (0, import_react.isValidElement)(footer) ? footer : /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-footer-content` }, /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(import_button.default, { onClick: onOk, type: "primary", loading: confirmLoading, ...okButtonProps }, okText || (drawerLocale == null ? void 0 : drawerLocale.okText)), /* @__PURE__ */ import_react.default.createElement(import_button.default, { onClick: handleCancel }, cancelText || (drawerLocale == null ? void 0 : drawerLocale.cancelText))), footerExtra)
-      )
+        ...restProps,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              ref: (element) => {
+                setContentElement(element);
+              },
+              className: `${prefixCls}-body-content`,
+              style: {
+                ...bodyStyle,
+                ...styles == null ? void 0 : styles.body
+              },
+              children
+            }
+          ),
+          showFooter && // footer className should not be `${prefixCls}-footer` to avoid conflicts with antd
+          // ref: https://github.com/ant-design/ant-design/blob/master/components/drawer/style/index.ts#L214
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: (0, import_classnames.default)(`${prefixCls}-footer-container`, {
+                [`${prefixCls}-footer-container-shadow`]: isScroll && !isTotalScroll
+              }),
+              style: styles == null ? void 0 : styles.footer,
+              children: (0, import_react.isValidElement)(footer) ? footer : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${prefixCls}-footer-content`, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd.Space, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.default, { onClick: onOk, type: "primary", loading: confirmLoading, ...okButtonProps, children: okText || (drawerLocale == null ? void 0 : drawerLocale.okText) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.default, { onClick: handleCancel, children: cancelText || (drawerLocale == null ? void 0 : drawerLocale.cancelText) })
+                ] }),
+                footerExtra
+              ] })
+            }
+          )
+        ]
+      }
     )
   );
 };

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

@@ -1,9 +1,6 @@
 /// <reference types="react" />
-import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+import type { FullToken, GenerateStyle } from '../../theme/interface';
 export type DrawerToken = FullToken<'Drawer'>;
 export declare const genDrawerStyle: GenerateStyle<DrawerToken>;
-declare const _default: (prefixCls: string) => {
-    wrapSSR: (node: import("react").ReactNode) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    hashId: string;
-};
+declare const _default: (prefixCls: string, rootCls?: string) => readonly [(node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, string, string];
 export default _default;

package/lib/drawer/style/index.js

@@ -23,21 +23,45 @@ __export(style_exports, {
   genDrawerStyle: () => genDrawerStyle
 });
 module.exports = __toCommonJS(style_exports);
+var import_cssinjs = require("@ant-design/cssinjs");
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genDrawerStyle = (token) => {
-  const { componentCls } = token;
-  const boxShadowBottom = "0 2px 4px 0 rgba(54,69,99,0.04), 0 1px 6px -1px rgba(54,69,99,0.04), 0 1px 2px 0 rgba(54,69,99,0.06)";
-  const boxShadowTop = "0 -2px 4px 0 rgba(54,69,99,0.04), 0 -1px 6px -1px rgba(54,69,99,0.04), 0 -1px 2px 0 rgba(54,69,99,0.06)";
+  const { componentCls, antCls, iconCls, fontSizeHeading3, colorSplit, calc } = token;
+  const contentPadding = token.paddingLG;
+  const boxShadowTop = "0 -1px 2px 0 rgba(19, 33, 57, 0.1)";
+  const boxShadowBottom = "0 1px 2px 0 rgba(19, 33, 57, 0.1)";
   return {
     [`${componentCls}`]: {
       // should be wrapped by `${componentCls}-content` to overwritten antd style
       [`${componentCls}-content`]: {
+        // to avoid x scroll
+        overflow: "initial",
         [`${componentCls}-header`]: {
-          padding: "16px 24px",
+          position: "relative",
+          padding: `${(0, import_cssinjs.unit)(token.padding)} ${(0, import_cssinjs.unit)(token.paddingLG)}`,
           borderBottom: "none",
           transition: `box-shadow ${token.motionDurationMid}`,
           // ensure header box-shadow cover body content
-          zIndex: 10
+          zIndex: 10,
+          [`${componentCls}-title`]: {
+            fontSize: fontSizeHeading3,
+            [iconCls]: {
+              fontSize: token.fontSizeLG
+            }
+          },
+          // 标题栏底部增加分割线
+          "&::after": {
+            content: '""',
+            position: "absolute",
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: "1px",
+            backgroundColor: colorSplit,
+            // 使用负margin让分割线贯通到content边缘
+            marginLeft: calc(token.paddingLG).mul(-1).equal(),
+            marginRight: calc(token.paddingLG).mul(-1).equal()
+          }
         },
         [`${componentCls}-header-shadow`]: {
           boxShadow: boxShadowBottom
@@ -48,12 +72,12 @@ var genDrawerStyle = (token) => {
           flexDirection: "column"
         },
         [`${componentCls}-body-content`]: {
-          padding: "8px 24px 24px 24px",
+          padding: contentPadding,
           overflow: "auto"
         },
         [`${componentCls}-footer-container`]: {
           position: "sticky",
-          padding: "16px 24px",
+          padding: `${(0, import_cssinjs.unit)(token.padding)} ${(0, import_cssinjs.unit)(token.paddingLG)}`,
           transition: `box-shadow ${token.motionDurationMid}`,
           // ensure footer box-shadow cover body content
           zIndex: 10,
@@ -64,27 +88,33 @@ var genDrawerStyle = (token) => {
             alignItems: "center"
           }
         },
+        // footer 跟随内容或滚动到底部时，padding-top 设为 0
+        [`${componentCls}-footer-container-no-padding-top`]: {
+          paddingTop: 0
+        },
         [`${componentCls}-footer-container-shadow`]: {
           boxShadow: boxShadowTop
         }
       }
     },
+    [`${componentCls}${componentCls}-loading`]: {
+      [`${componentCls}-body > ${antCls}-skeleton`]: {
+        padding: contentPadding
+      }
+    },
     [`${componentCls}${componentCls}-with-footer`]: {
       // should be wrapped by `${componentCls}-content` to overwritten antd style
       [`${componentCls}-content`]: {
         [`${componentCls}-body-content`]: {
-          padding: "8px 24px 8px 24px"
+          paddingBottom: token.paddingXS
         }
       }
     }
   };
 };
-var style_default = (prefixCls) => {
-  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Drawer", (token) => {
-    return [genDrawerStyle(token)];
-  });
-  return useStyle(prefixCls);
-};
+var style_default = (0, import_genComponentStyleHook.genStyleHooks)("Drawer", (token) => {
+  return [genDrawerStyle(token)];
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   genDrawerStyle

package/lib/dropdown/dropdown-button.js

@@ -32,11 +32,34 @@ __export(dropdown_button_exports, {
   default: () => dropdown_button_default
 });
 module.exports = __toCommonJS(dropdown_button_exports);
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_antd = require("antd");
 var import_icons = require("@oceanbase/icons");
-var DropdownButton = ({ icon = /* @__PURE__ */ import_react.default.createElement(import_icons.DownOutlined, null), ...restProps }) => {
-  return /* @__PURE__ */ import_react.default.createElement(import_antd.Dropdown.Button, { icon, ...restProps });
+var import_classnames = __toESM(require("classnames"));
+var import_config_provider = __toESM(require("../config-provider"));
+var import_style = __toESM(require("./style"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var DropdownButton = ({
+  prefixCls: customizePrefixCls,
+  className,
+  icon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.DownOutlined, {}),
+  ...restProps
+}) => {
+  const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
+  const prefixCls = getPrefixCls("dropdown", customizePrefixCls);
+  const [wrapCSSVar] = (0, import_style.default)(prefixCls);
+  const buttonCls = (0, import_classnames.default)(className);
+  return wrapCSSVar(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_antd.Dropdown.Button,
+      {
+        icon,
+        prefixCls: customizePrefixCls,
+        className: buttonCls,
+        ...restProps
+      }
+    )
+  );
 };
 DropdownButton.__ANT_BUTTON = true;
 var dropdown_button_default = DropdownButton;

package/lib/dropdown/index.js

@@ -33,12 +33,12 @@ __export(dropdown_exports, {
   default: () => dropdown_default
 });
 module.exports = __toCommonJS(dropdown_exports);
-var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_dropdown_button = __toESM(require("./dropdown-button"));
 __reExport(dropdown_exports, require("antd/es/dropdown"), module.exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var Dropdown = (props) => {
-  return /* @__PURE__ */ import_react.default.createElement(import_antd.Dropdown, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Dropdown, { ...props });
 };
 Dropdown._InternalPanelDoNotUseOrYouWillBeFired = import_antd.Dropdown._InternalPanelDoNotUseOrYouWillBeFired;
 Dropdown.Button = import_dropdown_button.default;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { FullToken, GenerateStyle } from '../../theme/interface';
+export type DropdownToken = FullToken<'Dropdown'>;
+export declare const genDropdownStyle: GenerateStyle<DropdownToken>;
+declare const _default: (prefixCls: string, rootCls?: string) => readonly [(node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, string, string];
+export default _default;

package/lib/dropdown/style/index.js

@@ -0,0 +1,46 @@
+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);
+
+// src/dropdown/style/index.ts
+var style_exports = {};
+__export(style_exports, {
+  default: () => style_default,
+  genDropdownStyle: () => genDropdownStyle
+});
+module.exports = __toCommonJS(style_exports);
+var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
+var genDropdownStyle = (token) => {
+  const { antCls, lineWidth } = token;
+  const btnComponentCls = `${antCls}-btn`;
+  const selector = `${btnComponentCls}-compact-item${btnComponentCls}-primary:not([disabled])`;
+  return {
+    // special style for primary Dropdown.Button
+    [`${selector} + ${selector}::before`]: {
+      top: -1,
+      backgroundColor: token.colorWhite,
+      height: `calc(100% + ${lineWidth * 2}px)`
+    }
+  };
+};
+var style_default = (0, import_genComponentStyleHook.genStyleHooks)("Dropdown", (token) => {
+  return [genDropdownStyle(token)];
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  genDropdownStyle
+});