flux-router-component - npm Package Compare versions

Comparing version 0.6.1 to 0.6.2

docs/navlink.md

@@ -11,2 +11,4 @@ # NavLink
 | followLink | boolean, default to false | If set to true, client side navigation will be disabled.  NavLink will just act like a regular anchor link. |
+| replaceState | boolean, default to false | If set to true, replaceState is being used instead of pushState |
+| preserveScrollPosition | boolean, default to false | If set to true, the page will maintain its scroll position on route change. |
 
@@ -13,0 +15,0 @@

docs/router-mixin.md

@@ -8,10 +8,53 @@ # RouterMixin
 
+Note that the `RouterMixin` reads your component's `state.route`; your component is responsible for setting this value.  Typically this would be done by setting up a store which listens for 'CHANGE_ROUTE_SUCCESS' events.
+
 ## Example Usage
 ```js
+// AppStateStore.js
+var createStore = require('fluxible/addons').createStore;
+module.exports = createStore({
+  storeName: 'AppStateStore',
+  handlers: {
+    'CHANGE_ROUTE_SUCCESS': 'onNavigate'
+  },
+  initialize: function() {
+    this.route = null;
+  },
+  dehydrate: function() {
+    return this.route;
+  },
+  rehydrate: function(state) {
+    this.route = state;
+  },
+  onNavigate: function(route) {
+    this.route = route;
+    return this.emitChange();
+  }
+});
+```
+
+```js
+// Application.jsx
 var RouterMixin = require('flux-router-component').RouterMixin;
+var AppStateStore = require('../stores/AppStateStore');
 
 var Application = React.createClass({
-    mixins: [RouterMixin],
+    mixins: [FluxibleMixin, RouterMixin],
+    
+    statics: {
+        storeListeners: [AppStateStore]
+    },
+    
+    getInitialState: function() {
+        return {route: this.getStore(AppStateStore).route};
+    };
+    
+    onChange: function() {
+        this.setState({
+            route: this.getStore(AppStateStore).route
+        });
+    };
+    
     ...
 });
 ```

lib/NavLink.js

@@ -33,3 +33,5 @@ /**
         navParams: React.PropTypes.object,
-        followLink: React.PropTypes.bool
+        followLink: React.PropTypes.bool,
+        preserveScrollPosition: React.PropTypes.bool,
+        replaceState: React.PropTypes.bool
     },
@@ -59,2 +61,3 @@ getInitialState: function () {
     dispatchNavAction: function (e) {
+        var navType = this.props.replaceState ? 'replacestate' : 'click';
         debug('dispatchNavAction: action=NAVIGATE', this.props.href, this.props.followLink, this.props.navParams);
@@ -103,4 +106,5 @@
         context.executeAction(navigateAction, {
-            type: 'click',
+            type: navType,
             url: href,
+            preserveScrollPosition: this.props.preserveScrollPosition,
             params: this.props.navParams
@@ -107,0 +111,0 @@ });

lib/RouterMixin.js

@@ -14,2 +14,3 @@ /**
 var TYPE_PAGELOAD = 'pageload';
+var TYPE_REPLACESTATE = 'replacestate';
 var TYPE_POPSTATE = 'popstate';
@@ -134,10 +135,19 @@ var TYPE_DEFAULT = 'default'; // default value if navigation type is missing, for programmatic navigation
             case TYPE_DEFAULT:
+            case TYPE_REPLACESTATE:
                 historyState = {params: (nav.params || {})};
-                if (this._enableScroll) {
-                    window.scrollTo(0, 0);
-                    historyState.scroll = {x: 0, y: 0};
-                    debug('on click navigation, reset scroll position to (0, 0)');
+                if(this._enableScroll) {
+                    if (nav.preserveScrollPosition) {
+                        historyState.scroll = {x: window.scrollX, y: window.scrollY};
+                    } else {
+                        window.scrollTo(0, 0);
+                        historyState.scroll = {x: 0, y: 0};
+                        debug('on click navigation, reset scroll position to (0, 0)');
+                    }
                 }
                 pageTitle = nav.params && nav.params.pageTitle || null;
-                this._history.pushState(historyState, pageTitle, newState.route.url);
+                if(navType == TYPE_REPLACESTATE) {
+                    this._history.replaceState(historyState, pageTitle, newState.route.url);
+                } else {
+                    this._history.pushState(historyState, pageTitle, newState.route.url);
+                }
                 break;
@@ -144,0 +154,0 @@ case TYPE_POPSTATE:

package.json

 {
   "name": "flux-router-component",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Router-related React component and mixin for applications with Fluxible architecture",
@@ -5,0 +5,0 @@ "main": "index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46348

increased by4.62%

Lines of code

621

increased by2.31%

No dependency changes