@oceanbase/design 0.2.14 → 0.2.16

package/lib/modal/Modal.js

@@ -0,0 +1,59 @@
+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);
+
+// src/modal/Modal.tsx
+var Modal_exports = {};
+__export(Modal_exports, {
+  default: () => Modal_default
+});
+module.exports = __toCommonJS(Modal_exports);
+var import_antd = require("antd");
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_config_provider = __toESM(require("../config-provider"));
+var import_static_function = require("../static-function");
+var import_style = __toESM(require("./style"));
+var Modal = ({ prefixCls: customizePrefixCls, className, ...restProps }) => {
+  const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
+  const prefixCls = getPrefixCls("modal", customizePrefixCls);
+  const { wrapSSR } = (0, import_style.default)(prefixCls);
+  const modalCls = (0, import_classnames.default)(className);
+  return wrapSSR(/* @__PURE__ */ import_react.default.createElement(import_antd.Modal, { prefixCls: customizePrefixCls, className: modalCls, ...restProps }));
+};
+Modal.info = (props) => import_static_function.modal.info(props);
+Modal.success = (props) => import_static_function.modal.success(props);
+Modal.error = (props) => import_static_function.modal.error(props);
+Modal.warning = (props) => import_static_function.modal.warning(props);
+Modal.confirm = (props) => import_static_function.modal.confirm(props);
+Modal.useModal = import_antd.Modal.useModal;
+Modal.destroyAll = import_antd.Modal.destroyAll;
+Modal.config = import_antd.Modal.config;
+if (process.env.NODE_ENV !== "production") {
+  Modal.displayName = import_antd.Modal.displayName;
+}
+var Modal_default = Modal;

package/lib/modal/Progress.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ModalProps } from 'antd/es/modal';
+import type { ProgressProps } from 'antd/es/progress';
+export interface ModalProgressProps extends ModalProps {
+    loading?: boolean;
+    progress?: ProgressProps;
+    description?: React.ReactNode;
+}
+declare const Progress: ({ prefixCls: customizePrefixCls, className, width, maskClosable, loading, progress, description, footer, ...restProps }: ModalProgressProps) => React.JSX.Element;
+export default Progress;

package/lib/modal/Progress.js

