import { CSSProperties, ReactNode, HTMLAttributes } from 'react';
/**
* @title Trigger 触发器
*/
export interface TriggerProps {
warpClassName?: string | string[];
className?: string | string[];
/**
* 弹出框(外部)的样式
*/
style?: CSSProperties;
/**
* 弹出框(内部)的样式
*/
popupStyle?: CSSProperties;
/**
* 弹出层跟随鼠标位置
*/
alignPoint?: boolean;
/**
* 自动对齐子元素的宽度设置弹出框的宽度
*/
autoAlignPopupWidth?: boolean;
/**
* 自动对齐子元素的宽度设置弹出框的最小宽度
*/
autoAlignPopupMinWidth?: boolean;
/**
* 动画类名
* @defaultValue fadeIn
*/
classNames?: string;
/**
* classname
* @defaultValue
*/
rootClassName?: string;
/**
* 动画过渡时间
* @defaultValue 200
*/
duration?: number | {
exit?: number;
enter?: number;
appear?: number;
};
/**
* 设置这个参数后,打开弹出后,children 上会添加一个名为 `${childrenPrefix}-open` 的类。
*/
childrenPrefix?: string;
/**
* 是否禁用
*/
disabled?: boolean;
/**
* mouseenter 触发延时的毫秒数
* @defaultValue 100
*/
mouseEnterDelay?: number;
/**
* mouseleave 触发延时的毫秒数
* @defaultValue 100
*/
mouseLeaveDelay?: number;
/**
* focus 触发延时的毫秒数
*/
focusDelay?: number;
/**
* 在该元素上执行 clickOutside,触发弹出框关闭
* @defaultValue () => window.document
*/
getDocument?: () => Element;
/**
* 设置弹出内容所插入的父元素
*/
getPopupContainer?: (node: HTMLElement) => Element;
/**
* 隐藏后是否销毁 DOM 结构
* @defaultValue true
*/
unmountOnExit?: boolean;
/**
* 触发方式
* @defaultValue hover
*/
trigger?: 'hover' | 'click' | 'focus' | 'contextMenu' | Array<'hover' | 'click' | 'focus' | 'contextMenu'>;
/**
* 弹出位置,一共有 12 个方位可供选择
* @defaultValue bottom
*/
position?: 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb';
/**
* 弹出框的内容
*/
popup?: ({ onClose }: {
onClose: any;
}) => ReactNode;
/**
* 是否根据空间自动调整弹出框的位置。
* @defaultValue true
*/
autoFitPosition?: boolean;
/**
* 默认弹出层位置会根据视口边界进行定位及微调,此参数可以设置到视口边界一定距离时即进行定位调整。仅在 autoFitPosition=true 且 alignPoint=false 生效。
*/
boundaryDistance?: {
left?: number;
bottom?: number;
} | {
left?: number;
top?: number;
} | {
right?: number;
bottom?: number;
} | {
right?: number;
top?: number;
};
/**
* 是否在鼠标移出触发节点,移入弹出框时保留弹出框。
*/
popupHoverStay?: boolean;
/**
* 是否在触发节点失去焦点的时候关闭弹出框,仅在 `trigger` 中含有 `focus` 时生效
*/
blurToHide?: boolean;
/**
* 是否在鼠标移出触发节点和弹出层的时候关闭弹出层
* @defaultValue true
*/
mouseLeaveToClose?: boolean;
/**
* 是否能通过点击触发节点来关闭弹出框。trigger 包含 click, contextMenu 时,默认为 true。否则为 false
*/
clickToClose?: boolean;
/**
* 是否在点击空白处(触发节点和弹出框以外的区域)时关闭弹出层。 关闭时会触发 `onVisibleChange`。默认是在冒泡阶段触发该逻辑,可设置 `{ capture: true }` 指定捕获阶段触发
* @defaultValue true
*/
clickOutsideToClose?: boolean | {
capture: boolean;
};
/**
* 是否允许按 `ESC` 键关闭弹出框。
*/
escToClose?: boolean;
/**
* 是否在容器滚动时关闭弹出框
*/
containerScrollToClose?: boolean;
/**
* 按钮点击事件(`trigger` 包含 `click` 时生效)
*/
onClick?: (e: any) => void;
/**
* 按钮点击事件(`trigger` 包含 `click` 时生效)
*/
onContextMenu?: (e: any) => void;
/**
* 点击触发节点和弹出框以外的区域的回调。
*/
onClickOutside?: Function;
/**
* @zh
* 调整弹出框的位置,有四个属性值,`left`, `right`, `top`, `bottom`,分别表示向该方向移动几个像素。
* @defaultValue {}
*/
popupAlign?: {
left?: number | [number, number];
right?: number | [number, number];
top?: number | [number, number];
bottom?: number | [number, number];
};
/**
* 默认弹出框开启或关闭
*/
defaultPopupVisible?: boolean;
/**
* 设置弹出框开启或关闭
*/
popupVisible?: boolean;
/**
* 显示或隐藏时触发的回调
*/
onVisibleChange?: (visible: boolean, eventName?: string) => void;
/**
* 当内容发生变化导致内容区域尺寸发生变化,自动进行重新定位。
* @defaultValue true
*/
autoFixPosition?: boolean;
/**
* 是否展示箭头元素
*/
showArrow?: boolean;
/**
* 箭头元素的所有 html 参数
*/
arrowProps?: HTMLAttributes;
/**
* 是否在容器滚动时更新弹出框的位置
*/
updateOnScroll?: boolean;
children?: ReactNode;
__onExit?: (event: any) => void;
__onExited?: (event: any) => void;
event?: Event | React.MouseEvent;
}
export declare type MouseLocationType = {
clientX: number;
clientY: number;
};