@arco-design/mobile-react 2.31.6 → 2.32.0

package/esnext/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, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        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, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        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;
+    }, context?: import("../context-provider").GlobalContextParams | 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, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        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, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        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<import("../context-provider").WithGlobalContext<DialogProps & React.RefAttributes<DialogRef>>, "platform" | "footer" | "title" | "children" | "ref" | "key" | "context" | "className" | "getScrollContainer" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "footerType" | "renderFooter" | "footerCollapseCount" | "titleAlign" | "contentAlign" | "extra"> & {
+        key?: string | undefined;
+    }, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        close: () => void;
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<DialogProps & React.RefAttributes<DialogRef>>, "platform" | "footer" | "title" | "children" | "ref" | "key" | "context" | "className" | "getScrollContainer" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "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/esnext/dialog/index.js

@@ -0,0 +1,87 @@
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import { cls, componentWrapper } from '@arco-design/mobile-utils';
+import { ContextLayout, CompWithGlobalContext } from '../context-provider';
+import Masking from '../masking';
+import { alert, confirm, open } from './methods';
+import { useSystem } from '../_helpers';
+export * from './methods';
+const Dialog = forwardRef((props, ref) => {
+    const system = useSystem();
+    const nowSystem = props.platform || system;
+    const { close = () => { }, children, title, footer = [], footerType = 'grid', renderFooter, footerCollapseCount = 3, titleAlign = nowSystem === 'android' ? 'left' : 'center', contentAlign = nowSystem === 'android' ? 'left' : 'center', className, maskClass, contentClass, contentStyle, contentTransitionType = nowSystem === 'android' ? 'fade' : 'fade-scale', maskTransitionTimeout = 300, contentTransitionTimeout = 450, extra, ...restProps } = props;
+    const maskingRef = useRef(null);
+    const contentRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        dom: maskingRef.current?.dom || null,
+        mask: maskingRef.current?.mask || null,
+        content: contentRef.current,
+        setCloseScene: maskingRef.current?.setCloseScene || (() => { }),
+    }));
+    function handleFooterBtnClick(e, btn) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (btn.disabled) {
+            return;
+        }
+        const result = btn.onClick ? btn.onClick(e) : null;
+        if (!result || typeof result === 'boolean') {
+            !result && close(e);
+        }
+        else if (result && result.then) {
+            result.then(res => !res && close(e));
+        }
+    }
+    function renderDialog({ prefixCls, locale }) {
+        const prefix = `${prefixCls}-dialog`;
+        return (React.createElement(Masking, Object.assign({ close: close, className: cls(prefix, nowSystem, className), ref: maskingRef, maskClass: cls(`${prefix}-mask`, maskClass), contentTransitionType: contentTransitionType, contentClass: cls(`${prefix}-container`), maskTransitionTimeout: maskTransitionTimeout, contentTransitionTimeout: contentTransitionTimeout }, restProps),
+            React.createElement("div", { className: cls(`${prefix}-content`, `${prefix}-part`, nowSystem, contentClass), style: contentStyle, ref: contentRef },
+                title ? (React.createElement("div", { className: cls(`${prefix}-header`, `${prefix}-part`, titleAlign, nowSystem, `system-${system}`, { 'only-title': !children }) }, title)) : null,
+                children ? (React.createElement("div", { className: cls(`${prefix}-body`, `${prefix}-part`, contentAlign, nowSystem, {
+                        'sub-title': !title,
+                    }) }, children)) : null,
+                renderFooter || footer.length ? (React.createElement("div", { className: cls(`${prefix}-footer`, `${prefix}-part`, nowSystem, `type-${footerType}`, {
+                        collapsed: footer.length >= footerCollapseCount,
+                    }) }, renderFooter
+                    ? renderFooter()
+                    : footer.map((btn, index) => (React.createElement("div", { key: index, className: cls('dialog-footer-button', btn.className, `system-${system}`, { disabled: btn.disabled }), onClick: e => handleFooterBtnClick(e, btn) }, typeof btn.content === 'function'
+                        ? btn.content(locale)
+                        : btn.content))))) : null,
+                extra ? React.createElement("section", null, extra) : null)));
+    }
+    return React.createElement(ContextLayout, null, renderDialog);
+});
+export 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: 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: confirm(Comp),
+        /**
+         * 打开常规对话框
+         * @desc {en} Open the general dialog
+         * @param {DialogProps} config Configuration
+         * @returns {{ close: () => void; update: (newConfig: DialogProps) => void; }}
+         */
+        open: open(Comp),
+    };
+}
+const DialogWithGlobalContext = CompWithGlobalContext(Dialog);
+/**
+ * 模态对话框，在浮层中显示，引导用户进行相关操作。默认做了防滚动穿透处理，如果弹层内容中需要滚动，则需将滚动容器传入`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 componentWrapper(Dialog, methodsGenerator(DialogWithGlobalContext));

package/esnext/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, context?: import("../context-provider").GlobalContextParams | undefined) => {
+    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, context?: import("../context-provider").GlobalContextParams | undefined) => {
+    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;
+}, context?: import("../context-provider").GlobalContextParams | undefined) => {
+    close: () => void;
+    update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">> & {
+        key?: string | undefined;
+    }) => void;
+};

package/esnext/dialog/methods.js

@@ -0,0 +1,42 @@
+import { getOpenMethod, open as maskingOpen } from '../masking/methods';
+export function normalizeAlert(config) {
+    const { onOk, okText, ...restConfig } = config || {};
+    return {
+        footer: [
+            {
+                content: okText || ((locale) => locale.Dialog.okText),
+                className: 'confirm',
+                onClick: onOk,
+            },
+        ],
+        ...restConfig,
+    };
+}
+export function normalizeConfirm(config) {
+    const { onOk, okText, onCancel, cancelText, ...restConfig } = config || {};
+    return {
+        footer: [
+            {
+                content: cancelText || ((locale) => locale.Dialog.cancelText),
+                className: 'cancel',
+                onClick: onCancel,
+            },
+            {
+                content: okText || ((locale) => locale.Dialog.okText),
+                className: 'confirm',
+                onClick: onOk,
+            },
+        ],
+        ...restConfig,
+    };
+}
+const dialogId = 'ARCO_DIALOG';
+export function alert(Component, normalize) {
+    return getOpenMethod(Component, dialogId, normalize || normalizeAlert);
+}
+export function confirm(Component, normalize) {
+    return getOpenMethod(Component, dialogId, normalize || normalizeConfirm);
+}
+export function open(Component) {
+    return maskingOpen(Component, dialogId);
+}