0
# Event Handling
1

2
Comprehensive event system supporting multiple trigger actions with customizable delays and behaviors. The event system handles various user interactions including click, hover, focus, and context menu actions.
3

4
## Capabilities
5

6
### Action Configuration
7

8
Core action types and configuration for controlling when popups show and hide.
9

10
```typescript { .api }
11
/**
12
 * Available trigger action types
13
 */
14
type ActionType = string; // Common actions: 'click', 'hover', 'focus', 'contextMenu', 'mouseEnter', 'mouseLeave', 'blur'
15

16
interface TriggerProps {
17
  /** Primary trigger actions (both show and hide) */
18
  action?: ActionType | ActionType[];
19
  
20
  /** Specific actions that show the popup (overrides action) */
21
  showAction?: ActionType[];
22
  
23
  /** Specific actions that hide the popup (overrides action) */
24
  hideAction?: ActionType[];
25
}
26
```
27

28
### Timing and Delays
29

30
Customizable delays for different action types to improve user experience.
31

32
```typescript { .api }
33
interface TriggerProps {
34
  /** Delay in seconds before showing popup on mouse enter */
35
  mouseEnterDelay?: number; // default: 0
36
  
37
  /** Delay in seconds before hiding popup on mouse leave */
38
  mouseLeaveDelay?: number; // default: 0.1
39
  
40
  /** Delay in seconds before showing popup on focus */
41
  focusDelay?: number; // default: 0
42
  
43
  /** Delay in seconds before hiding popup on blur */
44
  blurDelay?: number; // default: 0.15
45
}
46
```
47

48
### Event Callbacks
49

50
Callbacks for handling popup and trigger events.
51

52
```typescript { .api }
53
interface TriggerProps {
54
  /** Called when popup visibility changes */
55
  onPopupVisibleChange?: (visible: boolean) => void;
56
  
57
  /** Called after popup visibility change animation completes */
58
  afterPopupVisibleChange?: (visible: boolean) => void;
59
  
60
  /** Called when popup is clicked */
61
  onPopupClick?: React.MouseEventHandler<HTMLDivElement>;
62
  
63
  /** Called when popup alignment is complete */
64
  onPopupAlign?: (element: HTMLElement, align: AlignType) => void;
65
}
66
```
67

68
**Usage Examples:**
69

70
```typescript
71
import React, { useState } from "react";
72
import Trigger from "rc-trigger";
73

74
// Click trigger
75
function ClickTrigger() {
76
  return (
77
    <Trigger
78
      action={['click']}
79
      popup={<div>Click to toggle</div>}
80
      onPopupVisibleChange={(visible) => {
81
        console.log('Popup is now:', visible ? 'visible' : 'hidden');
82
      }}
83
    >
84
      <button>Click me</button>
85
    </Trigger>
86
  );
87
}
88

89
// Hover trigger with delays
90
function HoverTrigger() {
91
  return (
92
    <Trigger
93
      action={['hover']}
94
      popup={<div>Hover popup with delays</div>}
95
      mouseEnterDelay={0.2} // 200ms delay before showing
96
      mouseLeaveDelay={0.5}  // 500ms delay before hiding
97
    >
98
      <div style={{ padding: 20, background: '#f0f0f0' }}>
99
        Hover over me
100
      </div>
101
    </Trigger>
102
  );
103
}
104

105
// Focus trigger
106
function FocusTrigger() {
107
  return (
108
    <Trigger
109
      action={['focus']}
110
      popup={<div>Focus popup</div>}
111
      focusDelay={0.1}
112
      blurDelay={0.2}
113
    >
114
      <input placeholder="Focus on this input" />
115
    </Trigger>
116
  );
117
}
118

119
// Context menu trigger
120
function ContextMenuTrigger() {
121
  return (
122
    <Trigger
123
      action={['contextMenu']}
124
      popup={
125
        <ul style={{ margin: 0, padding: 8, listStyle: 'none', background: 'white', border: '1px solid #ccc' }}>
126
          <li>Copy</li>
127
          <li>Paste</li>
128
          <li>Delete</li>
129
        </ul>
130
      }
131
      alignPoint={true}
132
    >
133
      <div style={{ padding: 20, background: '#f9f9f9' }}>
134
        Right-click for context menu
135
      </div>
136
    </Trigger>
137
  );
138
}
139

140
// Multiple actions
141
function MultiActionTrigger() {
142
  return (
143
    <Trigger
144
      action={['click', 'hover']}
145
      popup={<div>Works with both click and hover</div>}
146
      mouseEnterDelay={0.1}
147
      mouseLeaveDelay={0.3}
148
    >
149
      <button>Click or hover</button>
150
    </Trigger>
151
  );
152
}
153

154
// Different show/hide actions
155
function AsymmetricActions() {
156
  return (
157
    <Trigger
158
      showAction={['click']}
159
      hideAction={['click', 'hover']}
160
      popup={<div>Click to show, click or hover away to hide</div>}
161
      mouseLeaveDelay={0.1}
162
    >
163
      <button>Asymmetric actions</button>
164
    </Trigger>
165
  );
166
}
167

168
// Event callbacks
169
function EventCallbacks() {
170
  const [events, setEvents] = useState([]);
171
  
172
  const addEvent = (event) => {
173
    setEvents(prev => [...prev.slice(-4), `${new Date().toLocaleTimeString()}: ${event}`]);
174
  };
175

176
  return (
177
    <div>
178
      <Trigger
179
        action={['click']}
180
        popup={
181
          <div onClick={() => addEvent('Popup clicked')}>
182
            Click inside popup
183
          </div>
184
        }
185
        onPopupVisibleChange={(visible) => {
186
          addEvent(`Visibility changed: ${visible}`);
187
        }}
188
        afterPopupVisibleChange={(visible) => {
189
          addEvent(`Animation completed: ${visible}`);
190
        }}
191
        onPopupClick={() => {
192
          addEvent('Popup click event');
193
        }}
194
        onPopupAlign={(element, align) => {
195
          addEvent(`Popup aligned: ${align.points?.join(' to ')}`);
196
        }}
197
      >
198
        <button>Click to see events</button>
199
      </Trigger>
200
      
201
      <div style={{ marginTop: 20 }}>
202
        <h4>Events:</h4>
203
        {events.map((event, index) => (
204
          <div key={index}>{event}</div>
205
        ))}
206
      </div>
207
    </div>
208
  );
209
}
210
```
211

