@arco-design/mobile-react 2.31.5 → 2.32.0

package/esnext/toast/index.d.ts

@@ -0,0 +1,257 @@
+import React, { ReactNode } from 'react';
+import { ToastBaseProps } from './methods';
+export * from './methods';
+export declare type ToastType = 'success' | 'error' | 'warn';
+export interface ToastProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 提示内容
+     * @en Tip content
+     */
+    content?: React.ReactNode;
+    /**
+     * 自动关闭的延时（单位: ms），设置为0则不会自动关闭
+     * @en Duration of automatic shutdown (unit: ms), if set to 0, it will not automatically shutdown
+     * @default 3000
+     */
+    duration?: number;
+    /**
+     * 自定义图标
+     * @en Custom icon
+     */
+    icon?: React.ReactNode;
+    /**
+     * 内容排列布局
+     * @en Content layout
+     * @default "vertical"
+     */
+    layout?: 'vertical' | 'horizontal';
+    /**
+     * 打开关闭动画执行时长（单位: ms）
+     * @en Open and close animation duration (unit: ms)
+     * @default 300
+     */
+    transitionDuration?: number;
+    /**
+     * 关闭函数
+     * @en Close function
+     */
+    close?: () => void;
+    /**
+     * 关闭后的回调函数
+     * @en Callback after closing
+     */
+    onClose?: () => void;
+    /**
+     * 是否为加载态
+     * @en Whether it is in the loading state
+     */
+    loading?: boolean;
+    /**
+     * 加载图标，传入Icon组件type属性或node
+     * @en Loading icon, input the type or node of icon component
+     */
+    loadingIcon?: React.ReactNode;
+    /**
+     * 加载图标内部元素，仅在 loading 为 true 时生效
+     * @en Inner element of loading icon, only takes effect when loading is true
+     */
+    loadingInner?: string;
+    /**
+     * 是否禁止toast以外区域的交互
+     * @en Whether to prohibit interaction in areas other than toast
+     * @default false
+     */
+    disableBodyTouch?: boolean;
+    /**
+     * 是否显示toast
+     * @en Whether to show toast
+     * @default false
+     */
+    visible?: boolean;
+    /**
+     * 获取挂载容器
+     * @en Get mounted container
+     */
+    getContainer?: () => HTMLElement;
+    /**
+     * toast展示信息类型，不同类型对应不同图标，info表示纯文字信息无图标
+     * @en toast displays information types, different types correspond to different icons, info means plain text information without icons
+     * @default "info"
+     */
+    type?: ToastType | 'info';
+    /**
+     * toast出现位置
+     * @en The direction where the toast appears
+     * @default "center"
+     */
+    direction?: 'center' | 'top' | 'bottom';
+    /**
+     * 自定义不同类型对应的不同图标
+     * @en Customize different icons corresponding to different types
+     */
+    typeIconMap?: Partial<Record<ToastType, ReactNode>>;
+    /**
+     * 页面初始 overflow 状态，即关闭toast时 overflow 应该还原的状态
+     * @en The initial overflow state of the page, that is, the state of overflow should be restored when toast is closed
+     * @default 第一个全屏组件（弹窗、toast等）打开时页面overflow值
+     * @default_en The page overflow value when the first fullscreen component (popup, toast, etc.) is opened
+     */
+    initialBodyOverflow?: string;
+}
+export interface ToastRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}
+export declare function methodsGenerator<P extends ToastBaseProps>(Comp: React.FunctionComponent<P>): {
+    /**
+     * 展示常规提示框
+     * @desc {en} Show regular toast
+     * @param {string | ToastProps} config Configuration
+     * @returns {{ update: (config: ToastProps) => void; close: () => void }}
+     */
+    toast: (originConfig: string | Pick<P, Exclude<keyof P, "visible" | "close">>, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">>) => void;
+        close: () => void;
+        hide: () => void;
+    };
+    /**
+     * 展示常规提示框，同 Toast.toast
+     * @desc {en} Show regular toast, the same as Toast.toast
+     * @param {string | ToastProps} config Configuration
+     * @returns {{ update: (config: ToastProps) => void; close: () => void }}
+     */
+    info: (originConfig: string | Pick<P, Exclude<keyof P, "visible" | "close">>, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">>) => void;
+        close: () => void;
+        hide: () => void;
+    };
+    /**
+     * 展示成功提示框(含成功icon)
+     * @desc {en} Show success prompt toast (including success icon)
+     * @param {string | ToastProps} config Configuration
+     * @returns {{ update: (config: ToastProps) => void; close: () => void }}
+     */
+    success: (originConfig: string | Pick<P, Exclude<keyof P, "visible" | "close">>, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">>) => void;
+        close: () => void;
+        hide: () => void;
+    };
+    /**
+     * 展示错误提示框(含错误icon)
+     * @desc {en} Display error prompt toast (including error icon)
+     * @param {string | ToastProps} config Configuration
+     * @returns {{ update: (config: ToastProps) => void; close: () => void }}
+     */
+    error: (originConfig: string | Pick<P, Exclude<keyof P, "visible" | "close">>, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">>) => void;
+        close: () => void;
+        hide: () => void;
+    };
+    /**
+     * 展示加载中提示框(含加载中icon)
+     * @desc {en} Display loading prompt toast (including loading icon)
+     * @param {string | ToastProps} config Configuration
+     * @returns {{ update: (config: ToastProps) => void; close: () => void }}
+     */
+    loading: (originConfig: string | Pick<P, Exclude<keyof P, "visible" | "close">>, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">>) => void;
+        close: () => void;
+        hide: () => void;
+    };
+    /**
+     * 展示警告提示框(含警告icon)
+     * @desc {en} Display warning prompt toast (including warning icon)
+     * @param {string | ToastProps} config Configuration
+     * @returns {{ update: (config: ToastProps) => void; close: () => void }}
+     */
+    warn: (originConfig: string | Pick<P, Exclude<keyof P, "visible" | "close">>, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">>) => void;
+        close: () => void;
+        hide: () => void;
+    };
+};
+declare const _default: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<ToastRef>> & {
+    /**
+     * 展示常规提示框
+     * @desc {en} Show regular toast
+     * @param {string | ToastProps} config Configuration
+     * @returns {{ update: (config: ToastProps) => void; close: () => void }}
+     */
+    toast: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+        close: () => void;
+        hide: () => void;
+    };
+    /**
+     * 展示常规提示框，同 Toast.toast
+     * @desc {en} Show regular toast, the same as Toast.toast
+     * @param {string | ToastProps} config Configuration
+     * @returns {{ update: (config: ToastProps) => void; close: () => void }}
+     */
+    info: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+        close: () => void;
+        hide: () => void;
+    };
+    /**
+     * 展示成功提示框(含成功icon)
+     * @desc {en} Show success prompt toast (including success icon)
+     * @param {string | ToastProps} config Configuration
+     * @returns {{ update: (config: ToastProps) => void; close: () => void }}
+     */
+    success: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+        close: () => void;
+        hide: () => void;
+    };
+    /**
+     * 展示错误提示框(含错误icon)
+     * @desc {en} Display error prompt toast (including error icon)
+     * @param {string | ToastProps} config Configuration
+     * @returns {{ update: (config: ToastProps) => void; close: () => void }}
+     */
+    error: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+        close: () => void;
+        hide: () => void;
+    };
+    /**
+     * 展示加载中提示框(含加载中icon)
+     * @desc {en} Display loading prompt toast (including loading icon)
+     * @param {string | ToastProps} config Configuration
+     * @returns {{ update: (config: ToastProps) => void; close: () => void }}
+     */
+    loading: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+        close: () => void;
+        hide: () => void;
+    };
+    /**
+     * 展示警告提示框(含警告icon)
+     * @desc {en} Display warning prompt toast (including warning icon)
+     * @param {string | ToastProps} config Configuration
+     * @returns {{ update: (config: ToastProps) => void; close: () => void }}
+     */
+    warn: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+        close: () => void;
+        hide: () => void;
+    };
+};
+/**
+ * 轻提示组件，支持各个场景下调用方法。
+ * @en The toast component, supports calling methods in various scenarios.
+ * @type 反馈
+ * @type_en Feedback
+ * @name 轻提示
+ * @name_en Toast
+ */
+export default _default;

