import type { ReactNode, CSSProperties } from 'react'; import React from 'react'; import type { TransitionProps } from '../transition'; import type { OpenBaseProps } from './methods'; export * from './methods'; export interface MaskingCommonProps { /** * 自定义类名 * @en Custom classname */ className?: string; /** * 自定义蒙层类名 * @en Custom mask classname */ maskClass?: string; /** * 自定义蒙层样式 * @en Custom mask stylesheet */ maskStyle?: CSSProperties; /** * 自定义内容类名 * @en Custom content classname */ contentClass?: string; /** * 自定义内容样式 * @en Custom content stylesheet */ contentStyle?: CSSProperties; /** * 是否展示菜单（受控） * @en Whether to display the menu (controlled) */ visible: boolean; /** * 关闭菜单方法 * @en Close menu method */ close: (e: React.MouseEvent) => void; /** * 蒙层过渡动画类名 * @en Mask transition animation classname * @default "fade" */ maskTransitionType?: string; /** * 内容过渡动画类名 * @en Content transition animation classname * @default "fade" */ contentTransitionType?: string; /** * 内容过渡动画类名变量标识 * @en Content transition animation classname variable identifier */ contentTransitionVarType?: string; /** * 菜单内部内容 * @en Contents of menu */ children?: ReactNode; /** * 蒙层动画时长 * @en Mask animation duration * @default 300 */ maskTransitionTimeout?: TransitionProps['timeout']; /** * 内容动画时长 * @en Content animation duration * @default 300 */ contentTransitionTimeout?: TransitionProps['timeout']; /** * 点击蒙层是否关闭菜单 * @en Whether to click the mask to close the menu * @default true */ maskClosable?: boolean; /** * 执行进场动画时点击蒙层是否可关闭菜单 * @en Whether the menu can be closed by clicking on the mask when performing the entry animation * @default false */ animatingClosable?: boolean; /** * 是否在打开菜单时再加载内容 * @en Whether to reload content when the menu is opened * @default true */ mountOnEnter?: boolean; /** * 是否在退出时卸载内容 * @en Whether to unmount content on exit * @default true */ unmountOnExit?: boolean; /** * transform方向，用于通过transform模拟横屏的情况 * @en The transform direction, used to simulate the situation of horizontal screen through transform * @default "top" */ orientationDirection?: 'top' | 'bottom' | 'left' | 'right'; /** * 弹窗打开时是否禁止body的滚动 * @en Whether to prohibit the scrolling of the body when the popup is opened * @default true */ preventBodyScroll?: boolean; /** * 页面初始 overflow 状态，即关闭弹窗时 overflow 应该还原的状态 * @en The initial overflow state of the page, that is, the state in which overflow should be restored when the popup is closed * @default 第一个全屏组件（弹窗、toast等）打开时页面overflow值 * @default_en The page overflow value when the first fullscreen component (popup, toast, etc.) is opened */ initialBodyOverflow?: string; /** * 是否禁用滚动容器手势判断，禁用后交给业务方自己判断 * @en Whether to disable the scrolling container gesture judgment, leave it to users to judge * @default false */ gestureOutOfControl?: boolean; /** * 关闭后回调（动画执行完毕） * @en Callback after closing (animation is completed) */ onClose?: (scene?: string) => void; /** * 打开后回调（动画执行完毕） * @en Callback after opening (animation is completed) */ onOpen?: () => void; /** * 点击蒙层回调，maskClosable=false时也会触发 * @en Callback when clicking the mask , also triggered when maskClosable=false */ onMaskClick?: () => void; /** * 弹窗的touchmove回调 * @en Touch event callbacks for masking */ onTouchMove?: (e: TouchEvent, prevented: boolean, direction: 'x' | 'y') => void; /** * 非滚动区域或滚动到顶部及底部时的触摸事件回调 * @en Touch event callbacks for non-scrolling areas or when scrolling to the top and bottom */ onPreventTouchMove?: (e: TouchEvent, direction: 'x' | 'y') => void; /** * 获取挂载容器 * @en Get mounted container */ getContainer?: () => HTMLElement; /** * 内容内部滚动区域容器，在该容器中未滚动到顶部或底部时会释放滚动 * @en Container of inner scroll area in content, scroll is released when not scrolled to the top or bottom in this container */ getScrollContainer?: () => HTMLElement[] | HTMLElement | null; } export interface MaskingProps extends MaskingCommonProps { /** * 弹窗内容是否居中 * @en Whether the content of the popup window is centered * @default false */ contentAtCenter?: boolean; } export interface MaskingRef { /** * 最外层元素 DOM * @en The outermost element DOM */ dom: HTMLDivElement | null; /** * 蒙层 DOM * @en Mask DOM */ mask: HTMLDivElement | null; /** * 内容 DOM * @en Content DOM */ content: HTMLDivElement | null; /** * 在关闭弹窗前修改 onClose 的 scene 参数值 * @en Modify the scene of onClose before closing the popup */ setCloseScene: (scene: string) => void; } export declare function methodsGenerator

(Comp: React.FunctionComponent

): { /** * 打开模态弹窗 * @desc {en} Open a Masking * @param {MaskingProps} config Configuration * @returns {{ close: () => void; update: (newConfig: MaskingProps) => void; }} */ open: (config: Pick> & { key?: string | undefined; }, context?: import("../context-provider").GlobalContextParams | undefined) => { close: () => void; update: (newConfig: Pick> & { key?: string | undefined; }) => void; }; }; declare const _default: React.ForwardRefExoticComponent> & { /** * 打开模态弹窗 * @desc {en} Open a Masking * @param {MaskingProps} config Configuration * @returns {{ close: () => void; update: (newConfig: MaskingProps) => void; }} */ open: (config: Pick>, "ref" | "className" | "children" | "context" | "key" | "getScrollContainer" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "contentAtCenter" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "contentTransitionVarType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove"> & { key?: string | undefined; }, context?: import("../context-provider").GlobalContextParams | undefined) => { close: () => void; update: (newConfig: Pick>, "ref" | "className" | "children" | "context" | "key" | "getScrollContainer" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "contentAtCenter" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "contentTransitionVarType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove"> & { key?: string | undefined; }) => void; }; }; /** * 通用模态弹窗，内部内容自定义。默认做了防滚动穿透处理，如果弹层内容中需要滚动，则需将滚动容器传入`getScrollContainer`属性以在未滚动到顶部或底部时释放滚动。 * @en Generic modal popup with custom internal content. By default, anti-scroll penetration processing is performed. If scrolling is required in the content of the bullet layer, need to pass the scroll container to the `getScrollContainer` to release scrolling when it is not scrolled to the top or bottom. * @type 反馈 * @type_en Feedback * @name 模态弹窗 * @name_en Masking */ export default _default;