212
## Action Type Details
213

214
### Click Action
215
- **Show**: Mouse click on trigger element
216
- **Hide**: Mouse click outside popup/trigger or click on trigger again (toggle)
217
- **Use Cases**: Dropdowns, menus, modal triggers
218

219
### Hover Action
220
- **Show**: Mouse enter trigger element
221
- **Hide**: Mouse leave trigger or popup area
222
- **Delays**: Uses `mouseEnterDelay` and `mouseLeaveDelay`
223
- **Use Cases**: Tooltips, preview popups
224

225
### Focus Action
226
- **Show**: Focus on trigger element (tab, click)
227
- **Hide**: Blur from trigger element (tab away, click outside)
228
- **Delays**: Uses `focusDelay` and `blurDelay`
229
- **Use Cases**: Form field helpers, accessibility tooltips
230

231
### Context Menu Action
232
- **Show**: Right-click (contextmenu event) on trigger element
233
- **Hide**: Click outside, escape key, or another context menu
234
- **Special**: Often used with `alignPoint={true}` to position at cursor
235
- **Use Cases**: Right-click menus, context-sensitive actions
236

237
## Advanced Event Patterns
238

239
### Controlled Visibility
240
```typescript
241
function ControlledTrigger() {
242
  const [visible, setVisible] = useState(false);
243
  
244
  const handleVisibilityChange = (newVisible) => {
245
    // Custom logic before changing visibility
246
    if (newVisible && !isUserLoggedIn()) {
247
      showLoginDialog();
248
      return;
249
    }
250
    setVisible(newVisible);
251
  };
252

253
  return (
254
    <Trigger
255
      popupVisible={visible}
256
      onPopupVisibleChange={handleVisibilityChange}
257
      popup={<div>Controlled popup</div>}
258
    >
259
      <button>Controlled trigger</button>
260
    </Trigger>
261
  );
262
}
263
```
264

265
### Conditional Actions
266
```typescript
267
function ConditionalActions() {
268
  const [isDisabled, setIsDisabled] = useState(false);
269
  
270
  return (
271
    <Trigger
272
      action={isDisabled ? [] : ['click', 'hover']}
273
      popup={<div>Conditional popup</div>}
274
    >
275
      <button disabled={isDisabled}>
276
        {isDisabled ? 'Disabled' : 'Active'} trigger
277
      </button>
278
    </Trigger>
279
  );
280
}
281
```
282

283
### Nested Triggers
284
```typescript
285
function NestedTriggers() {
286
  return (
287
    <Trigger
288
      action={['click']}
289
      popup={
290
        <div>
291
          <p>Outer popup</p>
292
          <Trigger
293
            action={['click']}
294
            popup={<div>Inner popup</div>}
295
          >
296
            <button>Inner trigger</button>
297
          </Trigger>
298
        </div>
299
      }
300
    >
301
      <button>Outer trigger</button>
302
    </Trigger>
303
  );
304
}
305
```