@arco-design/mobile-react 2.19.0

package/umd/date-picker/type.d.ts

@@ -0,0 +1,108 @@
+import { PickerProps } from '../picker';
+import { PickerData } from '../picker-view';
+export declare type ItemType = 'year' | 'month' | 'date' | 'hour' | 'minute' | 'second';
+export interface IDateObj {
+    /**
+     * 年
+     * @en year
+     * */
+    year: number;
+    /**
+     * 月
+     * @en month
+     * */
+    month: number;
+    /**
+     * 日
+     * @en date
+     * */
+    date: number;
+    /**
+     * 时
+     * @en hour
+     *  */
+    hour: number;
+    /**
+     * 分
+     * @en minute
+     */
+    minute: number;
+    /**
+     * 秒
+     * @en second
+     * */
+    second: number;
+}
+export declare type mode = 'date' | 'time' | 'datetime';
+export interface DatePickerProps extends Omit<PickerProps, 'data' | 'cascade' | 'cols' | 'value' | 'onChange' | 'onPickerChange' | 'onOk'> {
+    /**
+     * 点击选中时执行的回调
+     * @en Callback when clicking OK
+     */
+    onOk?: (timestamp: number, obj: IDateObj) => void;
+    /**
+     * 当前选中的时间，timestamp
+     * @en The currently selected time, timestamp
+     * @default Date.now()
+     */
+    currentTs?: number;
+    /**
+     * 选中后的回调
+     * @en Callback when value is changed
+     */
+    onChange?: (timestamp: number, obj: IDateObj) => void;
+    /**
+     * 每列数据选择变化后的回调函数
+     * @en The callback function after each column data selection changes
+     */
+    onValueChange?: (timestamp: number, obj: IDateObj, index: number) => void;
+    /**
+     * 可选列类型，date - 年月日，time - 时分秒，datetime - 年月日时分秒
+     * @en Optional column type, date means year, month and day, time means hour, minute and second, datetime means year, month, day, hour, minute and second
+     * @default "datetime"
+     */
+    mode?: mode;
+    /**
+     * 可选列数组
+     * @en optional column list
+     * @default []
+     */
+    typeArr?: ItemType[];
+    /**
+     * 最小可选日期，timestamp
+     * @en Minimum selectable date, timestamp
+     * @default 当前时间的前十年
+     * @default_en 10 years ago from the current time
+     */
+    minTs?: number;
+    /**
+     * 最大可选日期，timestamp
+     * @en Maximum selectable date, timestamp
+     * @default 当前时间的后十年
+     * @default_en Next decade from current time
+     */
+    maxTs?: number;
+    /**
+     * 是否使用 UTC 时间
+     * @en Whether to use UTC
+     * @default false
+     */
+    useUTC?: boolean;
+    /**
+     * 各可选项展示的格式化方法，参数type为ItemTypes，参数value为当前行的值，返回展示的文字
+     * @en The formatting method of each optional item, the parameter type is ItemTypes, the parameter value is the value of the current row, and the displayed text is returned.
+     * @default (value: number) => (value < 10 ? \`0${value}\` : String(value))
+     */
+    formatter?: (value: number, type: ItemType) => string;
+    /**
+     * 可选择行过滤方法，参数type为ItemType，参数value为当前行的值，返回true表示该行可选择
+     * @en Row filtering method, the parameter type is ItemType, the parameter value is the value of the current row, and returns true to indicate that the row can be selected
+     * @default () => true
+     */
+    valueFilter?: (type: ItemType, value: number) => boolean;
+    /**
+     * 选择器列表项干预，可插入自定义选项
+     * @en Selector list item intervention to insert custom options.
+     */
+    columnsProcessor?: (columns: PickerData[][], currentDateObj: IDateObj) => PickerData[][];
+}

package/umd/date-picker/type.js

@@ -0,0 +1,17 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports);
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports);
+    global.type = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports) {
+  "use strict";
+
+  _exports.__esModule = true;
+});

package/umd/dialog/demo/style/css/mobile.css

