@bifrostui/react 1.3.0 → 1.3.1-beta.0

package/es/Collapse/Collapse.js

@@ -0,0 +1,144 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import React, { useEffect, useRef } from "react";
+import {
+  useForkRef,
+  duration,
+  easing,
+  getTransitionProps,
+  createTransitions
+} from "@bifrostui/utils";
+import { Transition } from "../Transition";
+import "./Collapse.css";
+const defaultEasing = {
+  enter: easing.easeOut,
+  exit: easing.sharp
+};
+const defaultTimeout = {
+  enter: duration.enteringScreen,
+  exit: duration.leavingScreen
+};
+const Collapse = /* @__PURE__ */ React.forwardRef((props, ref) => {
+  const _a = props, {
+    appear = false,
+    in: inProp,
+    easing: easingProp = defaultEasing,
+    direction = "vertical",
+    timeout = defaultTimeout,
+    delay = 0,
+    collapsedSize: collapsedSizeProp = 0,
+    style,
+    className,
+    children
+  } = _a, other = __objRest(_a, [
+    "appear",
+    "in",
+    "easing",
+    "direction",
+    "timeout",
+    "delay",
+    "collapsedSize",
+    "style",
+    "className",
+    "children"
+  ]);
+  const nodeRef = useForkRef(ref);
+  const wrapperRef = useRef(null);
+  const collapseRef = useForkRef(wrapperRef, ref);
+  const transitions = createTransitions();
+  const isHorizontal = direction === "horizontal";
+  const collapsedSize = typeof collapsedSizeProp === "number" ? `${collapsedSizeProp}px` : collapsedSizeProp;
+  const size = isHorizontal ? "width" : "height";
+  const getCollapseWrapperSize = (reactNode) => {
+    return reactNode ? `${reactNode[isHorizontal ? "clientWidth" : "clientHeight"]}px` : "fit-content";
+  };
+  useEffect(() => {
+    var _a2, _b, _c, _d;
+    if (appear === false && inProp === true && ((_b = (_a2 = wrapperRef.current) == null ? void 0 : _a2.style) == null ? void 0 : _b[size]) === "fit-content") {
+      wrapperRef.current.style[size] = getCollapseWrapperSize(
+        (_d = (_c = wrapperRef.current) == null ? void 0 : _c.children) == null ? void 0 : _d[0]
+      );
+    }
+  }, [appear, inProp]);
+  if (!children)
+    return null;
+  return /* @__PURE__ */ React.createElement(
+    Transition,
+    __spreadProps(__spreadValues({}, other), {
+      ref: nodeRef,
+      in: inProp,
+      timeout,
+      delay,
+      appear
+    }),
+    (state, childProps) => {
+      var _a2;
+      const transition = transitions.create(
+        size,
+        getTransitionProps(
+          { timeout, style, easing: easingProp, delay },
+          { mode: state }
+        )
+      );
+      const wrapperSize = () => {
+        var _a3, _b;
+        const collapseWrapperSize = state === "entering" || state === "entered" ? getCollapseWrapperSize((_b = (_a3 = wrapperRef.current) == null ? void 0 : _a3.children) == null ? void 0 : _b[0]) : collapsedSize;
+        return isHorizontal ? {
+          width: collapseWrapperSize,
+          WebKitWidth: collapseWrapperSize
+        } : {
+          height: collapseWrapperSize,
+          WebKitHeight: collapseWrapperSize
+        };
+      };
+      return React.createElement(
+        "div",
+        {
+          className: `bui-collapse ${className}`,
+          style: __spreadValues(__spreadProps(__spreadValues({}, style), {
+            transition,
+            WebkitTransition: transition
+          }), wrapperSize()),
+          ref: collapseRef
+        },
+        React.cloneElement(children, __spreadValues({
+          style: __spreadValues({}, (_a2 = children.props) == null ? void 0 : _a2.style)
+        }, childProps))
+      );
+    }
+  );
+});
+Collapse.displayName = "BuiCollapse";
+var Collapse_default = Collapse;
+export {
+  Collapse_default as default
+};

