From cf9f91b0b4abe2020c544981d6dc2e2e85f4b4bd Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Sun, 22 Mar 2015 14:33:42 +0100 Subject: web: upgrade to react 0.13 --- web/package.json | 100 ++++++++++++++++++++-------------------- web/src/js/components/common.js | 30 ++++++++---- web/src/js/components/header.js | 14 +++--- 3 files changed, 79 insertions(+), 65 deletions(-) (limited to 'web') diff --git a/web/package.json b/web/package.json index 14a31f48..5b15f695 100644 --- a/web/package.json +++ b/web/package.json @@ -1,52 +1,52 @@ { - "name": "mitmproxy", - "private": true, - "scripts": { - "test": "jest ./src/js" - }, - "jest": { - "testPathDirs": [ - "./src/js" - ], - "testPathIgnorePatterns": [ - "/node_modules/", - "testutils.js" - ], - "testDirectoryName": "tests" - }, - "dependencies": { - "jquery": "", - "lodash": "", - "react": "0.12.x", - "react-router": "", - "bootstrap": "", - "flux": "" - }, - "devDependencies": { - "browserify": "=8.0.1", - "gulp": "", - "gulp-concat": "", - "gulp-connect": "", - "gulp-jshint": "", - "gulp-less": "", - "gulp-livereload": "", - "gulp-minify-css": "", - "gulp-notify": "", - "gulp-peg": "", - "gulp-plumber": "", - "gulp-react": "", - "gulp-rename": "", - "gulp-replace": "", - "gulp-rev": "", - "gulp-sourcemaps": "", - "gulp-uglify": "", - "jest-cli": "^0.1.18", - "jshint-stylish": "", - "lodash": "", - "map-stream": "", - "reactify": "", - "vinyl-buffer": "", - "vinyl-source-stream": "", - "vinyl-transform": "" - } + "name": "mitmproxy", + "private": true, + "scripts": { + "test": "jest ./src/js" + }, + "jest": { + "testPathDirs": [ + "./src/js" + ], + "testPathIgnorePatterns": [ + "/node_modules/", + "testutils.js" + ], + "testDirectoryName": "tests" + }, + "dependencies": { + "bootstrap": "^3.3.4", + "flux": "", + "jquery": "", + "lodash": "", + "react": "^0.13.1", + "react-router": "^0.13.1" + }, + "devDependencies": { + "browserify": "=8.0.1", + "gulp": "", + "gulp-concat": "", + "gulp-connect": "", + "gulp-jshint": "", + "gulp-less": "", + "gulp-livereload": "", + "gulp-minify-css": "", + "gulp-notify": "", + "gulp-peg": "", + "gulp-plumber": "", + "gulp-react": "", + "gulp-rename": "", + "gulp-replace": "", + "gulp-rev": "", + "gulp-sourcemaps": "", + "gulp-uglify": "", + "jest-cli": "^0.1.18", + "jshint-stylish": "", + "lodash": "", + "map-stream": "", + "reactify": "", + "vinyl-buffer": "", + "vinyl-source-stream": "", + "vinyl-transform": "" + } } diff --git a/web/src/js/components/common.js b/web/src/js/components/common.js index ffaa717f..3ed035ee 100644 --- a/web/src/js/components/common.js +++ b/web/src/js/components/common.js @@ -32,31 +32,43 @@ var StickyHeadMixin = { var Navigation = _.extend({}, ReactRouter.Navigation, { setQuery: function (dict) { - var q = this.context.getCurrentQuery(); + var q = this.context.router.getCurrentQuery(); for(var i in dict){ if(dict.hasOwnProperty(i)){ q[i] = dict[i] || undefined; //falsey values shall be removed. } } q._ = "_"; // workaround for https://github.com/rackt/react-router/pull/957 - this.replaceWith(this.context.getCurrentPath(), this.context.getCurrentParams(), q); + this.replaceWith(this.context.router.getCurrentPath(), this.context.router.getCurrentParams(), q); }, replaceWith: function(routeNameOrPath, params, query) { if(routeNameOrPath === undefined){ - routeNameOrPath = this.context.getCurrentPath(); + routeNameOrPath = this.context.router.getCurrentPath(); } if(params === undefined){ - params = this.context.getCurrentParams(); + params = this.context.router.getCurrentParams(); } if(query === undefined) { - query = this.context.getCurrentQuery(); + query = this.context.router.getCurrentQuery(); } - // FIXME: react-router is just broken. - ReactRouter.Navigation.replaceWith.call(this, routeNameOrPath, params, query); + // FIXME: react-router is just broken, + // we hopefully just need to wait for the next release with https://github.com/rackt/react-router/pull/957. + this.context.router.replaceWith(routeNameOrPath, params, 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. +var State = _.extend({}, ReactRouter.State, { + getQuery: function(){ + return this.context.router.getCurrentQuery(); + }, + getParams: function(){ + return this.context.router.getCurrentParams(); } }); -_.extend(Navigation.contextTypes, ReactRouter.State.contextTypes); var Splitter = React.createClass({ getDefaultProps: function () { @@ -164,7 +176,7 @@ var Splitter = React.createClass({ }); module.exports = { - State: ReactRouter.State, // keep here - react-router is pretty buggy, we may need workarounds in the future. + State: State, Navigation: Navigation, StickyHeadMixin: StickyHeadMixin, AutoScrollMixin: AutoScrollMixin, diff --git a/web/src/js/components/header.js b/web/src/js/components/header.js index eca06e74..dcfdd2ae 100644 --- a/web/src/js/components/header.js +++ b/web/src/js/components/header.js @@ -356,15 +356,17 @@ var Header = React.createClass({ }, render: function () { var header = header_entries.map(function (entry, i) { - var classes = React.addons.classSet({ - active: entry == this.state.active - }); + var className; + if(entry === this.state.active){ + className = "active"; + } else { + className = ""; + } return ( + className={className} + onClick={this.handleClick.bind(this, entry)}> { entry.title} ); -- cgit v1.2.3