feat(UISref): Call child element's onClick prop first, if it exists

Closes #240

src/components/UISref.tsx

@@ -7,7 +7,7 @@ import { Component, createElement, cloneElement, isValidElement, ValidationMap }
 import * as PropTypes from 'prop-types';
 import * as _classNames from 'classnames';
 
-import { extend, TransitionOptions } from '@uirouter/core';
+import { extend, isFunction, TransitionOptions } from '@uirouter/core';
 
 import { UIRouterReact, UIRouterConsumer } from '../index';
 import { UIViewAddress, UIViewConsumer } from './UIView';
@@ -62,6 +62,11 @@ class Sref extends Component<UISrefProps, any> {
   };
 
   handleClick = e => {
+    const childOnClick = this.props.children.props.onClick;
+    if (isFunction(childOnClick)) {
+      childOnClick(e);
+    }
+
     if (!e.defaultPrevented && !(e.button == 1 || e.metaKey || e.ctrlKey)) {
       e.preventDefault();
       let params = this.props.params || {};

src/components/UIView.tsx

@@ -9,7 +9,6 @@ import {
   createElement,
   cloneElement,
   isValidElement,
-  ReactElement,
   SFC,
   ClassType,
   StatelessComponent,
@@ -18,16 +17,7 @@ import {
 } from 'react';
 import * as PropTypes from 'prop-types';
 
-import {
-  ActiveUIView,
-  ViewContext,
-  ViewConfig,
-  Transition,
-  ResolveContext,
-  StateParams,
-  applyPairs,
-  extend,
-} from '@uirouter/core';
+import { ActiveUIView, ViewContext, Transition, ResolveContext, StateParams, applyPairs } from '@uirouter/core';
 
 import { UIRouterReact, UIRouterConsumer } from '../index';
 import { ReactViewConfig } from '../reactViews';

src/components/__tests__/UISref.test.tsx

@@ -1,9 +1,9 @@
 declare var jest, describe, it, expect, beforeEach;
 
-import * as React from 'react';
 import { mount } from 'enzyme';
+import * as React from 'react';
 
-import { UIRouterReact, UIRouter, UIView, UISref, pushStateLocationPlugin, servicesPlugin } from '../../index';
+import { pushStateLocationPlugin, servicesPlugin, UIRouter, UIRouterReact, UISref, UIView } from '../../index';
 
 const states = [
   {
@@ -82,6 +82,54 @@ describe('<UISref>', () => {
     expect(hookSpy).toHaveBeenCalled();
   });
 
+  it('calls the child elements onClick function first', async () => {
+    const onClickSpy = jest.fn();
+    router.stateRegistry.register({
+      name: 'onclick',
+      url: '/onclick',
+      component: () => (
+        <UISref to="state2">
+          <a onClick={onClickSpy}>state2</a>
+        </UISref>
+      ),
+    });
+    const wrapper = mount(
+      <UIRouter router={router}>
+        <UIView />
+      </UIRouter>
+    );
+    await router.stateService.go('onclick');
+    wrapper.update();
+    const goSpy = (router.stateService.go = jest.fn());
+    wrapper.find('a').simulate('click');
+    expect(onClickSpy).toHaveBeenCalled();
+    expect(goSpy).toHaveBeenCalled();
+  });
+
+  it('calls the child elements onClick function and honors e.preventDefault()', async () => {
+    const onClickSpy = jest.fn(e => e.preventDefault());
+    router.stateRegistry.register({
+      name: 'preventdefault',
+      url: '/preventdefault',
+      component: () => (
+        <UISref to="state2">
+          <a onClick={onClickSpy}>state2</a>
+        </UISref>
+      ),
+    });
+    const wrapper = mount(
+      <UIRouter router={router}>
+        <UIView />
+      </UIRouter>
+    );
+    await router.stateService.go('preventdefault');
+    wrapper.update();
+    const goSpy = (router.stateService.go = jest.fn());
+    wrapper.find('a').simulate('click');
+    expect(onClickSpy).toHaveBeenCalled();
+    expect(goSpy).not.toHaveBeenCalled();
+  });
+
   it("doesn't trigger a transition when middle-clicked/ctrl+clicked", async () => {
     router.stateService.defaultErrorHandler(() => {});
     const wrapper = mount(

src/components/__tests__/UIView.test.tsx

@@ -253,7 +253,7 @@ describe('<UIView>', () => {
           return <span>UiCanExitHookComponent</span>;
         }
       }
-      const ForwardRef = React.forwardRef((props, ref) => <Comp {...props} ref={ref} />);
+      const ForwardRef = React.forwardRef((props, ref: any) => <Comp {...props} ref={ref} />);
       const Exit = () => <span>exit</span>;
       router = new UIRouterReact();
       router.plugin(servicesPlugin);