Typed useEventHandler (#100)

Author: a7ul

src/components/View/RNView.ts

@@ -105,7 +105,7 @@ export interface ViewProps<Signals extends {}> extends RNProps {
   /**
    * Prop to set the event listener map. See [Handlong Events](/docs/guides/handle-events)
    */
-  on?: Partial<EventListeners | Signals>;
+  on?: Partial<WidgetEventListeners | Signals>;
   /**
    * Prop to set the ref. The ref will return the underlying nodegui widget.
    */
@@ -199,7 +199,7 @@ export function setViewProps<Signals extends {}>(
     set pos(position: Position) {
       widget.move(position.x, position.y);
     },
-    set on(listenerMap: Partial<EventListeners | Signals>) {
+    set on(listenerMap: Partial<WidgetEventListeners | Signals>) {
       const listenerMapLatest: any = Object.assign({}, listenerMap);
       const oldListenerMap = Object.assign({}, oldProps.on);
       Object.entries(oldListenerMap).forEach(([eventType, oldEvtListener]) => {
@@ -293,14 +293,14 @@ type Position = {
   y: number;
 };
 
-type EventListeners = {
-  [key in WidgetEventTypes]: (native?: NativeElement) => void;
-};
-
 type WidgetAttributesMap = {
   [key: number]: boolean;
 };
 
 type WindowFlagsMap = {
   [key: number]: boolean;
 };
+
+export type WidgetEventListeners = {
+  [key in WidgetEventTypes]: (native?: NativeElement) => void;
+};

src/demo.tsx

@@ -7,7 +7,8 @@ import {
   AnimatedImage,
   ComboBox
 } from "./index";
-import { QIcon, QVariant } from "@nodegui/nodegui";
+import { QIcon, QVariant, QPushButtonSignals } from "@nodegui/nodegui";
+import { useEventHandler } from "./hooks";
 
 const items = [
   {
@@ -20,12 +21,18 @@ const items = [
   { text: "world" }
 ];
 
+const handler = useEventHandler<QPushButtonSignals>(
+  {
+    clicked: clicked => {}
+  },
+  []
+);
 const App = () => {
   return (
     <Window>
       <View style={containerStyle}>
         <View on={{}}>
-          <Button on={{}} style={buttonStyle} text={"Hello"} />
+          <Button on={handler} style={buttonStyle} text={"Hello"} />
           <Button style={buttonStyle} text={"World"} />
         </View>
         <ComboBox items={items} />

src/hooks/index.ts

@@ -1,15 +1,12 @@
 import { useMemo, DependencyList } from "react";
+import { WidgetEventListeners } from "../components/View/RNView";
 
-type EventHandlerMap = {
-  [key: string]: (...args: any[]) => void;
-};
-
-export const useEventHandler = (
-  eventHandlerMap: EventHandlerMap,
+export function useEventHandler<Signals>(
+  eventHandlerMap: Partial<WidgetEventListeners | Signals>,
   deps: DependencyList
-) => {
+) {
   const handler = useMemo(() => {
     return eventHandlerMap;
   }, deps);
   return handler;
-};
+}