Merge pull request #79 from grahammendick/skiprerender

grahammendick · Aug 30, 2016 · bd66b50 · bd66b50
2 parents 745b1dd + 7b7af66
commit bd66b50
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 10 deletions.
diff --git a/NavigationReact/src/NavigationBackLink.ts b/NavigationReact/src/NavigationBackLink.ts
@@ -3,8 +3,17 @@ import Navigation = require('navigation');
 import React = require('react');
 
 class NavigationBackLink extends React.Component<any, any> {
-    private onNavigate = () => this.forceUpdate();
-
+    private onNavigate = () => {
+        if (this.state.stateContext !== this.getStateNavigator().stateContext.url
+            || this.state.crumb !== this.getNavigationBackLink())
+            this.setState(this.getNextState());
+    }
+
+    constructor(props, context) {
+        super(props, context);
+        this.state = this.getNextState();
+    }
+
     static contextTypes = {
         stateNavigator: React.PropTypes.object
     }
@@ -16,12 +25,22 @@ class NavigationBackLink extends React.Component<any, any> {
     private getNavigationBackLink(): string {
         return LinkUtility.getLink(this.getStateNavigator(), () => this.getStateNavigator().getNavigationBackLink(this.props.distance));
     }
-
+
+    private getNextState() {
+        return { 
+            stateContext: this.getStateNavigator().stateContext.url,
+            crumb: this.getNavigationBackLink()
+        };
+    }
+
     componentDidMount() {
         if (!this.props.lazy)
             this.getStateNavigator().onNavigate(this.onNavigate);
     }
 
+    componentWillReceiveProps() {
+        this.setState(this.getNextState());
+    }
     componentWillUnmount() {
         if (!this.props.lazy)
             this.getStateNavigator().offNavigate(this.onNavigate);

diff --git a/NavigationReact/src/NavigationLink.ts b/NavigationReact/src/NavigationLink.ts
@@ -3,8 +3,16 @@ import Navigation = require('navigation');
 import React = require('react');
 
 class NavigationLink extends React.Component<any, any> {
-    private onNavigate = () => this.forceUpdate();
-
+    private onNavigate = () => {
+        if (this.state.stateContext !== this.getStateNavigator().stateContext.url)
+            this.setState(this.getNextState());
+    }
+
+    constructor(props, context) {
+        super(props, context);
+        this.state = this.getNextState();
+    }
+
     static contextTypes = {
         stateNavigator: React.PropTypes.object
     }
@@ -18,11 +26,19 @@ class NavigationLink extends React.Component<any, any> {
         return LinkUtility.getLink(this.getStateNavigator(), () => this.getStateNavigator().getNavigationLink(this.props.stateKey, navigationData));
     }
 
+    private getNextState() {
+        return { stateContext: this.getStateNavigator().stateContext.url };
+    }
+
     componentDidMount() {
         if (!this.props.lazy)
             this.getStateNavigator().onNavigate(this.onNavigate);
     }
-
+
+    componentWillReceiveProps() {
+        this.setState(this.getNextState());
+    }
+
     componentWillUnmount() {
         if (!this.props.lazy)
             this.getStateNavigator().offNavigate(this.onNavigate);

diff --git a/NavigationReact/src/RefreshLink.ts b/NavigationReact/src/RefreshLink.ts
@@ -3,8 +3,16 @@ import Navigation = require('navigation');
 import React = require('react');
 
 class RefreshLink extends React.Component<any, any> {
-    private onNavigate = () => this.forceUpdate();
-
+    private onNavigate = () => {
+        if (this.state.stateContext !== this.getStateNavigator().stateContext.url)
+            this.setState(this.getNextState());
+    }
+
+    constructor(props, context) {
+        super(props, context);
+        this.state = this.getNextState();
+    }
+
     static contextTypes = {
         stateNavigator: React.PropTypes.object
     }
@@ -13,16 +21,24 @@ class RefreshLink extends React.Component<any, any> {
         return this.props.stateNavigator || (<any> this.context).stateNavigator;
     }
 
-    getRefreshLink(): string {
+    private getRefreshLink(): string {
         var navigationData = LinkUtility.getData(this.getStateNavigator(), this.props.navigationData, this.props.includeCurrentData, this.props.currentDataKeys);
         return LinkUtility.getLink(this.getStateNavigator(), () => this.getStateNavigator().getRefreshLink(navigationData));
     }
 
+    private getNextState() {
+        return { stateContext: this.getStateNavigator().stateContext.url };
+    }
+
     componentDidMount() {
         if (!this.props.lazy)
             this.getStateNavigator().onNavigate(this.onNavigate);
     }
-
+
+    componentWillReceiveProps() {
+        this.setState(this.getNextState());
+    }
+
     componentWillUnmount() {
         if (!this.props.lazy)
             this.getStateNavigator().offNavigate(this.onNavigate);