@oceanbase/design 0.2.13 → 0.2.15

package/lib/lottie/index.js

@@ -0,0 +1,79 @@
+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/lottie/index.tsx
+var lottie_exports = {};
+__export(lottie_exports, {
+  default: () => lottie_default
+});
+module.exports = __toCommonJS(lottie_exports);
+var import_lottie_web = __toESM(require("lottie-web"));
+var import_react = __toESM(require("react"));
+var import_ahooks = require("ahooks");
+var import_classnames = __toESM(require("classnames"));
+var Lottie = import_react.default.forwardRef(
+  ({ mode = "default", loop = true, speed = 1, className, style, ...restProps }, ref) => {
+    const [animation, setAnimation] = (0, import_react.useState)();
+    const containerRef = (0, import_react.useRef)();
+    (0, import_react.useEffect)(() => {
+      if (!animation) {
+        const newAnimation = import_lottie_web.default.loadAnimation({
+          container: containerRef.current,
+          renderer: "svg",
+          loop,
+          ...restProps
+        });
+        setAnimation(newAnimation);
+      }
+    }, []);
+    (0, import_ahooks.useUpdateEffect)(() => {
+      if (animation) {
+        animation.setLoop(loop);
+        animation.setSpeed(speed);
+      }
+    }, [loop, speed]);
+    (0, import_react.useImperativeHandle)(ref, () => ({
+      animation
+    }));
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        ref: containerRef,
+        className: (0, import_classnames.default)(className, {
+          // 图标展示模式，则追加 anticon 类名
+          ["anticon"]: mode === "icon"
+        }),
+        style: {
+          display: "inline-block",
+          ...style
+        }
+      }
+    );
+  }
+);
+var lottie_default = Lottie;

package/lib/modal/Modal.d.ts

@@ -0,0 +1,30 @@
+import type { ModalProps } from 'antd/es/modal';
+import React from 'react';
+declare const Modal: {
+    ({ prefixCls: customizePrefixCls, className, ...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 default Modal;

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, ...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,52 +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,
-  ...restProps
-}) => {
-  const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
-  const prefixCls = getPrefixCls("modal", customizePrefixCls);
-  const { wrapSSR, hashId } = (0, import_style.default)(prefixCls);
-  const modalCls = (0, import_classnames.default)(className, hashId);
-  return wrapSSR(
-    /* @__PURE__ */ import_react.default.createElement(
-      import_antd.Modal,
-      {
-        prefixCls: customizePrefixCls,
-        className: modalCls,
-        rootClassName: (0, import_classnames.default)(rootClassName, hashId),
-        ...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

@@ -25,15 +25,74 @@ __export(style_exports, {
 module.exports = __toCommonJS(style_exports);
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genModalStyle = (token) => {
-  const { componentCls, marginLG } = token;
+  const {
+    antCls,
+    componentCls,
+    marginSM,
+    marginLG,
+    paddingMD,
+    borderRadius,
+    controlHeight,
+    fontSizeHeading5,
+    lineHeightHeading5
+  } = token;
+  const top = 100;
+  const bottom = 100;
+  const titleHeight = fontSizeHeading5 * lineHeightHeading5;
   return {
+    /* Modal */
     [`${componentCls}:not(${componentCls}-confirm)`]: {
       [`${componentCls}-header`]: {
         marginBottom: marginLG
       },
+      [`${componentCls}-body`]: {
+        maxHeight: `calc(100vh - ${top + bottom}px - ${paddingMD * 2}px - ${marginLG * 2}px - ${titleHeight + controlHeight}px)`,
+        overflowY: "auto",
+        borderRadius
+      },
       [`${componentCls}-footer`]: {
         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
+      },
+      [`${componentCls}-confirm-btns`]: {
+        marginTop: marginLG
+      }
     }
   };
 };