package/esnext/toast/index.js

@@ -0,0 +1,142 @@
+import React, { useEffect, forwardRef, useRef, useImperativeHandle } from 'react';
+import { cls, componentWrapper } from '@arco-design/mobile-utils';
+import { ContextLayout, CompWithGlobalContext } from '../context-provider';
+import Transition from '../transition';
+import IconErrorCircle from '../icon/IconErrorCircle';
+import IconWarnCircle from '../icon/IconWarnCircle';
+import IconSuccessCircle from '../icon/IconSuccessCircle';
+import Portal from '../portal';
+import { toast } from './methods';
+import Loading from '../loading';
+import { usePreventBodyScroll } from '../_helpers';
+export * from './methods';
+const Toast = forwardRef((props, ref) => {
+    const { className, getContainer, visible = false, onClose, close, type = 'info', icon, layout = 'vertical', duration = 3000, transitionDuration = 300, content, loading = false, loadingIcon, disableBodyTouch = false, loadingInner, direction = 'center', typeIconMap, initialBodyOverflow, } = props;
+    const closeTimerRef = useRef();
+    const domRef = useRef(null);
+    const wrapDomRef = useRef(null);
+    const isInitialMount = useRef(false);
+    const hasType = type && type !== 'info';
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+    usePreventBodyScroll(visible, disableBodyTouch, initialBodyOverflow);
+    function handleClose() {
+        if (close) {
+            close();
+        }
+    }
+    function startCloseTimer() {
+        if (duration) {
+            clearTimeout(closeTimerRef.current);
+            closeTimerRef.current = window.setTimeout(() => {
+                handleClose();
+            }, duration);
+        }
+    }
+    function handleClickMask(e) {
+        if (disableBodyTouch) {
+            e.preventDefault();
+        }
+    }
+    function getTypeIcons() {
+        const map = typeIconMap || {};
+        const defaultMap = {
+            success: React.createElement(IconSuccessCircle, null),
+            error: React.createElement(IconErrorCircle, null),
+            warn: React.createElement(IconWarnCircle, null),
+        };
+        return map[type] || defaultMap[type] || null;
+    }
+    useEffect(() => {
+        const mounted = isInitialMount.current;
+        if (visible) {
+            startCloseTimer();
+        }
+        else {
+            clearTimeout(closeTimerRef.current);
+            if (mounted) {
+                setTimeout(() => {
+                    onClose && onClose();
+                }, transitionDuration);
+            }
+        }
+        isInitialMount.current = true;
+    }, [visible]);
+    useEffect(() => {
+        startCloseTimer();
+    }, [duration]);
+    function renderComponent(prefixClass) {
+        return (React.createElement("div", { className: cls(`${prefixClass}-wrapper`, `from-${direction}`, {
+                'no-event': !disableBodyTouch,
+            }), onClick: handleClickMask, ref: wrapDomRef },
+            React.createElement("div", { className: cls(`${prefixClass}-inner`, layout, {
+                    [`${prefixClass}-inner-mixin`]: (loading || hasType || icon) && layout === 'vertical',
+                }) },
+                loading && (React.createElement("div", { className: `${prefixClass}-loading-wrapper` },
+                    loadingIcon !== void 0 ? (loadingIcon) : (React.createElement(Loading, { className: "loading-icon", type: "arc", stroke: 2, radius: loadingInner ? 19 : 11 })),
+                    loadingInner ? (React.createElement("span", { className: `${prefixClass}-loading-inner` }, loadingInner)) : null)),
+                !loading && hasType ? getTypeIcons() : null,
+                !loading && !hasType && icon ? icon : null,
+                content ? React.createElement("div", { className: `${prefixClass}-content` }, content) : null)));
+    }
+    return (React.createElement(ContextLayout, null, ({ prefixCls }) => (React.createElement(Portal, { getContainer: getContainer },
+        React.createElement("div", { className: cls(`${prefixCls}-toast`, 'all-border-box', className), ref: domRef },
+            React.createElement(Transition, { in: visible, timeout: transitionDuration, type: "fade", nodeRef: wrapDomRef }, renderComponent(`${prefixCls}-toast`)))))));
+});
+export function methodsGenerator(Comp) {
+    return {
+        /**
+         * 展示常规提示框
+         * @desc {en} Show regular toast
+         * @param {string | ToastProps} config Configuration
+         * @returns {{ update: (config: ToastProps) => void; close: () => void }}
+         */
+        toast: toast(Comp),
+        /**
+         * 展示常规提示框，同 Toast.toast
+         * @desc {en} Show regular toast, the same as Toast.toast
+         * @param {string | ToastProps} config Configuration
+         * @returns {{ update: (config: ToastProps) => void; close: () => void }}
+         */
+        info: toast(Comp, 'info'),
+        /**
+         * 展示成功提示框(含成功icon)
+         * @desc {en} Show success prompt toast (including success icon)
+         * @param {string | ToastProps} config Configuration
+         * @returns {{ update: (config: ToastProps) => void; close: () => void }}
+         */
+        success: toast(Comp, 'success'),
+        /**
+         * 展示错误提示框(含错误icon)
+         * @desc {en} Display error prompt toast (including error icon)
+         * @param {string | ToastProps} config Configuration
+         * @returns {{ update: (config: ToastProps) => void; close: () => void }}
+         */
+        error: toast(Comp, 'error'),
+        /**
+         * 展示加载中提示框(含加载中icon)
+         * @desc {en} Display loading prompt toast (including loading icon)
+         * @param {string | ToastProps} config Configuration
+         * @returns {{ update: (config: ToastProps) => void; close: () => void }}
+         */
+        loading: toast(Comp, 'loading'),
+        /**
+         * 展示警告提示框(含警告icon)
+         * @desc {en} Display warning prompt toast (including warning icon)
+         * @param {string | ToastProps} config Configuration
+         * @returns {{ update: (config: ToastProps) => void; close: () => void }}
+         */
+        warn: toast(Comp, 'warn'),
+    };
+}
+const ToastWithGlobalContext = CompWithGlobalContext(Toast);
+/**
+ * 轻提示组件，支持各个场景下调用方法。
+ * @en The toast component, supports calling methods in various scenarios.
+ * @type 反馈
+ * @type_en Feedback
+ * @name 轻提示
+ * @name_en Toast
+ */
+export default componentWrapper(Toast, methodsGenerator(ToastWithGlobalContext));