@@ -0,0 +1,71 @@
+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);
+
+// src/modal/Progress.tsx
+var Progress_exports = {};
+__export(Progress_exports, {
+  default: () => Progress_default
+});
+module.exports = __toCommonJS(Progress_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_classnames = __toESM(require("classnames"));
+var import_config_provider = __toESM(require("../config-provider"));
+var import_Modal = __toESM(require("./Modal"));
+var import_icons = require("@oceanbase/icons");
+var Progress = ({
+  prefixCls: customizePrefixCls,
+  className,
+  width = 567,
+  maskClosable = false,
+  loading,
+  progress,
+  description,
+  footer = null,
+  ...restProps
+}) => {
+  const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
+  const prefixCls = getPrefixCls("modal", customizePrefixCls);
+  const progressModalCls = (0, import_classnames.default)(`${prefixCls}-progress`, className);
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_Modal.default,
+    {
+      prefixCls: customizePrefixCls,
+      className: progressModalCls,
+      width,
+      maskClosable,
+      footer,
+      ...restProps
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, loading ? /* @__PURE__ */ import_react.default.createElement(import_icons.LoadingOutlined, { className: `${prefixCls}-progress-loading` }) : /* @__PURE__ */ import_react.default.createElement(import_antd.Progress, { type: "circle", size: 200, ...progress }), description && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-progress-description` }, description))
+  );
+};
+if (process.env.NODE_ENV !== "production") {
+  import_Modal.default.displayName = "Modal.Progress";
+}
+var Progress_default = Progress;

package/lib/modal/index.d.ts

@@ -1,32 +1,9 @@
-import type { ModalProps as AntModalProps } from 'antd/es/modal';
-import React from 'react';
+import Progress from './Progress';
+import OriginModal from './Modal';
 export * from 'antd/es/modal';
-export type ModalProps = AntModalProps;
-declare const Modal: {
-    ({ prefixCls: customizePrefixCls, className, rootClassName, title, footer, ...restProps }: ModalProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-    info(props: any): {
-        destroy: () => void;
-        update: (configUpdate: import("antd").ModalFuncProps | ((prevConfig: import("antd").ModalFuncProps) => import("antd").ModalFuncProps)) => void;
-    };
-    success(props: any): {
-        destroy: () => void;
-        update: (configUpdate: import("antd").ModalFuncProps | ((prevConfig: import("antd").ModalFuncProps) => import("antd").ModalFuncProps)) => void;
-    };
-    error(props: any): {
-        destroy: () => void;
-        update: (configUpdate: import("antd").ModalFuncProps | ((prevConfig: import("antd").ModalFuncProps) => import("antd").ModalFuncProps)) => void;
-    };
-    warning(props: any): {
-        destroy: () => void;
-        update: (configUpdate: import("antd").ModalFuncProps | ((prevConfig: import("antd").ModalFuncProps) => import("antd").ModalFuncProps)) => void;
-    };
-    confirm(props: any): {
-        destroy: () => void;
-        update: (configUpdate: import("antd").ModalFuncProps | ((prevConfig: import("antd").ModalFuncProps) => import("antd").ModalFuncProps)) => void;
-    };
-    useModal: typeof import("antd/es/modal/useModal").default;
-    destroyAll: () => void;
-    config: typeof import("antd/es/modal/confirm").modalGlobalConfig;
-    displayName: string;
+export type { ModalProgressProps } from './Progress';
+export type ModalType = typeof OriginModal & {
+    Progress: typeof Progress;
 };
-export default Modal;
+declare const _default: ModalType;
+export default _default;

package/lib/modal/index.js

@@ -27,56 +27,17 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/modal/index.tsx
+// src/modal/index.ts
 var modal_exports = {};
 __export(modal_exports, {
   default: () => modal_default
 });
 module.exports = __toCommonJS(modal_exports);
-var import_antd = require("antd");
-var import_classnames = __toESM(require("classnames"));
-var import_react = __toESM(require("react"));
-var import_config_provider = __toESM(require("../config-provider"));
-var import_static_function = require("../static-function");
-var import_style = __toESM(require("./style"));
+var import_Progress = __toESM(require("./Progress"));
+var import_Modal = __toESM(require("./Modal"));
 __reExport(modal_exports, require("antd/es/modal"), module.exports);
-var Modal = ({
-  prefixCls: customizePrefixCls,
-  className,
-  rootClassName,
-  title,
-  footer,
-  ...restProps
-}) => {
-  const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
-  const prefixCls = getPrefixCls("modal", customizePrefixCls);
-  const { wrapSSR } = (0, import_style.default)(prefixCls);
-  const modalCls = (0, import_classnames.default)(className);
-  return wrapSSR(
-    /* @__PURE__ */ import_react.default.createElement(
-      import_antd.Modal,
-      {
-        prefixCls: customizePrefixCls,
-        className: modalCls,
-        rootClassName: (0, import_classnames.default)(rootClassName),
-        title,
-        footer,
-        ...restProps
-      }
-    )
-  );
-};
-Modal.info = (props) => import_static_function.modal.info(props);
-Modal.success = (props) => import_static_function.modal.success(props);
-Modal.error = (props) => import_static_function.modal.error(props);
-Modal.warning = (props) => import_static_function.modal.warning(props);
-Modal.confirm = (props) => import_static_function.modal.confirm(props);
-Modal.useModal = import_antd.Modal.useModal;
-Modal.destroyAll = import_antd.Modal.destroyAll;
-Modal.config = import_antd.Modal.config;
-if (process.env.NODE_ENV !== "production") {
-  Modal.displayName = import_antd.Modal.displayName;
-}
+var Modal = import_Modal.default;
+Modal.Progress = import_Progress.default;
 var modal_default = Modal;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/lib/modal/style/index.js

@@ -26,6 +26,7 @@ module.exports = __toCommonJS(style_exports);
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genModalStyle = (token) => {
   const {
+    antCls,
     componentCls,
     marginSM,
     marginLG,
@@ -39,6 +40,7 @@ var genModalStyle = (token) => {
   const bottom = 100;
   const titleHeight = fontSizeHeading5 * lineHeightHeading5;
   return {
+    /* Modal */
     [`${componentCls}:not(${componentCls}-confirm)`]: {
       [`${componentCls}-header`]: {
         marginBottom: marginLG
@@ -52,6 +54,38 @@ var genModalStyle = (token) => {
         marginTop: marginLG
       }
     },
+    /* Modal.Progress */
+    [`${componentCls}${componentCls}-progress`]: {
+      [`${componentCls}-content`]: {
+        padding: `${token.paddingXL + token.padding}px ${token.paddingLG + token.padding}px`,
+        [`${componentCls}-header`]: {
+          textAlign: "center",
+          marginBottom: token.marginXXL,
+          [`${componentCls}-title`]: {
+            fontSize: token.fontSizeHeading4
+          }
+        },
+        [`${componentCls}-body`]: {
+          textAlign: "center",
+          [`${componentCls}-progress-loading`]: {
+            fontSize: 200,
+            color: token.colorInfo
+          },
+          [`${componentCls}-progress-description`]: {
+            marginTop: token.marginXXL,
+            color: token.colorTextTertiary
+          },
+          // should align to left for Alert
+          [`${antCls}-alert`]: {
+            textAlign: "left"
+          }
+        },
+        [`${componentCls}-footer`]: {
+          textAlign: "center"
+        }
+      }
+    },
+    /* Modal.method() */
     [`${componentCls}-confirm`]: {
       [`${componentCls}-body ${componentCls}-confirm-title +${componentCls}-confirm-content`]: {
         marginBlockStart: marginSM

package/lib/spin/style/index.js

@@ -29,13 +29,16 @@ var genSizeStyle = (spinDotSize, token) => {
   const spinDotWidth = spinDotSize;
   const spinDotHight = spinDotWidth * (295 / 397);
   return {
-    [`${componentCls}-dot`]: {
-      width: spinDotWidth,
-      height: spinDotHight
-    },
-    [`${componentCls}-text`]: {
-      width: spinDotWidth,
-      color: colorText
+    // only work for oceanbase indicator
+    [`&${componentCls}-oceanbase`]: {
+      [`${componentCls}-dot`]: {
+        width: spinDotWidth,
+        height: spinDotHight
+      },
+      [`${componentCls}-text`]: {
+        width: spinDotWidth,
+        color: colorText
+      }
     }
   };
 };
@@ -47,6 +50,7 @@ var genNestedSizeStyle = (spinDotSize, token) => {
   const dotMarginTop = -spinDotHight / 2;
   const textPaddingTop = (spinDotHight - fontSize) / 2 + 2;
   return {
+    // only work for oceanbase indicator
     [`&${componentCls}-oceanbase`]: {
       [`${componentCls}-dot`]: {
         marginLeft: dotMarginLeft,
@@ -64,11 +68,10 @@ var genNestedSizeStyle = (spinDotSize, token) => {
 var genSpinStyle = (token) => {
   const { componentCls, spinDotSize, spinDotSizeSM, spinDotSizeLG } = token;
   return {
-    // only work for oceanbase indicator
     [`${componentCls}`]: {
-      [`&-oceanbase`]: genSizeStyle(spinDotSize, token),
-      [`&-sm&-oceanbase`]: genSizeStyle(spinDotSizeSM, token),
-      [`&-lg&-oceanbase`]: genSizeStyle(spinDotSizeLG, token)
+      [`&`]: genSizeStyle(spinDotSize, token),
+      [`&-sm`]: genSizeStyle(spinDotSizeSM, token),
+      [`&-lg`]: genSizeStyle(spinDotSizeLG, token)
     },
     [`${componentCls}-nested-loading`]: {
       [`> div > ${componentCls}`]: {

package/lib/tooltip/index.d.ts

@@ -5,6 +5,8 @@ export type TooltipType = 'default' | 'light' | 'success' | 'info' | 'warning' |
 export interface TooltipProps extends AntTooltipPropsWithTitle {
     type?: TooltipType;
     mouseFollow?: boolean;
+    closeIcon?: boolean | React.ReactNode;
+    onClose?: (e: React.MouseEvent<HTMLElement>) => void;
 }
 export declare const getTooltipTypeList: () => {
     type: string;

package/lib/tooltip/index.js

@@ -36,8 +36,13 @@ __export(tooltip_exports, {
 module.exports = __toCommonJS(tooltip_exports);
 var import_antd = require("antd");
 var import_react = __toESM(require("react"));
+var import_icons = require("@oceanbase/icons");
+var import_lodash = require("lodash");
 var import_static_function = require("../static-function");
 var import_MouseTooltip = __toESM(require("./MouseTooltip"));
+var import_config_provider = __toESM(require("../config-provider"));
+var import_style = __toESM(require("./style"));
+var import_classnames = __toESM(require("classnames"));
 __reExport(tooltip_exports, require("antd/es/tooltip"), module.exports);
 var getTooltipTypeList = () => [
   {
@@ -72,33 +77,70 @@ var Tooltip = ({
   color,
   overlayInnerStyle,
   mouseFollow,
+  closeIcon = false,
+  onClose,
+  title,
+  className,
+  open: propOpen,
   ...restProps
 }) => {
+  const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
+  const { prefixCls: customizePrefixCls } = restProps;
+  const prefixCls = getPrefixCls("tooltip", customizePrefixCls);
+  const { wrapSSR, hashId } = (0, import_style.default)(prefixCls);
+  const tooltipCls = (0, import_classnames.default)(className, hashId);
+  const [innerOpen, setInnerOpen] = (0, import_react.useState)(void 0);
+  const open = (0, import_lodash.isNil)(propOpen) ? innerOpen : propOpen;
+  const handleCloseClick = (e) => {
+    e.stopPropagation();
+    onClose == null ? void 0 : onClose(e);
+    if (e.defaultPrevented) {
+      return;
+    }
+    setInnerOpen(false);
+  };
+  const hasCloseIcon = !!closeIcon;
+  const CloseIconNode = (0, import_react.useMemo)(() => {
+    if (!hasCloseIcon) {
+      return null;
+    }
+    return closeIcon === true ? /* @__PURE__ */ import_react.default.createElement(import_icons.CloseOutlined, { className: `${prefixCls}-close-icon`, onClick: handleCloseClick }) : /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-close-icon`, onClick: handleCloseClick }, closeIcon);
+  }, [closeIcon]);
+  const titleNode = typeof title === "function" ? title() : title;
+  const titleWithCloseIcon = /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { className: `${prefixCls}-close-icon-wrap` }, titleNode, CloseIconNode);
   const typeList = getTooltipTypeList();
   const typeItem = typeList.find((item) => item.type === type);