package/es/Collapse/Collapse.types.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { TransitionProps } from '../Transition';
+export interface CollapseProps extends Omit<TransitionProps, 'children'> {
+    easing?: string | {
+        enter?: string;
+        exit?: string;
+    };
+    children?: React.ReactElement;
+    /**
+     * 折叠的方向
+     * horizontal - 水平方向
+     * vertical - 垂直方向
+     */
+    direction?: 'horizontal' | 'vertical';
+    collapsedSize?: string | number;
+}

package/es/Collapse/Collapse.types.js

@@ -0,0 +1 @@
+export {};

package/es/Collapse/index.d.ts

@@ -0,0 +1,2 @@
+export { default, default as Collapse } from './Collapse';
+export * from './Collapse.types';

package/es/Collapse/index.js

@@ -0,0 +1,6 @@
+import { default as default2, default as default3 } from "./Collapse";
+export * from "./Collapse.types";
+export {
+  default3 as Collapse,
+  default2 as default
+};

package/es/CollapsePanel/CollapsePanel.css

@@ -0,0 +1,32 @@
+.bui-collapse-panel {
+  --width: var(--bui-collapse-panel-width, 100%);
+  --header-padding: var(--bui-collapse-panel-header-padding, var(--bui-spacing-lg) 0);
+  --content-padding: var(--bui-collapse-panel-content-padding, var(--bui-spacing-lg) 0);
+  width: var(--width);
+  background-color: var(--bui-color-bg-view);
+  color: var(--bui-color-fg-default);
+}
+.bui-collapse-panel-item-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: solid 1px #eee;
+  cursor: pointer;
+}
+.bui-collapse-panel-item-header-label {
+  padding: var(--header-padding);
+  font-size: var(--bui-title-size-2);
+}
+.bui-collapse-panel-item-header-icon-arrow {
+  transform: rotate(0deg);
+  transition: all 0.3s ease;
+}
+.bui-collapse-panel-item-header-icon-arrow-active {
+  transform: rotate(-180deg);
+}
+.bui-collapse-panel-item-content {
+  padding: var(--content-padding);
+  font-size: var(--bui-text-size-1);
+  transition: height 0.5s ease;
+  overflow: hidden;
+}

package/es/CollapsePanel/CollapsePanel.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { CollapsePanelProps } from './CollapsePanel.types';
+import './CollapsePanel.less';
+declare const CollapsePanel: React.ForwardRefExoticComponent<Omit<CollapsePanelProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default CollapsePanel;

package/es/CollapsePanel/CollapsePanel.js

