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 ])