package/esnext/toast/methods.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { GlobalContextParams } from '../context-provider';
+export interface ToastBaseProps {
+    getContainer?: () => HTMLElement;
+    onClose?: (scene?: string) => void;
+    content?: React.ReactNode;
+    visible?: boolean;
+    close?: (e: any) => void;
+    type?: string;
+    loading?: boolean;
+}
+export declare function toast<P extends ToastBaseProps>(Component: React.FunctionComponent<P>, type?: string): (originConfig: string | Pick<P, Exclude<keyof P, "visible" | "close">>, context?: GlobalContextParams | undefined) => {
+    update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">>) => void;
+    close: () => void;
+    hide: () => void;
+};

package/esnext/toast/methods.js

@@ -0,0 +1,61 @@
+import { nextTick } from '@arco-design/mobile-utils';
+import { ReactDOMRender } from '../_helpers/render';
+export function toast(Component, type) {
+    return (originConfig, context) => {
+        const config = typeof originConfig === 'string'
+            ? {
+                content: originConfig,
+                type: 'info',
+            }
+            : originConfig;
+        if (type !== void 0) {
+            config.type = type;
+            config.loading = type === 'loading';
+        }
+        const div = document.createElement('div');
+        document.body.appendChild(div);
+        const { render, unmount } = new ReactDOMRender(Component, div, context);
+        function destroy() {
+            const { onClose } = config;
+            onClose && onClose();
+            unmount();
+            if (div.parentNode) {
+                div.parentNode.removeChild(div);
+            }
+        }
+        let dynamicProps = {
+            ...config,
+            close,
+            getContainer: () => div,
+            onClose: destroy,
+            visible: false,
+        };
+        let leaving = false;
+        function update(newConfig) {
+            dynamicProps = {
+                ...dynamicProps,
+                ...newConfig,
+            };
+            render(dynamicProps);
+        }
+        function close() {
+            leaving = true;
+            dynamicProps.visible = false;
+            render(dynamicProps);
+        }
+        render(dynamicProps);
+        nextTick(() => {
+            // 在即将打开时发现已经调用了close则取消打开操作
+            // @en When it is about to be opened, it is found that close has been called and the open operation is canceled
+            if (leaving)
+                return;
+            dynamicProps.visible = true;
+            render(dynamicProps);
+        });
+        return {
+            update,
+            close,
+            hide: close,
+        };
+    };
+}