@@ -0,0 +1,132 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import React from "react";
+import clsx from "clsx";
+import { ArrowDownwardLargeIcon } from "@bifrostui/icons";
+import { useValue } from "@bifrostui/utils";
+import CollapseItem from "./CollapsePanelItem";
+import "./CollapsePanel.css";
+const prefixCls = "bui-collapse-panel";
+const CollapsePanel = /* @__PURE__ */ React.forwardRef(
+  (props, ref) => {
+    const _a = props, {
+      className,
+      style,
+      accordion = false,
+      activeKeys,
+      defaultActiveKeys,
+      items,
+      children,
+      arrowIcon,
+      onChange
+    } = _a, others = __objRest(_a, [
+      "className",
+      "style",
+      "accordion",
+      "activeKeys",
+      "defaultActiveKeys",
+      "items",
+      "children",
+      "arrowIcon",
+      "onChange"
+    ]);
+    const [openKeys, setOpenKeys] = useValue({
+      defaultValue: defaultActiveKeys || [],
+      value: activeKeys
+    });
+    const handleClick = (event, target) => {
+      var _a2;
+      const targetKey = target == null ? void 0 : target.key;
+      let newOpenKeys = [];
+      if (accordion) {
+        newOpenKeys = openKeys.includes(targetKey) ? [] : [targetKey];
+      } else {
+        newOpenKeys = openKeys.includes(targetKey) ? openKeys.filter((k) => k !== targetKey) : [targetKey, ...openKeys];
+      }
+      setOpenKeys(event, newOpenKeys);
+      onChange == null ? void 0 : onChange(event, { activeKeys: newOpenKeys });
+      (_a2 = target == null ? void 0 : target.onClick) == null ? void 0 : _a2.call(target, event);
+    };
+    const getArrowIcon = () => {
+      if (arrowIcon) {
+        return arrowIcon;
+      }
+      return /* @__PURE__ */ React.createElement(ArrowDownwardLargeIcon, null);
+    };
+    const renderList = () => {
+      if (Array.isArray(items)) {
+        return items.map((item) => {
+          const _a2 = item, { key } = _a2, otherProps = __objRest(_a2, ["key"]);
+          return /* @__PURE__ */ React.createElement(
+            CollapseItem,
+            __spreadProps(__spreadValues({
+              key,
+              icon: getArrowIcon(),
+              active: openKeys.includes(item.key)
+            }, otherProps), {
+              onClick: (e) => handleClick(e, item)
+            })
+          );
+        });
+      }
+      const enhancedChildren = React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          const newProps = {
+            icon: getArrowIcon(),
+            active: openKeys.includes(child.key),
+            onClick: (e) => handleClick(e, child)
+          };
+          return React.cloneElement(child, newProps);
+        }
+        return child;
+      });
+      return enhancedChildren;
+    };
+    if (items == null && children == null) {
+      return null;
+    }
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      __spreadValues({
+        className: clsx(prefixCls, className),
+        style,
+        ref
+      }, others),
+      /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-list` }, renderList())
+    );
+  }
+);
+CollapsePanel.displayName = "BuiCollapsePanel";
+var CollapsePanel_default = CollapsePanel;
+export {
+  CollapsePanel_default as default
+};

package/es/CollapsePanel/CollapsePanel.types.d.ts

@@ -0,0 +1,64 @@
+import { OverrideProps } from '@bifrostui/types';
+import React from 'react';
+export type CollapsePanelItemProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 唯一标识，对应 activeKey
+         */
+        key?: string | number;
+        /**
+         * 面板标题
+         */
+        label?: React.ReactNode;
+        /**
+         * 自定义 icon
+         */
+        icon?: React.ReactNode | ((active: boolean) => React.ReactNode);
+        /**
+         * 是否展开
+         * @default false
+         */
+        active?: boolean;
+        /**
+         * body 区域内容
+         */
+        children?: React.ReactNode;
+    };
+    defaultComponent: D;
+}, D>;
+export type CollapsePanelProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 是否开启手风琴模式
+         * @default false
+         */
+        accordion?: boolean;
+        /**
+         * 当前激活面板的 key
+         */
+        activeKeys?: (number | string)[];
+        /**
+         * 默认展开面板的 key
+         */
+        defaultActiveKeys?: (number | string)[];
+        /**
+         * 折叠项目内容
+         */
+        items?: Array<CollapsePanelItemProps>;
+        /**
+         * body 区域内容，使用 CollapseItem 进行渲染
+         */
+        children?: React.ReactNode;
+        /**
+         * 自定义箭头图标
+         */
+        arrowIcon?: React.ReactNode | ((active: boolean) => React.ReactNode);
+        /**
+         * 切换面板时触发
+         */
+        onChange?: (e: React.SyntheticEvent, params: {
+            activeKeys: (number | string)[];
+        }) => void;
+    };
+    defaultComponent: D;
+}, D>;

package/es/CollapsePanel/CollapsePanel.types.js

@@ -0,0 +1 @@
+export {};

package/es/CollapsePanel/CollapsePanelItem.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CollapsePanelItemProps } from './CollapsePanel.types';
+declare const CollapsePanelItem: React.ForwardRefExoticComponent<Omit<CollapsePanelItemProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default CollapsePanelItem;

package/es/CollapsePanel/CollapsePanelItem.js

@@ -0,0 +1,85 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import React from "react";
+import clsx from "clsx";
+import { Collapse } from "../Collapse";
+const prefixCls = "bui-collapse-panel-item";
+const CollapsePanelItem = /* @__PURE__ */ React.forwardRef((props, ref) => {
+  const _a = props, {
+    className,
+    style,
+    label,
+    children,
+    icon,
+    active,
+    onClick
+  } = _a, others = __objRest(_a, [
+    "className",
+    "style",
+    "label",
+    "children",
+    "icon",
+    "active",
+    "onClick"
+  ]);
+  const isControlledIcon = typeof icon === "function";
+  const getIcon = () => {
+    return typeof icon === "function" ? icon(active) : icon;
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    __spreadValues({
+      className: clsx(prefixCls, active && `${prefixCls}-active`, className),
+      style,
+      ref
+    }, others),
+    /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-header`, onClick }, /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-header-label` }, label), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: clsx(
+          `${prefixCls}-header-icon`,
+          `${prefixCls}-header-icon-arrow`,
+          {
+            [`${prefixCls}-header-icon-arrow-active`]: !isControlledIcon && active
+          }
+        )
+      },
+      getIcon()
+    )),
+    /* @__PURE__ */ React.createElement(Collapse, { in: active, direction: "vertical", timeout: 300 }, /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-content` }, children))
+  );
+});
+CollapsePanelItem.displayName = "BuiCollapsePanelItem";
+CollapsePanelItem.defaultProps = {
+  active: false
+};
+var CollapsePanelItem_default = CollapsePanelItem;
+export {
+  CollapsePanelItem_default as default
+};