@@ -0,0 +1,28 @@
+#demo-dialog {
+  padding-bottom: 0.54rem;
+}
+#demo-dialog .arcodesign-mobile-demo-content {
+  padding: 0;
+  background: transparent;
+  margin: 0 0.24rem;
+  border-radius: 0.16rem;
+  overflow: hidden;
+}
+.dialog-input-demo-input {
+  margin-top: 0.16rem;
+  padding: 0.16rem 0.24rem;
+  font-size: 0.28rem;
+  line-height: 0.4rem;
+  background-color: #F2F3F5;
+  width: 100%;
+  caret-color:  #165dff ;
+}
+.dialog-input-demo-hint {
+  color:  #86909c ;
+  margin-top: 0.16rem;
+  font-size: 0.26rem;
+  line-height: 0.36rem;
+}
+.dialog-input-demo .arco-dialog-footer .dialog-footer-button.cancel {
+  color:  #1d2129 ;
+}

package/umd/dialog/demo/style/mobile.less

@@ -0,0 +1,35 @@
+@import '../../../../style/mixin.less';
+
+#demo-dialog {
+    .rem(padding-bottom, 27);
+    .arcodesign-mobile-demo-content {
+        padding: 0;
+        background: transparent;
+        .rem(margin, 0, 12);
+        .rem(border-radius, 8);
+        overflow: hidden;
+    }
+}
+
+.dialog-input-demo {
+    &-input {
+        .rem(margin-top, 8);
+        .rem(padding, 8, 12);
+        .rem(font-size, 14);
+        .rem(line-height, 20);
+        background-color: #F2F3F5;
+        width: 100%;
+        .use-var(caret-color, primary-color);
+    }
+    &-hint {
+        .use-var(color, sub-info-font-color);
+        .rem(margin-top, 8);
+        .rem(font-size, 13);
+        .rem(line-height, 18);
+    }
+    .@{prefix}-dialog-footer {
+        .dialog-footer-button.cancel {
+            .use-var(color, font-color);
+        }
+    }
+}

package/umd/dialog/index.d.ts

