react-widget-trigger
Version:
159 lines (158 loc) • 7.32 kB
TypeScript
import React from "react";
import Popup, { PopupProps } from "react-widget-popup";
import { PositionOptions, Feedback } from "jq-position";
import { PortalProps } from "react-widget-portal";
import { Placements } from "./getPlacement";
export type { Placements, PositionOptions, Feedback };
export declare type ActionType = "click" | "contextMenu" | "focus" | "hover" | "mouseDown";
export declare type ShowActionType = "click" | "contextMenu" | "focus" | "mouseEnter" | "mouseDown";
export declare type HideActionType = "click" | "mouseLeave" | "blur" | "resize" | "mouseDown";
export declare type Delay = {
show?: number;
hide?: number;
};
export declare const version = "%VERSION%";
export declare function feedbackToPlacement(feedback: Feedback): any;
export interface TriggerProps {
/** 样式前缀 */
prefixCls?: string;
/** 弹出框显示位置 */
placement?: Placements;
/** 弹出框位置偏移量 */
offset?: [number, number] | number;
/** 触发事件 */
action?: ActionType | ActionType[] | null;
/** 显示触发事件,同action合并 */
showAction?: ShowActionType | ShowActionType[] | null;
/** 隐藏触发事件,同action合并 */
hideAction?: HideActionType | HideActionType[] | null;
/** 点击popup或trigger元素以外的节点时隐藏popup事件 */
outsideHideEventName?: Array<keyof HTMLElementEventMap> | keyof HTMLElementEventMap;
/** 显示/隐藏延迟时间 */
delay?: number | Delay;
/** 禁用触发器 */
disabled?: boolean;
/** 触发后弹出显示内容 */
popup?: React.ReactNode | ((trigger: Trigger) => React.ReactNode);
/** 弹出框CSS样式 */
popupClassName?: string;
/** 弹出框遮罩层CSS样式 */
popupMaskClassName?: string;
/** 弹出框根节点元素CSS样式 */
popupRootClassName?: string;
/** 弹出框CSSTransition参数,参考:react-transition-group */
popupTransition?: PopupProps["transition"];
/** 弹出框遮罩层CSSTransition参数,参考:react-transition-group */
popupMaskTransition?: PopupProps["maskTransition"];
/** 初始时弹出框是否可见 */
defaultPopupVisible?: boolean;
/** 控制弹出框是否可见(受控) */
popupVisible?: boolean;
/** 弹出框组件(Popup)属性,参考:react-widget-popup */
popupProps?: Omit<PopupProps, "className" | "maskClassName" | "rootClassName" | "prefixCls" | "transition" | "maskTransition" | "maskProps" | "style" | "mask" | "disableMask" | "destroyOnClose" | "maskStyle" | "rootStyle" | "zIndex">;
/** 弹出框样式 */
popupStyle?: React.CSSProperties;
/** 弹出框遮罩层样式 */
popupMaskStyle?: React.CSSProperties;
popupRootStyle?: React.CSSProperties;
/** 弹出框的遮罩层元素的属性,参考:PopupProps["maskProps"] */
popupMaskProps?: PopupProps["maskProps"];
/** 是否显示遮罩层 */
mask?: boolean;
/** 是否禁用遮罩层 */
disableMask?: boolean;
/** 点击遮罩层隐藏弹出框 */
maskClosable?: boolean;
/** 隐藏销毁弹出框 */
destroyPopupOnHide?: boolean;
/** 设置弹出框的zIndex */
zIndex?: number;
/** 是否使用Portal进行渲染弹出框 */
usePortal?: boolean;
/** 当destroyPopupOnHide=false时,组件刷新时强制更新弹出框组件 */
forceRender?: boolean;
/** jquery-ui/position.js 的配置参数 */
position?: PositionOptions;
/** popup位置最终适配方法 */
adjustPosition?: (dom: HTMLElement, pos: {
left: number;
top: number;
}, feedback: Feedback) => void;
/** portal挂载容器 */
container?: PortalProps["container"];
/** 内部使用 */
getDocument?: () => Document | Element;
/** 内部使用 */
checkDefaultPrevented?: boolean;
onPopupVisibleChange?: (visible: boolean) => void;
onBeforeShow?: (popupNode: HTMLElement) => void;
onAfterShow?: (popupNode: HTMLElement) => void;
onBeforeHide?: (popupNode: HTMLElement) => void;
onAfterHide?: (popupNode: HTMLElement) => void;
}
export interface TriggerState {
popupVisible: boolean;
}
export declare class Trigger extends React.Component<TriggerProps, TriggerState> {
static defaultProps: TriggerProps;
static getDerivedStateFromProps(nextProps: TriggerProps, state: TriggerState): {
popupVisible: boolean;
};
state: Readonly<TriggerState>;
protected delayTimer: number | null;
popupInstance: Popup;
triggerInstance: React.ReactInstance;
protected refHandlers: {
popup: (node: Popup) => Popup;
trigger: (node: React.ReactInstance) => React.ReactInstance;
};
protected clickOutsideHandler: null | (() => void);
protected touchOutsideHandler: null | (() => void);
protected contextMenuOutsideHandler1: null | (() => void);
protected contextMenuOutsideHandler2: null | (() => void);
protected windowScrollHandler: null | (() => void);
protected windowResizeHandler: null | (() => void);
componentDidMount(): void;
componentDidUpdate(): void;
componentWillUnmount(): void;
protected togglePopupCloseEvents(): void;
getTriggerNode(): HTMLElement;
getPopupNode(): HTMLElement | null;
protected getComponentNode(): HTMLElement;
protected onOutsideClickToHide: (event: MouseEvent) => void;
protected clearOutsideHandler(): void;
protected _setPopupVisible(popupVisible: boolean): void;
show(): void;
hide(): void;
protected clearDelayTimer(): void;
protected getDelayTime(action?: "show" | "hide"): number;
protected delaySetPopupVisible(visible: boolean): void;
protected checkToShow(actions: Array<ActionType | ShowActionType>): boolean;
protected checkToHide(actions: Array<ActionType | HideActionType>): boolean;
protected isContextMenuToShow(): boolean;
protected isMouseDownToShow(): boolean;
protected isMouseDownToHide(): boolean;
protected isClickToShow(): boolean;
protected isClickToHide(): boolean;
protected isMouseEnterToShow(): boolean;
protected isMouseLeaveToHide(): boolean;
protected isFocusToShow: () => boolean;
protected isBlurToHide: () => boolean;
protected isWindowResizeToHide: () => boolean;
protected onContextMenu(e: React.MouseEvent): void;
protected onTriggerClick(e: React.MouseEvent): void;
protected onTriggerMouseDown(e: React.MouseEvent): void;
protected onMouseEnter: (e: React.MouseEvent) => void;
protected onMouseLeave: (e: React.MouseEvent) => void;
protected onFocus: (e: React.FocusEvent) => void;
protected onBlur: (e: React.FocusEvent) => void;
protected onContextMenuClose: () => void;
protected removeClassNames(popupNode: HTMLElement): void;
protected addPlacementClassName(popupNode: HTMLElement, feedback: Feedback): void;
protected setPopupPosition(dom: HTMLElement): void;
updatePopupPosition(): void;
protected getPopupComponent(): JSX.Element;
protected genNewChildProps(child: React.ReactElement): React.HTMLAttributes<any>;
render(): JSX.Element;
}
export default Trigger;