Make some types generic, rename id to menuId in hooks

Author: TimboKZ

lib/handlers.d.ts

@@ -2,10 +2,10 @@ export declare enum DataAttributes {
     MenuId = "data-contextmenu-menu-id",
     DataId = "data-contextmenu-data-id"
 }
-export interface ContextMenuEvent {
+export interface ContextMenuEvent<DataType = any> {
     clientX: number;
     clientY: number;
-    data: any;
+    data: DataType;
 }
 export declare const GlobalHandlers: {
     readonly handleContextMenu: (e: MouseEvent) => void;

lib/hooks.d.ts

@@ -2,13 +2,13 @@ import React from 'react';
 import { Nullable } from 'tsdef';
 import { ContextMenuEvent } from './handlers';
 export declare const useLazyValue: <T>(factory: () => T) => T;
-export declare const ContextMenuEventContext: React.Context<Nullable<ContextMenuEvent>>;
-export declare const useContextMenuEvent: () => Nullable<ContextMenuEvent>;
+export declare const ContextMenuEventContext: React.Context<Nullable<ContextMenuEvent<any>>>;
+export declare const useContextMenuEvent: <DataType = any>() => Nullable<ContextMenuEvent<DataType>>;
 export declare const useContextMenuTrigger: <RefType extends HTMLElement>(parameters: {
-    id?: string | undefined;
+    menuId?: string | undefined;
     data?: any;
     ref?: React.RefObject<RefType> | undefined;
 }) => React.RefObject<RefType>;
-export declare const useMenuToggleMethods: (lastShowMenuEvent: Nullable<ContextMenuEvent>, setShowMenuEvent: (event: Nullable<ContextMenuEvent>) => void, onShow?: ((event: ContextMenuEvent) => void) | undefined, onHide?: (() => void) | undefined) => [(event: ContextMenuEvent) => void, () => void];
-export declare const useMenuPlacementStyle: (wrapperRef: React.RefObject<HTMLElement>, lastShowMenuEvent: Nullable<ContextMenuEvent>, setMenuPlacementStyle: (style: Nullable<React.CSSProperties>) => void) => void;
-export declare const useInternalHandlers: (wrapperRef: React.RefObject<HTMLElement>, lastShowMenuEvent: Nullable<ContextMenuEvent>, showMenu: (event: ContextMenuEvent) => void, hideMenu: () => void, id?: string | undefined, global?: boolean | undefined, hideOnSelfClick?: boolean | undefined, hideOnOutsideClick?: boolean | undefined, hideOnEscape?: boolean | undefined, hideOnScroll?: boolean | undefined, hideOnWindowResize?: boolean | undefined) => void;
+export declare const useMenuToggleMethods: (lastShowMenuEvent: Nullable<ContextMenuEvent<any>>, setShowMenuEvent: (event: Nullable<ContextMenuEvent<any>>) => void, onShow?: ((event: ContextMenuEvent<any>) => void) | undefined, onHide?: (() => void) | undefined) => [(event: ContextMenuEvent<any>) => void, () => void];
+export declare const useMenuPlacementStyle: (wrapperRef: React.RefObject<HTMLElement>, lastShowMenuEvent: Nullable<ContextMenuEvent<any>>, setMenuPlacementStyle: (style: Nullable<React.CSSProperties>) => void) => void;
+export declare const useInternalHandlers: (wrapperRef: React.RefObject<HTMLElement>, lastShowMenuEvent: Nullable<ContextMenuEvent<any>>, showMenu: (event: ContextMenuEvent<any>) => void, hideMenu: () => void, id?: string | undefined, global?: boolean | undefined, hideOnSelfClick?: boolean | undefined, hideOnOutsideClick?: boolean | undefined, hideOnEscape?: boolean | undefined, hideOnScroll?: boolean | undefined, hideOnWindowResize?: boolean | undefined) => void;

lib/hooks.js

@@ -16,10 +16,10 @@ export enum DataAttributes {
     DataId = 'data-contextmenu-data-id',
 }
 
-export interface ContextMenuEvent {
+export interface ContextMenuEvent<DataType = any> {
     clientX: number;
     clientY: number;
-    data: any;
+    data: DataType; // user-defined data
 }
 
 type ContextMenuTarget = EventTarget & Element;

lib/hooks.js.map

@@ -24,14 +24,14 @@ export const useLazyValue = <T>(factory: () => T): T => {
 };
 
 export const ContextMenuEventContext = React.createContext<Nullable<ContextMenuEvent>>(null);
-export const useContextMenuEvent = (): Nullable<ContextMenuEvent> => {
+export const useContextMenuEvent = <DataType = any>(): Nullable<ContextMenuEvent<DataType>> => {
     return useContext(ContextMenuEventContext);
 };
 
 export const useContextMenuTrigger = <RefType extends HTMLElement>(
-    parameters: { id?: string; data?: any, ref?: React.RefObject<RefType> },
+    parameters: { menuId?: string; data?: any, ref?: React.RefObject<RefType> },
 ): React.RefObject<RefType> => {
-    const {id, data} = parameters;
+    const {menuId, data} = parameters;
 
     // If user did not provide a ref, we simply generate a new one.
     const ref = parameters.ref ? parameters.ref : useRef<RefType>(null);
@@ -48,7 +48,7 @@ export const useContextMenuTrigger = <RefType extends HTMLElement>(
         const {current} = ref;
         if (!current) return;
 
-        if (id) current.setAttribute(DataAttributes.MenuId, id);
+        if (menuId) current.setAttribute(DataAttributes.MenuId, menuId);
         current.setAttribute(DataAttributes.DataId, dataId);
         current.addEventListener('contextmenu', LocalHandlers.handleContextMenu);
         current.addEventListener('touchstart', LocalHandlers.handleTouchStart);