From 9192427d7b845a6389c4a44c930e067c479cdf0d Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Mon, 29 Feb 2016 02:16:38 +0100 Subject: web: fix router --- web/src/js/components/common.js | 57 +++++++++++++++-------------------------- 1 file changed, 21 insertions(+), 36 deletions(-) (limited to 'web/src/js/components/common.js') diff --git a/web/src/js/components/common.js b/web/src/js/components/common.js index 03b2ef8c..f910b3d8 100644 --- a/web/src/js/components/common.js +++ b/web/src/js/components/common.js @@ -1,15 +1,14 @@ -var React = require("react"); -var ReactDOM = require("react-dom"); -var ReactRouter = require("react-router"); -var _ = require("lodash"); +import React from "react" +import ReactDOM from "react-dom" +import _ from "lodash" // http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html (also contains inverse example) export var AutoScrollMixin = { componentWillUpdate: function () { var node = ReactDOM.findDOMNode(this); this._shouldScrollBottom = ( - node.scrollTop !== 0 && - node.scrollTop + node.clientHeight === node.scrollHeight + node.scrollTop !== 0 && + node.scrollTop + node.clientHeight === node.scrollHeight ); }, componentDidUpdate: function () { @@ -57,7 +56,7 @@ export var ChildFocus = { contextTypes: { returnFocus: React.PropTypes.func }, - returnFocus: function(){ + returnFocus: function () { ReactDOM.findDOMNode(this).blur(); window.getSelection().removeAllRanges(); this.context.returnFocus(); @@ -65,46 +64,32 @@ export var ChildFocus = { }; -export var Navigation = { +export var Router = { contextTypes: { - routerFoo: React.PropTypes.object, + location: React.PropTypes.object, router: React.PropTypes.object.isRequired }, - setQuery: function (dict) { - var q = this.context.routerFoo.location.query; - for (var i in dict) { - if (dict.hasOwnProperty(i)) { - q[i] = dict[i] || undefined; //falsey values shall be removed. - } - } - this.replaceWith(undefined, q); - }, - replaceWith: function (pathname, query) { + updateLocation: function (pathname, queryUpdate) { if (pathname === undefined) { - pathname = this.context.routerFoo.location.pathname; + pathname = this.context.location.pathname; } - if (query === undefined) { - query = this.context.routerFoo.query; + var query = this.context.location.query; + if (queryUpdate !== undefined) { + for (var i in queryUpdate) { + if (queryUpdate.hasOwnProperty(i)) { + query[i] = queryUpdate[i] || undefined; //falsey values shall be removed. + } + } } - console.log({ pathname, query }); - this.context.router.replace({ pathname, query }); - } -}; - -// react-router is fairly good at changing its API regularly. -// We keep the old method for now - if it should turn out that their changes are permanent, -// we may remove this mixin and access react-router directly again. -export var RouterState = { - contextTypes: { - routerFoo: React.PropTypes.object, + this.context.router.replace({pathname, query}); }, getQuery: function () { // For whatever reason, react-router always returns the same object, which makes comparing // the current props with nextProps impossible. As a workaround, we just clone the query object. - return _.clone(this.context.routerFoo.location.query); + return _.clone(this.context.location.query); }, - getParams: function () { - return _.clone(this.context.routerFoo.params); + getParams: function() { + return this.props.routeParams; } }; -- cgit v1.2.3