/ ink / events / event-handlers.ts
event-handlers.ts
 1  import type { ClickEvent } from './click-event.js'
 2  import type { FocusEvent } from './focus-event.js'
 3  import type { KeyboardEvent } from './keyboard-event.js'
 4  import type { PasteEvent } from './paste-event.js'
 5  import type { ResizeEvent } from './resize-event.js'
 6  
 7  type KeyboardEventHandler = (event: KeyboardEvent) => void
 8  type FocusEventHandler = (event: FocusEvent) => void
 9  type PasteEventHandler = (event: PasteEvent) => void
10  type ResizeEventHandler = (event: ResizeEvent) => void
11  type ClickEventHandler = (event: ClickEvent) => void
12  type HoverEventHandler = () => void
13  
14  /**
15   * Props for event handlers on Box and other host components.
16   *
17   * Follows the React/DOM naming convention:
18   * - onEventName: handler for bubble phase
19   * - onEventNameCapture: handler for capture phase
20   */
21  export type EventHandlerProps = {
22    onKeyDown?: KeyboardEventHandler
23    onKeyDownCapture?: KeyboardEventHandler
24  
25    onFocus?: FocusEventHandler
26    onFocusCapture?: FocusEventHandler
27    onBlur?: FocusEventHandler
28    onBlurCapture?: FocusEventHandler
29  
30    onPaste?: PasteEventHandler
31    onPasteCapture?: PasteEventHandler
32  
33    onResize?: ResizeEventHandler
34  
35    onClick?: ClickEventHandler
36    onMouseEnter?: HoverEventHandler
37    onMouseLeave?: HoverEventHandler
38  }
39  
40  /**
41   * Reverse lookup: event type string → handler prop names.
42   * Used by the dispatcher for O(1) handler lookup per node.
43   */
44  export const HANDLER_FOR_EVENT: Record<
45    string,
46    { bubble?: keyof EventHandlerProps; capture?: keyof EventHandlerProps }
47  > = {
48    keydown: { bubble: 'onKeyDown', capture: 'onKeyDownCapture' },
49    focus: { bubble: 'onFocus', capture: 'onFocusCapture' },
50    blur: { bubble: 'onBlur', capture: 'onBlurCapture' },
51    paste: { bubble: 'onPaste', capture: 'onPasteCapture' },
52    resize: { bubble: 'onResize' },
53    click: { bubble: 'onClick' },
54  }
55  
56  /**
57   * Set of all event handler prop names, for the reconciler to detect
58   * event props and store them in _eventHandlers instead of attributes.
59   */
60  export const EVENT_HANDLER_PROPS = new Set<string>([
61    'onKeyDown',
62    'onKeyDownCapture',
63    'onFocus',
64    'onFocusCapture',
65    'onBlur',
66    'onBlurCapture',
67    'onPaste',
68    'onPasteCapture',
69    'onResize',
70    'onClick',
71    'onMouseEnter',
72    'onMouseLeave',
73  ])