@@ -0,0 +1,213 @@
+import React, { ReactNode } from 'react';
+import { ILocale } from '@arco-design/mobile-utils';
+import { MaskingCommonProps, MaskingRef, OpenBaseProps } from '../masking';
+export * from './methods';
+export interface FooterButtonOptions {
+    /**
+     * 按钮内容
+     * @en Button content
+     */
+    content: ReactNode | ((locale: ILocale) => ReactNode);
+    /**
+     * 按钮类名
+     * @en Button classname
+     *  */
+    className?: string;
+    /**
+     * 是否禁用按钮
+     * @en Whether to disable button
+     *  */
+    disabled?: boolean;
+    /**
+     * 点击按钮事件，返回值为true时可以阻止dialog关闭
+     * @en Button clicking event, when the return value is true, the dialog can be prevented from closing
+     *  */
+    onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => (void | boolean) | Promise<void | boolean>;
+}
+export interface DialogProps extends MaskingCommonProps {
+    /**
+     * 弹窗标题
+     * @en Dialog title
+     * */
+    title?: ReactNode;
+    /**
+     * 底部按钮配置
+     * @en Bottom button configuration
+     * @default []
+     */
+    footer?: FooterButtonOptions[];
+    /**
+     * 底部按钮样式，grid表示通栏样式，button表示按钮样式，platform=ios时有效
+     * @en Bottom button style, grid indicates the banner style, button indicates the button style, valid when platform = ios
+     * @default "grid"
+     */
+    footerType?: 'grid' | 'button';
+    /**
+     * 自定义渲染footer
+     * @en Custom rendering footer
+     * */
+    renderFooter?: () => ReactNode;
+    /**
+     * 底部按钮大于等于多少个时竖向排布
+     * @en Vertical arrangement when the number of buttons at the bottom is greater than or equal to the set value
+     * @default 3
+     */
+    footerCollapseCount?: number;
+    /**
+     * 标题对齐方向
+     * @en Title alignment
+     * @default platform=android 时为"left"，否则为"center"
+     * @default_en "left" when platform=android, "center" otherwise
+     */
+    titleAlign?: 'left' | 'center' | 'right';
+    /**
+     * 内容对齐方向
+     * @en Content alignment
+     * @default platform=android 时为"left"，否则为"center"
+     * @default_en "left" when platform=android, "center" otherwise
+     */
+    contentAlign?: 'left' | 'center' | 'right';
+    /**
+     * 当前所在操作系统，对应不同样式
+     * @en The current operating system, corresponding to different styles
+     * @default 跟随当前所在系统
+     * @default_en Follow the system
+     */
+    platform?: 'ios' | 'android';
+    /**
+     * 弹窗中的其他元素，比如关闭按钮等
+     * @en Other elements in the dialog, such as the close button, etc.
+     * */
+    extra?: ReactNode;
+    /**
+     * 内容过渡动画类名
+     * @en Content transition animation classname
+     * @default platform=android 时为"fade"，否则为"fade-scale"
+     * @default_en "fade" when platform=android, "fade-scale" otherwise
+     */
+    contentTransitionType?: MaskingCommonProps['contentTransitionType'];
+    /**
+     * 蒙层动画时长
+     * @en Mask animation duration
+     * @default 300
+     */
+    maskTransitionTimeout?: MaskingCommonProps['maskTransitionTimeout'];
+    /**
+     * 弹窗内容动画时长
+     * @en Dialog content animation duration
+     * @default 450
+     */
+    contentTransitionTimeout?: MaskingCommonProps['contentTransitionTimeout'];
+}
+export interface DialogRef extends MaskingRef {
+}
+export interface AlertOptions extends Omit<DialogProps, 'visible' | 'close'> {
+    /**
+     * 组件挂载容器id区分
+     * @en Component mount container id distinction
+     * */
+    key?: string;
+    /**
+     * 点击确认按钮回调
+     * @en Callback when clicking OK button
+     * */
+    onOk?: FooterButtonOptions['onClick'];
+    /**
+     * 确认按钮文字
+     * @en Ok button text
+     * */
+    okText?: ReactNode;
+}
+export interface ConfirmOptions extends AlertOptions {
+    /**
+     * 点击取消按钮回调
+     * @en Callback when clicking cancel button
+     * */
+    onCancel?: FooterButtonOptions['onClick'];
+    /**
+     * 取消按钮文字
+     * @en Cancel button text
+     * */
+    cancelText?: ReactNode;
+}
+export declare function methodsGenerator<P extends OpenBaseProps, A = AlertOptions, C = ConfirmOptions>(Comp: React.FunctionComponent<P>): {
+    /**
+     * 打开确认框(含一个确认按钮)
+     * @desc {en} Open a confirmation dialog (with a confirmation button)
+     * @param {AlertOptions & DialogProps} config Configuration
+     * @returns {{ close: () => void; update: (newConfig: AlertOptions & DialogProps) => void; }}
+     */
+    alert: (config: A) => {
+        close: () => void;
+        update: (newConfig: A) => void;
+    };
+    /**
+     * 打开提示框(含一个确认按钮和一个取消按钮)
+     * @desc {en} Open a prompt dialog (with a confirm button and a cancel button)
+     * @param {ConfirmOptions & AlertOptions} config Configuration
+     * @returns {{ close: () => void; update: (newConfig: ConfirmOptions & AlertOptions) => void; }}
+     */
+    confirm: (config: C) => {
+        close: () => void;
+        update: (newConfig: C) => void;
+    };
+    /**
+     * 打开常规对话框
+     * @desc {en} Open the general dialog
+     * @param {DialogProps} config Configuration
+     * @returns {{ close: () => void; update: (newConfig: DialogProps) => void; }}
+     */
+    open: (config: Pick<P, Exclude<keyof P, "visible" | "close">> & {
+        key?: string | undefined;
+    }) => {
+        close: () => void;
+        update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">> & {
+            key?: string | undefined;
+        }) => void;
+    };
+};
+declare const _default: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<DialogRef>> & {
+    /**
+     * 打开确认框(含一个确认按钮)
+     * @desc {en} Open a confirmation dialog (with a confirmation button)
+     * @param {AlertOptions & DialogProps} config Configuration
+     * @returns {{ close: () => void; update: (newConfig: AlertOptions & DialogProps) => void; }}
+     */
+    alert: (config: AlertOptions) => {
+        close: () => void;
+        update: (newConfig: AlertOptions) => void;
+    };
+    /**
+     * 打开提示框(含一个确认按钮和一个取消按钮)
+     * @desc {en} Open a prompt dialog (with a confirm button and a cancel button)
+     * @param {ConfirmOptions & AlertOptions} config Configuration
+     * @returns {{ close: () => void; update: (newConfig: ConfirmOptions & AlertOptions) => void; }}
+     */
+    confirm: (config: ConfirmOptions) => {
+        close: () => void;
+        update: (newConfig: ConfirmOptions) => void;
+    };
+    /**
+     * 打开常规对话框
+     * @desc {en} Open the general dialog
+     * @param {DialogProps} config Configuration
+     * @returns {{ close: () => void; update: (newConfig: DialogProps) => void; }}
+     */
+    open: (config: Pick<DialogProps & React.RefAttributes<DialogRef>, "platform" | "footer" | "title" | "ref" | "children" | "key" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer" | "footerType" | "renderFooter" | "footerCollapseCount" | "titleAlign" | "contentAlign" | "extra"> & {
+        key?: string | undefined;
+    }) => {
+        close: () => void;
+        update: (newConfig: Pick<DialogProps & React.RefAttributes<DialogRef>, "platform" | "footer" | "title" | "ref" | "children" | "key" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer" | "footerType" | "renderFooter" | "footerCollapseCount" | "titleAlign" | "contentAlign" | "extra"> & {
+            key?: string | undefined;
+        }) => void;
+    };
+};
+/**
+ * 模态对话框，在浮层中显示，引导用户进行相关操作。默认做了防滚动穿透处理，如果弹层内容中需要滚动，则需将滚动容器传入`getScrollContainer`属性以在未滚动到顶部或底部时释放滚动。
+ * @en A modal dialog, displayed in a floating layer, guides the user to perform related operations. By default, anti-scroll penetration processing is performed. If scrolling is required in the content of the bullet layer, you need to pass the scroll container to `getScrollContainer` to release scrolling when it is not scrolled to the top or bottom.
+ * @type 反馈
+ * @type_en FeedBack
+ * @name 对话框
+ * @name_en Dialog
+ */
+export default _default;