-  return mouseFollow ? /* @__PURE__ */ import_react.default.createElement(
+  return wrapSSR(mouseFollow ? /* @__PURE__ */ import_react.default.createElement(
     import_MouseTooltip.default,
     {
+      title,
       color: color || (typeItem == null ? void 0 : typeItem.backgroundColor),
       overlayInnerStyle: {
         color: typeItem == null ? void 0 : typeItem.color,
         ...overlayInnerStyle
       },
+      className: tooltipCls,
       ...restProps
     },
     children
   ) : /* @__PURE__ */ import_react.default.createElement(
     import_antd.Tooltip,
     {
+      title: hasCloseIcon ? titleWithCloseIcon : title,
       color: color || (typeItem == null ? void 0 : typeItem.backgroundColor),
+      open,
+      onOpenChange: (open2) => {
+        setInnerOpen(open2);
+      },
       overlayInnerStyle: {
         color: typeItem == null ? void 0 : typeItem.color,
         ...overlayInnerStyle
       },
+      className: tooltipCls,
       ...restProps
     },
     children
-  );
+  ));
 };
 if (process.env.NODE_ENV !== "production") {
   Tooltip.displayName = import_antd.Tooltip.displayName;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+export type TooltipToken = FullToken<'Tooltip'>;
+export declare const genTooltipStyle: GenerateStyle<TooltipToken>;
+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/tooltip/style/index.js

@@ -0,0 +1,55 @@
+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/tooltip/style/index.ts
+var style_exports = {};
+__export(style_exports, {
+  default: () => style_default,
+  genTooltipStyle: () => genTooltipStyle
+});
+module.exports = __toCommonJS(style_exports);
+var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
+var genTooltipStyle = (token) => {
+  const { componentCls } = token;
+  return {
+    [componentCls]: {
+      [`${componentCls}-close-icon-wrap`]: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "flex-start",
+        wordBreak: "break-all",
+        [`${componentCls}-close-icon`]: {
+          cursor: "pointer"
+        }
+      }
+    }
+  };
+};
+var style_default = (prefixCls) => {
+  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Tooltip", (token) => {
+    return [genTooltipStyle(token)];
+  }, ({ zIndexPopupBase, colorBgSpotlight }) => ({
+    zIndexPopup: zIndexPopupBase + 70,
+    colorBgDefault: colorBgSpotlight
+  }));
+  return useStyle(prefixCls);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  genTooltipStyle
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/design",
-  "version": "0.2.14",
+  "version": "0.2.16",
   "description": "The Design System of OceanBase",
   "keywords": [
     "OceanBase",
@@ -36,25 +36,25 @@
     "postbuild": "cp src/style/reset.css dist/"
   },
   "dependencies": {
-    "@ant-design/cssinjs": "^1.16.2",
-    "@oceanbase/icons": "^0.2.4",
-    "@oceanbase/util": "^0.2.6",
+    "@ant-design/cssinjs": "^1.17.0",
+    "@oceanbase/icons": "^0.2.5",
+    "@oceanbase/util": "^0.2.7",
     "ahooks": "^2.10.14",
-    "antd": "^5.8.3",
+    "antd": "^5.9.0",
     "classnames": "^2.3.2",
     "lodash": "^4.17.21",
     "lottie-web": "^5.12.2",
-    "rc-util": "^5.36.0",
+    "rc-util": "^5.37.0",
     "react-sticky-mouse-tooltip": "^0.0.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.22.10",
-    "@babel/preset-env": "^7.22.10",
+    "@babel/cli": "^7.22.15",
+    "@babel/preset-env": "^7.22.15",
     "antd-token-previewer": "^1.1.0"
   },
   "peerDependencies": {
     "react": "^16.9.0",
     "react-dom": "^16.9.0"
   },
-  "gitHead": "21e309021edf43301bfc7de6e93b131afc5c6f47"
+  "gitHead": "52f5d009120b001c9c0408ec96ff954e120b20f1"
 }