@dvrd/dvr-controls 1.0.26 → 1.0.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.0.26",
+  "version": "1.0.27",
   "description": "Custom web controls",
   "main": "index.ts",
   "files": [

package/src/js/util/componentUtil.tsx

@@ -2,10 +2,11 @@
  * Copyright (c) 2021. Dave van Rijn Development
  */
 
-import React from "react";
+import React, {useEffect, useRef} from "react";
 import {debug} from "./miscUtil";
 import {getScreenHeight, getScreenWidth} from "./responsiveUtil";
 import {generateUUID} from "./controlUtil";
+import {addCustomEventListener, removeCustomEventListener} from "./eventUtil";
 
 export const generateComponentId = (id?: string | null, lettersOnly: boolean = true): string => {
     if (id !== null && id !== undefined) return id;
@@ -56,4 +57,17 @@ export const getElementTop = (element: string | HTMLElement | null): number => {
         return box.top + scrollTop;
     }
     return 0;
-};
+};
+
+export function useEvent(eventName: string, handler: Function, ...deps: any): string {
+    const id = useRef<string>(generateComponentId());
+
+    useEffect(() => {
+        addCustomEventListener(id.current, eventName, handler);
+        return function () {
+            removeCustomEventListener(id.current, eventName);
+        }
+    }, [...deps])
+
+    return id.current;
+}

package/src/js/util/eventUtil.ts

@@ -4,7 +4,7 @@
 
 import React from 'react';
 import {DialogActions} from "../dialog/dialogController";
-import {DialogConfig, Snack} from "./interfaces";
+import {DialogConfig} from "./interfaces";
 
 interface ListenerShape {
     component: string,
@@ -14,6 +14,10 @@ interface ListenerShape {
 
 const listeners: ListenerShape[] = [];
 
+export function getCurrentListeners(): Array<ListenerShape> {
+    return listeners;
+}
+
 export const addCustomEventListener = (componentName: string, eventName: string, eventHandler: Function): boolean => {
     if (listenerExists(componentName, eventName)) return false;
     listeners.push({component: componentName, eventName, eventHandler});