package/umd/dialog/index.js

@@ -0,0 +1,187 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "@babel/runtime/helpers/extends", "@babel/runtime/helpers/objectWithoutPropertiesLoose", "react", "@arco-design/mobile-utils", "../context-provider", "../masking", "./methods", "../_helpers"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("@babel/runtime/helpers/extends"), require("@babel/runtime/helpers/objectWithoutPropertiesLoose"), require("react"), require("@arco-design/mobile-utils"), require("../context-provider"), require("../masking"), require("./methods"), require("../_helpers"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global._extends, global.objectWithoutPropertiesLoose, global.react, global.mobileUtils, global.contextProvider, global.masking, global.methods, global._helpers);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _objectWithoutPropertiesLoose2, _react, _mobileUtils, _contextProvider, _masking, _methods, _helpers) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  var _exportNames = {
+    methodsGenerator: true
+  };
+  _exports.default = void 0;
+  _exports.methodsGenerator = methodsGenerator;
+  _extends2 = _interopRequireDefault(_extends2);
+  _objectWithoutPropertiesLoose2 = _interopRequireDefault(_objectWithoutPropertiesLoose2);
+  _react = _interopRequireWildcard(_react);
+  _masking = _interopRequireDefault(_masking);
+  Object.keys(_methods).forEach(function (key) {
+    if (key === "default" || key === "__esModule") return;
+    if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+    if (key in _exports && _exports[key] === _methods[key]) return;
+    _exports[key] = _methods[key];
+  });
+  var _excluded = ["close", "children", "title", "footer", "footerType", "renderFooter", "footerCollapseCount", "titleAlign", "contentAlign", "className", "maskClass", "contentClass", "contentStyle", "contentTransitionType", "maskTransitionTimeout", "contentTransitionTimeout", "extra"];
+
+  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+  var Dialog = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+    var system = (0, _helpers.useSystem)();
+    var nowSystem = props.platform || system;
+    var _props$close = props.close,
+        close = _props$close === void 0 ? function () {} : _props$close,
+        children = props.children,
+        title = props.title,
+        _props$footer = props.footer,
+        footer = _props$footer === void 0 ? [] : _props$footer,
+        _props$footerType = props.footerType,
+        footerType = _props$footerType === void 0 ? 'grid' : _props$footerType,
+        renderFooter = props.renderFooter,
+        _props$footerCollapse = props.footerCollapseCount,
+        footerCollapseCount = _props$footerCollapse === void 0 ? 3 : _props$footerCollapse,
+        _props$titleAlign = props.titleAlign,
+        titleAlign = _props$titleAlign === void 0 ? nowSystem === 'android' ? 'left' : 'center' : _props$titleAlign,
+        _props$contentAlign = props.contentAlign,
+        contentAlign = _props$contentAlign === void 0 ? nowSystem === 'android' ? 'left' : 'center' : _props$contentAlign,
+        className = props.className,
+        maskClass = props.maskClass,
+        contentClass = props.contentClass,
+        contentStyle = props.contentStyle,
+        _props$contentTransit = props.contentTransitionType,
+        contentTransitionType = _props$contentTransit === void 0 ? nowSystem === 'android' ? 'fade' : 'fade-scale' : _props$contentTransit,
+        _props$maskTransition = props.maskTransitionTimeout,
+        maskTransitionTimeout = _props$maskTransition === void 0 ? 300 : _props$maskTransition,
+        _props$contentTransit2 = props.contentTransitionTimeout,
+        contentTransitionTimeout = _props$contentTransit2 === void 0 ? 450 : _props$contentTransit2,
+        extra = props.extra,
+        restProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    var maskingRef = (0, _react.useRef)(null);
+    var contentRef = (0, _react.useRef)(null);
+    (0, _react.useImperativeHandle)(ref, function () {
+      var _maskingRef$current, _maskingRef$current2, _maskingRef$current3;
+
+      return {
+        dom: ((_maskingRef$current = maskingRef.current) == null ? void 0 : _maskingRef$current.dom) || null,
+        mask: ((_maskingRef$current2 = maskingRef.current) == null ? void 0 : _maskingRef$current2.mask) || null,
+        content: contentRef.current,
+        setCloseScene: ((_maskingRef$current3 = maskingRef.current) == null ? void 0 : _maskingRef$current3.setCloseScene) || function () {}
+      };
+    });
+
+    function handleFooterBtnClick(e, btn) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (btn.disabled) {
+        return;
+      }
+
+      var result = btn.onClick ? btn.onClick(e) : null;
+
+      if (!result || typeof result === 'boolean') {
+        !result && close(e);
+      } else if (result && result.then) {
+        result.then(function (res) {
+          return !res && close(e);
+        });
+      }
+    }
+
+    function renderDialog(_ref) {
+      var prefixCls = _ref.prefixCls,
+          locale = _ref.locale;
+      var prefix = prefixCls + "-dialog";
+      return /*#__PURE__*/_react.default.createElement(_masking.default, (0, _extends2.default)({
+        close: close,
+        className: (0, _mobileUtils.cls)(prefix, nowSystem, className),
+        ref: maskingRef,
+        maskClass: (0, _mobileUtils.cls)(prefix + "-mask", maskClass),
+        contentTransitionType: contentTransitionType,
+        contentClass: (0, _mobileUtils.cls)(prefix + "-container"),
+        maskTransitionTimeout: maskTransitionTimeout,
+        contentTransitionTimeout: contentTransitionTimeout
+      }, restProps), /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _mobileUtils.cls)(prefix + "-content", prefix + "-part", nowSystem, contentClass),
+        style: contentStyle,
+        ref: contentRef
+      }, title ? /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _mobileUtils.cls)(prefix + "-header", prefix + "-part", titleAlign, nowSystem, "system-" + system, {
+          'only-title': !children
+        })
+      }, title) : null, children ? /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _mobileUtils.cls)(prefix + "-body", prefix + "-part", contentAlign, nowSystem, {
+          'sub-title': !title
+        })
+      }, children) : null, renderFooter || footer.length ? /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _mobileUtils.cls)(prefix + "-footer", prefix + "-part", nowSystem, "type-" + footerType, {
+          collapsed: footer.length >= footerCollapseCount
+        })
+      }, renderFooter ? renderFooter() : footer.map(function (btn, index) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          key: index,
+          className: (0, _mobileUtils.cls)('dialog-footer-button', btn.className, "system-" + system, {
+            disabled: btn.disabled
+          }),
+          onClick: function onClick(e) {
+            return handleFooterBtnClick(e, btn);
+          }
+        }, typeof btn.content === 'function' ? btn.content(locale) : btn.content);
+      })) : null, extra ? /*#__PURE__*/_react.default.createElement("section", null, extra) : null));
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, renderDialog);
+  });
+
+  function methodsGenerator(Comp) {
+    return {
+      /**
+       * 打开确认框(含一个确认按钮)
+       * @desc {en} Open a confirmation dialog (with a confirmation button)
+       * @param {AlertOptions & DialogProps} config Configuration
+       * @returns {{ close: () => void; update: (newConfig: AlertOptions & DialogProps) => void; }}
+       */
+      alert: (0, _methods.alert)(Comp),
+
+      /**
+       * 打开提示框(含一个确认按钮和一个取消按钮)
+       * @desc {en} Open a prompt dialog (with a confirm button and a cancel button)
+       * @param {ConfirmOptions & AlertOptions} config Configuration
+       * @returns {{ close: () => void; update: (newConfig: ConfirmOptions & AlertOptions) => void; }}
+       */
+      confirm: (0, _methods.confirm)(Comp),
+
+      /**
+       * 打开常规对话框
+       * @desc {en} Open the general dialog
+       * @param {DialogProps} config Configuration
+       * @returns {{ close: () => void; update: (newConfig: DialogProps) => void; }}
+       */
+      open: (0, _methods.open)(Comp)
+    };
+  }
+  /**
+   * 模态对话框，在浮层中显示，引导用户进行相关操作。默认做了防滚动穿透处理，如果弹层内容中需要滚动，则需将滚动容器传入`getScrollContainer`属性以在未滚动到顶部或底部时释放滚动。
+   * @en A modal dialog, displayed in a floating layer, guides the user to perform related operations. By default, anti-scroll penetration processing is performed. If scrolling is required in the content of the bullet layer, you need to pass the scroll container to `getScrollContainer` to release scrolling when it is not scrolled to the top or bottom.
+   * @type 反馈
+   * @type_en FeedBack
+   * @name 对话框
+   * @name_en Dialog
+   */
+
+
+  var _default = (0, _mobileUtils.componentWrapper)(Dialog, methodsGenerator(Dialog));
+
+  _exports.default = _default;
+});

package/umd/dialog/methods.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { OpenBaseProps } from '../masking/methods';
+export declare function normalizeAlert<AlertOptions, P>(config: AlertOptions): P;
+export declare function normalizeConfirm<ConfirmOptions, P>(config: ConfirmOptions): P;
+export declare function alert<AlertOptions, P extends OpenBaseProps>(Component: React.FunctionComponent<P>, normalize?: <T, Props>(config: T) => Props): (config: AlertOptions) => {
+    close: () => void;
+    update: (newConfig: AlertOptions) => void;
+};
+export declare function confirm<ConfirmOptions, P extends OpenBaseProps>(Component: React.FunctionComponent<P>, normalize?: <T, Props>(config: T) => Props): (config: ConfirmOptions) => {
+    close: () => void;
+    update: (newConfig: ConfirmOptions) => void;
+};
+export declare function open<P extends OpenBaseProps>(Component: React.FunctionComponent<P>): (config: Pick<P, Exclude<keyof P, "visible" | "close">> & {
+    key?: string | undefined;
+}) => {
+    close: () => void;
+    update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">> & {
+        key?: string | undefined;
+    }) => void;
+};