@oceanbase/design 1.0.0-alpha.2 → 1.0.0-alpha.4

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,
@@ -75,24 +77,25 @@ var Drawer = ({
   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(
+    /* @__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,5 +1,5 @@
 /// <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) => {

package/lib/drawer/style/index.js

@@ -25,7 +25,8 @@ __export(style_exports, {
 module.exports = __toCommonJS(style_exports);
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genDrawerStyle = (token) => {
-  const { componentCls } = token;
+  const { componentCls, antCls, fontSizeHeading3, colorSplit } = token;
+  const contentPadding = token.paddingLG;
   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)";
   return {
@@ -33,11 +34,28 @@ var genDrawerStyle = (token) => {
       // should be wrapped by `${componentCls}-content` to overwritten antd style
       [`${componentCls}-content`]: {
         [`${componentCls}-header`]: {
-          padding: "16px 24px",
+          position: "relative",
+          padding: `${token.padding}px ${token.paddingLG}px`,
           borderBottom: "none",
           transition: `box-shadow ${token.motionDurationMid}`,
           // ensure header box-shadow cover body content
-          zIndex: 10
+          zIndex: 10,
+          [`${componentCls}-title`]: {
+            fontSize: fontSizeHeading3
+          },
+          // 标题栏底部增加分割线
+          "&::after": {
+            content: '""',
+            position: "absolute",
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: "1px",
+            backgroundColor: colorSplit,
+            // 使用负margin让分割线贯通到content边缘
+            marginLeft: `-${token.paddingLG}px`,
+            marginRight: `-${token.paddingLG}px`
+          }
         },
         [`${componentCls}-header-shadow`]: {
           boxShadow: boxShadowBottom
@@ -48,12 +66,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: `${token.padding}px ${token.paddingLG}px`,
           transition: `box-shadow ${token.motionDurationMid}`,
           // ensure footer box-shadow cover body content
           zIndex: 10,
@@ -64,16 +82,25 @@ 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
         }
       }
     }

package/lib/dropdown/dropdown-button.js

@@ -1,8 +1,6 @@
-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)
@@ -16,14 +14,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   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);
 
 // src/dropdown/dropdown-button.tsx
@@ -32,11 +22,11 @@ __export(dropdown_button_exports, {
   default: () => dropdown_button_default
 });
 module.exports = __toCommonJS(dropdown_button_exports);
-var import_react = __toESM(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_jsx_runtime = require("react/jsx-runtime");
+var DropdownButton = ({ icon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.DownOutlined, {}), ...restProps }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Dropdown.Button, { icon, ...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;