package/es/CollapsePanel/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './CollapsePanel';
+export { default as CollapsePanel } from './CollapsePanel';
+export { default as CollapsePanelItem } from './CollapsePanelItem';
+export * from './CollapsePanel.types';

package/es/CollapsePanel/index.js

@@ -0,0 +1,9 @@
+import { default as default2 } from "./CollapsePanel";
+import { default as default3 } from "./CollapsePanel";
+import { default as default4 } from "./CollapsePanelItem";
+export * from "./CollapsePanel.types";
+export {
+  default3 as CollapsePanel,
+  default4 as CollapsePanelItem,
+  default2 as default
+};

package/es/Countdown/Countdown.css

@@ -2,6 +2,7 @@
   --font-size: var(--bui-countdown-font-size, var(--bui-text-size-1));
   --color: var(--bui-countdown-color, var(--bui-color-fg-default));
   --font-weight: var(--bui-countdown-font-weight, var(--bui-font-weight-normal));
+  --slice-unit-margin: var(--bui-countdown-slice-unit-margin, 0 2px);
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -34,5 +35,5 @@
     sans-serif;
 }
 .bui-countdown-slice-unit {
-  margin: 0 2px;
+  margin: var(--slice-unit-margin);
 }

package/es/Dialog/Dialog.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DialogProps } from './Dialog.types';
+import { DialogProps, DialogRef } from './Dialog.types';
 import './index.less';
-declare const Dialog: React.ForwardRefExoticComponent<Omit<DialogProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Dialog: React.ForwardRefExoticComponent<Omit<DialogProps, "ref"> & React.RefAttributes<DialogRef>>;
 export default Dialog;

package/es/Dialog/Dialog.js

@@ -29,11 +29,13 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import React, { useRef } from "react";
 import clsx from "clsx";
+import React, { useImperativeHandle, useRef } from "react";
 import { Input } from "../Input";
 import { Button } from "../Button";
+import { useLocaleText } from "../locales";
 import Modal from "../Modal";
