https://github.com/react-widget/trigger
https://react-widget.github.io/trigger/
https://github.com/react-widget/trigger
react react-widget trigger
Last synced: 3 months ago
JSON representation
https://react-widget.github.io/trigger/
- Host: GitHub
- URL: https://github.com/react-widget/trigger
- Owner: react-widget
- License: mit
- Created: 2018-12-28T05:53:38.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T02:41:02.000Z (about 3 years ago)
- Last Synced: 2025-10-14T16:08:46.637Z (3 months ago)
- Topics: react, react-widget, trigger
- Language: TypeScript
- Homepage:
- Size: 6.73 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# trigger
Trigger触发组件
## 安装
`npm install --save react-widget-trigger`
## 使用
[](https://codesandbox.io/s/react-wiget-trigger-llvwn?fontsize=14&hidenavigation=1&theme=dark)
```js
import React from "react";
import Trigger from "react-widget-trigger";
import "react-widget-trigger/style";
import "./styles.css";
export default function App() {
return (
)}
action={["click"]}
>
点击试试
);
}
```
### Interfaces
```ts
import React from "react";
import Popup, { PopupProps } from "react-widget-popup";
import { PositionOptions } from "jq-position";
type Placements =
| "left"
| "top"
| "right"
| "bottom"
| "topLeft"
| "topRight"
| "leftTop"
| "leftBottom"
| "rightTop"
| "rightBottom"
| "bottomRight"
| "bottomLeft"
declare type ActionType = "click" | "contextMenu" | "focus" | "hover" | "mouseDown";
declare type ShowActionType = "click" | "contextMenu" | "focus" | "mouseEnter" | "mouseDown";
declare type HideActionType = "click" | "mouseLeave" | "blur" | "resize" | "scroll" | "mouseDown";
declare type Delay = {
show?: number;
hide?: number;
};
export declare const version = "%VERSION%";
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;
/** 显示/隐藏延迟时间 */
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;
/** 弹出框样式 */
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;
}
export interface TriggerState {
popupVisible: boolean;
}
export declare class Trigger extends React.Component {
popupInstance: Popup;
triggerInstance: React.ReactInstance;
show(): void;
hide(): void;
updatePopupPosition(): void;
}
export default Trigger;
```
### defaultProps
```js
{
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,
}
```
### 基础样式
```css
.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;
}
```