web: upgrade to react 0.13

This commit is contained in:
Maximilian Hils 2015-03-22 14:33:42 +01:00
parent 6fb661dab5
commit cf9f91b0b4
6 changed files with 6648 additions and 4743 deletions

View File

@ -478,31 +478,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({displayName: "Splitter",
getDefaultProps: function () {
@ -610,7 +622,7 @@ var Splitter = React.createClass({displayName: "Splitter",
});
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,
@ -2166,15 +2178,17 @@ var Header = React.createClass({displayName: "Header",
},
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 (
React.createElement("a", {key: i,
href: "#",
className: classes,
onClick: this.handleClick.bind(this, entry)
},
className: className,
onClick: this.handleClick.bind(this, entry)},
entry.title
)
);

View File

@ -945,12 +945,24 @@ th {
.glyphicon-bitcoin:before {
content: "\e227";
}
.glyphicon-btc:before {
content: "\e227";
}
.glyphicon-xbt:before {
content: "\e227";
}
.glyphicon-yen:before {
content: "\00a5";
}
.glyphicon-jpy:before {
content: "\00a5";
}
.glyphicon-ruble:before {
content: "\20bd";
}
.glyphicon-rub:before {
content: "\20bd";
}
.glyphicon-scale:before {
content: "\e230";
}
@ -1147,6 +1159,9 @@ hr {
overflow: visible;
clip: auto;
}
[role="button"] {
cursor: pointer;
}
h1,
h2,
h3,
@ -2548,10 +2563,13 @@ output {
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
cursor: not-allowed;
background-color: #eeeeee;
opacity: 1;
}
.form-control[disabled],
fieldset[disabled] .form-control {
cursor: not-allowed;
}
textarea.form-control {
height: auto;
}
@ -2618,6 +2636,7 @@ input[type="search"] {
}
.radio-inline,
.checkbox-inline {
position: relative;
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
@ -2654,6 +2673,7 @@ fieldset[disabled] .checkbox label {
padding-top: 7px;
padding-bottom: 7px;
margin-bottom: 0;
min-height: 34px;
}
.form-control-static.input-lg,
.form-control-static.input-sm {
@ -2695,6 +2715,7 @@ select[multiple].form-group-sm .form-control {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
min-height: 32px;
}
.input-lg {
height: 46px;
@ -2731,6 +2752,7 @@ select[multiple].form-group-lg .form-control {
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
min-height: 38px;
}
.has-feedback {
position: relative;
@ -3348,11 +3370,9 @@ input[type="button"].btn-block {
}
.collapse {
display: none;
visibility: hidden;
}
.collapse.in {
display: block;
visibility: visible;
}
tr.collapse.in {
display: table-row;
@ -3377,7 +3397,7 @@ tbody.collapse.in {
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid;
border-top: 4px dashed;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
@ -4016,11 +4036,9 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
}
.tab-content > .tab-pane {
display: none;
visibility: hidden;
}
.tab-content > .active {
display: block;
visibility: visible;
}
.nav-tabs .dropdown-menu {
margin-top: -1px;
@ -4062,7 +4080,6 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
}
.navbar-collapse.collapse {
display: block !important;
visibility: visible !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
@ -4791,7 +4808,8 @@ a.label:focus {
position: relative;
top: -1px;
}
.btn-xs .badge {
.btn-xs .badge,
.btn-group-xs > .btn .badge {
top: 0;
padding: 1px 5px;
}
@ -5614,10 +5632,10 @@ a.list-group-item-danger.active:focus {
width: 100%;
border: 0;
}
.embed-responsive.embed-responsive-16by9 {
.embed-responsive-16by9 {
padding-bottom: 56.25%;
}
.embed-responsive.embed-responsive-4by3 {
.embed-responsive-4by3 {
padding-bottom: 75%;
}
.well {
@ -5678,7 +5696,7 @@ button.close {
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
z-index: 1050;
-webkit-overflow-scrolling: touch;
outline: 0;
}
@ -5719,10 +5737,12 @@ button.close {
outline: 0;
}
.modal-backdrop {
position: absolute;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000000;
}
.modal-backdrop.fade {
@ -5793,7 +5813,6 @@ button.close {
position: absolute;
z-index: 1070;
display: block;
visibility: visible;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: normal;
@ -6316,7 +6335,6 @@ button.close {
}
.hidden {
display: none !important;
visibility: hidden !important;
}
.affix {
position: fixed;

File diff suppressed because it is too large Load Diff

View File

@ -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": ""
}
}

View File

@ -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,

View File

@ -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 (
<a key={i}
href="#"
className={classes}
onClick={this.handleClick.bind(this, entry)}
>
className={className}
onClick={this.handleClick.bind(this, entry)}>
{ entry.title}
</a>
);