allow using LinkEvent in router <Link /> component

Author: Havunen

packages/inferno-router/__tests__/Link.spec.tsx

@@ -1,4 +1,4 @@
-import { Component, InfernoNode, render } from 'inferno';
+import {Component, InfernoNode, linkEvent, render} from 'inferno';
 import { HashRouter, Link, MemoryRouter } from 'inferno-router';
 import { createMemoryHistory, parsePath } from 'history';
 
@@ -120,6 +120,68 @@ describe('A <Link> underneath a <HashRouter>', () => {
     expect(a.getAttribute('href')).toEqual('/the/path?the=query#the-hash');
   });
 
+  it('accepts an object `to` prop with state', () => {
+    const memoryHistoryFoo = createMemoryHistory({
+      initialEntries: ['/foo'],
+    });
+    memoryHistoryFoo.push = jasmine.createSpy();
+
+    // clickHandler is the linkEvent handler
+    let called = false;
+    const clickHandler = linkEvent({a: 1}, (data, event) => {
+      expect(data).toBeDefined();
+      expect(data.a).toEqual(1);
+      expect(event).toBeDefined();
+      expect((event as any).type).toEqual('click');
+      called = true;
+    });
+
+    const to = {
+      hash: '#the-hash2',
+      key: '2',
+      pathname: '/the/path2',
+      search: 'the=query2',
+      state: { test: 'ok2' },
+    };
+
+    class ContextChecker extends Component<{ children?: InfernoNode }> {
+      public getChildContext() {
+        const { context } = this;
+        context.router.history = memoryHistoryFoo;
+
+        return {
+          router: context.router,
+        };
+      }
+
+      public render({ children }) {
+        return children;
+      }
+    }
+
+    render(
+      <MemoryRouter>
+        <ContextChecker>
+          <Link to={to} onClick={clickHandler}>
+            link
+          </Link>
+        </ContextChecker>
+      </MemoryRouter>,
+      node,
+    );
+
+    const a = node.querySelector('a');
+    a.click();
+
+    expect(called).toBeTruthy();
+    expect(memoryHistoryFoo.push).toHaveBeenCalledTimes(1);
+    const { hash, key, pathname, search, state } = to;
+    expect(memoryHistoryFoo.push).toHaveBeenCalledWith(
+      { hash, key, pathname, search },
+      state,
+    );
+  });
+
   it('accepts an object `to` prop with state', () => {
     const memoryHistoryFoo = createMemoryHistory({
       initialEntries: ['/foo'],

packages/inferno-router/src/Link.ts

@@ -1,13 +1,13 @@
 import {
   createVNode,
   type Inferno,
-  type InfernoMouseEvent,
+  type InfernoMouseEvent, LinkedEvent,
   linkEvent,
   type VNode,
 } from 'inferno';
 import { ChildFlags, VNodeFlags } from 'inferno-vnode-flags';
 import { invariant } from './utils';
-import { isString } from 'inferno-shared';
+import {isFunction, isString} from 'inferno-shared';
 import type { Location } from 'history';
 import { parsePath } from 'history';
 import { normalizeToLocation, splitLocation } from './locationUtils';
@@ -17,7 +17,7 @@ const isModifiedEvent = (event: InfernoMouseEvent<any>): boolean =>
 
 export interface ILinkProps {
   children?: any;
-  onClick?: any;
+  onClick?: ((event: MouseEvent) => void) | LinkedEvent<any, any> | null;
   target?: string;
   className?: string;
   replace?: boolean;
@@ -26,8 +26,13 @@ export interface ILinkProps {
 }
 
 function handleClick({ props, context }, event: InfernoMouseEvent<any>): void {
-  if (props.onClick) {
-    props.onClick(event);
+  const onClick = props.onClick;
+  if (onClick) {
+    if (isFunction(onClick)) {
+      onClick(event);
+    } else if (isFunction(onClick.event)) {
+      onClick.event(onClick.data, event);
+    }
   }
 
   if (

packages/inferno/src/DOM/events/linkEvent.ts

@@ -4,15 +4,15 @@ import { isFunction, isNull } from 'inferno-shared';
 /**
  * Links given data to event as first parameter
  * @param {*} data data to be linked, it will be available in function as first parameter
- * @param {Function} event Function to be called when event occurs
+ * @param {Function} callback Function to be called when event occurs
  * @returns {{data: *, event: Function}}
  */
 export function linkEvent<T, E extends Event>(
   data: T,
-  event: (data: T, event: E) => void,
+  callback: (data: T, event: E) => void,
 ): LinkedEvent<T, E> | null {
-  if (isFunction(event)) {
-    return { data, event };
+  if (isFunction(callback)) {
+    return { data, event: callback };
   }
   return null; // Return null when event is invalid, to avoid creating unnecessary event handlers
 }