+import { useTheme } from "../ThemeProvider";
 import "./index.css";
 const prefixCls = "bui-dialog";
 const Dialog = /* @__PURE__ */ React.forwardRef((props, ref) => {
@@ -48,7 +50,8 @@ const Dialog = /* @__PURE__ */ React.forwardRef((props, ref) => {
     cancelText,
     placeholder,
     InputProps,
-    className
+    className,
+    theme
   } = _a, others = __objRest(_a, [
     "open",
     "onOk",
@@ -60,9 +63,19 @@ const Dialog = /* @__PURE__ */ React.forwardRef((props, ref) => {
     "cancelText",
     "placeholder",
     "InputProps",
-    "className"
+    "className",
+    "theme"
   ]);
   const InputRef = useRef(null);
+  const themeConfig = useTheme(theme);
+  const {
+    cancel,
+    confirm,
+    placeholder: placeholderLocaleName
+  } = useLocaleText("dialog", themeConfig);
+  useImperativeHandle(ref, () => {
+    return { theme: themeConfig };
+  });
   const footerNode = /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-body-footer` }, /* @__PURE__ */ React.createElement(
     Button,
     {
@@ -70,7 +83,7 @@ const Dialog = /* @__PURE__ */ React.forwardRef((props, ref) => {
       onClick: onClose,
       className: `${prefixCls}-body-button`
     },
-    cancelText || "\u53D6\u6D88"
+    cancelText || cancel
   ), /* @__PURE__ */ React.createElement(
     Button,
     {
@@ -82,14 +95,14 @@ const Dialog = /* @__PURE__ */ React.forwardRef((props, ref) => {
       },
       className: `${prefixCls}-body-button`
     },
-    confirmText || "\u786E\u5B9A"
+    confirmText || confirm
   ));
   const inputNode = type === "prompt" && /* @__PURE__ */ React.createElement(
     Input,
     __spreadProps(__spreadValues({}, InputProps), {
       inputRef: InputRef,
       className: `${prefixCls}-body-input`,
-      placeholder: `${placeholder || "\u8BF7\u5728\u6B64\u5904\u8F93\u5165"}`
+      placeholder: `${placeholder || placeholderLocaleName}`
     })
   );
   if (!open)
@@ -100,8 +113,7 @@ const Dialog = /* @__PURE__ */ React.forwardRef((props, ref) => {
       open: true,
       className: clsx(prefixCls, className),
       disablePortal: true,
-      onClose,
-      ref
+      onClose
     }),
     /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-body` }, header && /* @__PURE__ */ React.createElement("h1", { className: `${prefixCls}-body-title` }, header), message && /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-body-desc` }, message), inputNode, footerNode)
   );

package/es/Dialog/Dialog.types.d.ts

@@ -1,11 +1,15 @@
 import React, { ReactNode } from 'react';
 import { ModalProps } from '../Modal/Modal.types';
 import { InputProps } from '../Input/Input.types';
+import { ThemeProps } from '../ThemeProvider/ThemeProvider.types';
 /**
  * 对话框类型
  */
 export type DialogType = 'confirm' | 'prompt';
 export type Dispatch = (action: boolean, val?: string) => void;
+export type DialogRef = {
+    theme?: ThemeProps;
+};
 export interface DialogProps extends ModalProps {
     /**
      * 对话框类型
@@ -36,6 +40,10 @@ export interface DialogProps extends ModalProps {
      * 取消文本内容
      */
     cancelText?: ReactNode;
+    /**
+     * theme 主题定制
+     */
+    theme?: ThemeProps;
     /**
      * 确认回调
      */
@@ -82,7 +90,7 @@ export type DialogPromise = Promise<boolean | string>;
 /**
  * Dialog Instance
  */
-export interface DialogInstance {
+export interface DialogFunction {
     /**
      * 直接调用显示确认框 Dialog
      */
@@ -96,3 +104,6 @@ export interface DialogInstance {
      */
     prompt?: (options: PromptOptions, val?: string) => DialogPromise;
 }
+export interface DialogInstance extends DialogFunction {
+    useDialog: () => [DialogFunction, React.JSX.Element];
+}