trigger

Trigger触发组件

安装

npm install --save react-widget-trigger

使用

importReactfrom"react";importTriggerfrom"react-widget-trigger";import"react-widget-trigger/style";import"./styles.css";exportdefaultfunctionApp(){return(<divclassName="App"style={{padding: 100}}><Triggeroffset={1}placement="bottomRight"popup={trigger=>(<divstyle={{width: 100,height: 100,border: "1px solid #f2f2f2",padding: 10}}><div>Title</div><div>
Content
<TriggerusePortal={false}action="hover"delay={50}offset={1}popup={<divstyle={{width: 150}}>
hover popup test...
</div>}><ahref="###">Hover</a></Trigger></div><buttononClick={()=>trigger.hide()}>关闭</button></div>)}action={["click"]}><button>点击试试</button></Trigger></div>);}

Interfaces

importReactfrom"react";importPopup,{PopupProps}from"react-widget-popup";import{PositionOptions}from"jq-position";typePlacements=|"left"|"top"|"right"|"bottom"|"topLeft"|"topRight"|"leftTop"|"leftBottom"|"rightTop"|"rightBottom"|"bottomRight"|"bottomLeft"declaretypeActionType="click"|"contextMenu"|"focus"|"hover"|"mouseDown";declaretypeShowActionType="click"|"contextMenu"|"focus"|"mouseEnter"|"mouseDown";declaretypeHideActionType="click"|"mouseLeave"|"blur"|"resize"|"scroll"|"mouseDown";declaretypeDelay={show?: number;hide?: number;};exportdeclareconstversion="%VERSION%";exportinterfaceTriggerProps{/** 样式前缀 */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<keyofHTMLElementEventMap>|keyofHTMLElementEventMap;/** 显示/隐藏延迟时间 */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;/** popup位置最终适配方法 */adjustPosition?: (dom: HTMLElement,pos: {left: number;top: number;},feedback: Feedback)=>void;/** 是否使用Portal进行渲染弹出框 */usePortal?: boolean;/** 当destroyPopupOnHide=false时，组件刷新时强制更新弹出框组件 */forceRender?: boolean;/** jquery-ui/position.js 的配置参数 */position?: PositionOptions;/** 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;}exportinterfaceTriggerState{popupVisible: boolean;}exportdeclareclassTriggerextendsReact.Component<TriggerProps,TriggerState>{popupInstance: Popup;triggerInstance: React.ReactInstance;show(): void;hide(): void;updatePopupPosition(): void;}exportdefaultTrigger;

defaultProps

{prefixCls: "rw-trigger",placement: "bottomLeft",offset: 0,defaultPopupVisible: false,action: ["click"],showAction: [],hideAction: [],outsideHideEventName: ["mousedown","click","scroll"],delay: 0,getDocument: ()=>window.document,container: document.body,mask: false,maskClosable: true,destroyPopupOnHide: true,popupProps: {},popupStyle: {},popupMaskStyle: {},checkDefaultPrevented: false,usePortal: true,}

基础样式

.rw-trigger-root {
position: absolute;
left:0;
right:0;
top:0;
}
.rw-trigger {
position: absolute;
left:0;
top:0;
z-index:2000;
}
.rw-trigger-mask {
position: fixed;
left:0;
top:0;
right:0;
bottom:0;
background:#000;
opacity:0.1;
z-index:2000;
}