feat: improve <Link> and <Go>

Author: streamich

src/Link/index.ts

@@ -1,6 +1,6 @@
 import {Component, cloneElement} from 'react';
 import {h, noop} from '../util';
-import {go} from '../route';
+import {go, TGo} from '../route/go';
 import renderProp from '../util/renderProp';
 
 const isModifiedEvent = (event) =>
@@ -12,13 +12,19 @@ export interface ILinkProps extends React.AllHTMLAttributes<any> {
   state?: any | ((props: ILinkProps) => any);
   to?: string;
   a?: boolean;
+  onGo?: TGo;
+  isActive?: boolean;
 }
 
 export interface ILinkState {
 
 }
 
 export class Link extends Component<ILinkProps, any> {
+  static defaultProps = {
+    onGo: go
+  };
+
   el: HTMLElement = null;
   target: string = '';
 
@@ -30,25 +36,26 @@ export class Link extends Component<ILinkProps, any> {
   onClick = (originalClick?) => (event) => {
     (originalClick || noop)(event);
 
-    const {replace, to, state} = this.props;
+    const {onGo, replace, to, state} = this.props;
 
     if (!event.defaultPrevented && // onClick prevented default
       event.button === 0 && // ignore everything but left clicks
-      !this.target && // let browser handle "target=_blank" etc.
+      !this.target && // let browser handle "target=*"
       !isModifiedEvent(event) // ignore clicks with modifier keys
     ) {
       event.preventDefault();
 
-      go(to, {
+      onGo(to, {
         replace,
         state: typeof state === 'function' ? state(this.props) : state
       });
     }
   };
 
   render () {
-    let {bond, replace, state, to, a, ...rest} = this.props;
+    let {bond, replace, state, to, a, isActive, ...rest} = this.props;
     const renderPropState: any = {
+      isActive,
       go,
       to
     };

src/route/__story__/StoryRouteTruncateRoute.tsx

@@ -6,21 +6,16 @@ const StoryRouteTruncateRoute = () =>
   <div>
     <Router route='/api/users/123.json'>
       <Route match='/api'>
-        /api
-        <div>
         /api
         <Route match='/users'>
-          <div>
-            /api/users
+          /api/users
           <Route match={/.*/}>{(result) =>
             <div>
               /api/users/.*
               <pre style={{fontFamily: 'monospace'}}>{JSON.stringify(result, null, 4)}</pre>
             </div>
           }</Route>
-          </div>
         </Route>
-        </div>
       </Route>
     </Router>
 
@@ -29,20 +24,16 @@ const StoryRouteTruncateRoute = () =>
     <pre style={{fontFamily: 'monospace'}}>{`
 <Router route='/api/users/123.json'>
   <Route match='/api'>
-    <div>
     /api
     <Route match='/users'>
-      <div>
-        /api/users
+      /api/users
       <Route match={/.*/}>{(result) =>
         <div>
           /api/users/.*
           <pre style={{fontFamily: 'monospace'}}>{JSON.stringify(result, null, 4)}</pre>
         </div>
       }</Route>
-      </div>
     </Route>
-    </div>
   </Route>
 </Router>
     `}</pre>

src/route/index.ts

@@ -4,16 +4,26 @@ import {Provider, Consumer} from '../context';
 import {h, ns} from '../util';
 import renderProp from '../util/renderProp';
 import {Link, ILinkProps} from '../Link';
+import {go, TGo} from './go';
+
+export {
+  go
+};
 
 export interface IRouteProviderProps {
   children?: any;
   ns?: string;
   fullRoute?: string;
   route?: string;
   parent?: TRouteMatchResult;
+  onGo?: TGo;
 }
 
 export class Router extends Component<IRouteProviderProps, any> {
+  static defaultProps = {
+    onGo: go
+  };
+
   matches: number = 0;
 
   inc = () => {
@@ -27,6 +37,7 @@ export class Router extends Component<IRouteProviderProps, any> {
     const element = h(Provider, {
       name: ns(`route/${this.props.ns}`),
       value: {
+        go: this.props.onGo,
         fullRoute: this.props.fullRoute || route,
         route,
         inc: this.inc,
@@ -107,7 +118,8 @@ export class Route extends Component<IRouteMatch, any> {
   };
 
   render () {
-    return h(Consumer, {name: ns(`route/${this.props.ns}`)}, ({route, inc, count, parent}) => {
+    return h(Consumer, {name: ns(`route/${this.props.ns}`)}, (context) => {
+      const {fullRoute, route, go, inc, count, parent} = context;
       const {children, exact, match, preserve, min, max} = this.props;
       const matchCount = count();
 
@@ -132,9 +144,11 @@ export class Route extends Component<IRouteMatch, any> {
             parent: matchResult
           },
             renderProp(this.props, {
+              go,
               match: route.substr(0, length),
               matches,
               route: newRoute,
+              fullRoute,
               parent
             })
           );
@@ -151,20 +165,27 @@ export const Route404 = (props) => h(Route, {
   ...props
 });
 
-export * from './go';
-
 export interface IGoProps extends ILinkProps {
+  exact?: boolean;
+  match?: TRouteMatcher | RegExp | string;
   ns?: string;
 }
 
 export interface IGoState {
-
 }
 
 export class Go extends Component<IGoProps, IGoState> {
   render () {
-    return h(Consumer, {name: ns(`route/${this.props.ns}`)}, ({fullRoute, route, inc, count, parent}) => {
-      return h(Link, this.props)
+    return h(Consumer, {name: ns(`route/${this.props.ns}`)}, ({fullRoute, route, go, inc, count, parent}) => {
+      const {exact, match} = this.props;
+      const matcher = createMatcher(match, exact);
+      const isActive = !!matcher(fullRoute);
+
+      return h(Link, {
+        ...(this.props as ILinkProps),
+        isActive,
+        onGo: go
+      })
     });
   }
 }