From 1d002182e318be64190c4616ac4931e98feb31eb Mon Sep 17 00:00:00 2001 From: Jason Date: Wed, 2 Mar 2016 22:37:32 +0800 Subject: [web] remove common.ChildFocus --- web/src/js/components/common.js | 12 ------------ web/src/js/components/editor.js | 7 ++++--- web/src/js/components/header.js | 8 +++++--- web/src/js/components/prompt.js | 7 ++++--- web/src/js/components/proxyapp.js | 2 ++ 5 files changed, 15 insertions(+), 21 deletions(-) (limited to 'web/src/js') diff --git a/web/src/js/components/common.js b/web/src/js/components/common.js index 5fae7415..293cff49 100644 --- a/web/src/js/components/common.js +++ b/web/src/js/components/common.js @@ -52,18 +52,6 @@ export var SettingsState = { }; -export var ChildFocus = { - contextTypes: { - returnFocus: React.PropTypes.func - }, - returnFocus: function () { - ReactDOM.findDOMNode(this).blur(); - window.getSelection().removeAllRanges(); - this.context.returnFocus(); - } -}; - - export var Router = { contextTypes: { location: React.PropTypes.object, diff --git a/web/src/js/components/editor.js b/web/src/js/components/editor.js index c929a244..eed2f7c6 100644 --- a/web/src/js/components/editor.js +++ b/web/src/js/components/editor.js @@ -1,6 +1,5 @@ import React from "react"; import ReactDOM from 'react-dom'; -import {ChildFocus} from "./common.js"; import {Key} from "../utils.js"; var contentToHtml = function (content) { @@ -214,7 +213,9 @@ var ValidateEditor = React.createClass({ Text Editor with mitmweb-specific convenience features */ export var ValueEditor = React.createClass({ - mixins: [ChildFocus], + contextTypes: { + returnFocus: React.PropTypes.func + }, propTypes: { content: React.PropTypes.string.isRequired, onDone: React.PropTypes.func.isRequired, @@ -232,6 +233,6 @@ export var ValueEditor = React.createClass({ ReactDOM.findDOMNode(this).focus(); }, onStop: function () { - this.returnFocus(); + this.context.returnFocus(); } }); \ No newline at end of file diff --git a/web/src/js/components/header.js b/web/src/js/components/header.js index 3833a6ee..96b522f0 100644 --- a/web/src/js/components/header.js +++ b/web/src/js/components/header.js @@ -4,7 +4,7 @@ import $ from "jquery"; import Filt from "../filt/filt.js"; import {Key} from "../utils.js"; -import {Router, SettingsState, ChildFocus} from "./common.js"; +import {Router, SettingsState} from "./common.js"; import {SettingsActions, FlowActions} from "../actions.js"; import {Query} from "../actions.js"; @@ -51,7 +51,9 @@ var FilterDocs = React.createClass({ } }); var FilterInput = React.createClass({ - mixins: [ChildFocus], + contextTypes: { + returnFocus: React.PropTypes.func + }, getInitialState: function () { // Consider both focus and mouseover for showing/hiding the tooltip, // because onBlur of the input is triggered before the click on the tooltip @@ -118,7 +120,7 @@ var FilterInput = React.createClass({ }, blur: function () { ReactDOM.findDOMNode(this.refs.input).blur(); - this.returnFocus(); + this.context.returnFocus(); }, select: function () { ReactDOM.findDOMNode(this.refs.input).select(); diff --git a/web/src/js/components/prompt.js b/web/src/js/components/prompt.js index 7b398038..e324f7d4 100644 --- a/web/src/js/components/prompt.js +++ b/web/src/js/components/prompt.js @@ -3,10 +3,11 @@ import ReactDOM from 'react-dom'; import _ from "lodash"; import {Key} from "../utils.js"; -import {ChildFocus} from "./common.js" var Prompt = React.createClass({ - mixins: [ChildFocus], + contextTypes: { + returnFocus: React.PropTypes.func + }, propTypes: { options: React.PropTypes.array.isRequired, done: React.PropTypes.func.isRequired, @@ -35,7 +36,7 @@ var Prompt = React.createClass({ }, done: function (ret) { this.props.done(ret); - this.returnFocus(); + this.context.returnFocus(); }, getOptions: function () { var opts = []; diff --git a/web/src/js/components/proxyapp.js b/web/src/js/components/proxyapp.js index 24f45ff5..97acfbde 100644 --- a/web/src/js/components/proxyapp.js +++ b/web/src/js/components/proxyapp.js @@ -55,6 +55,8 @@ var ProxyAppMain = React.createClass({ }; }, focus: function () { + document.activeElement.blur(); + window.getSelection().removeAllRanges(); ReactDOM.findDOMNode(this).focus(); }, getMainComponent: function () { -- cgit v1.2.3 From 0545326dc0319923c0746af0dd0746e98528c39c Mon Sep 17 00:00:00 2001 From: Jason Date: Sun, 6 Mar 2016 20:20:08 +0800 Subject: [web] eliminate SettingsState --- web/src/js/components/common.js | 22 ---------------------- web/src/js/components/footer.js | 29 ++++++++++++++--------------- web/src/js/components/header.js | 14 ++++++++++---- web/src/js/components/proxyapp.js | 16 +++++++++++----- 4 files changed, 35 insertions(+), 46 deletions(-) (limited to 'web/src/js') diff --git a/web/src/js/components/common.js b/web/src/js/components/common.js index 293cff49..447e6eec 100644 --- a/web/src/js/components/common.js +++ b/web/src/js/components/common.js @@ -29,28 +29,6 @@ export var StickyHeadMixin = { } }; -export var SettingsState = { - contextTypes: { - settingsStore: React.PropTypes.object.isRequired - }, - getInitialState: function () { - return { - settings: this.context.settingsStore.dict - }; - }, - componentDidMount: function () { - this.context.settingsStore.addListener("recalculate", this.onSettingsChange); - }, - componentWillUnmount: function () { - this.context.settingsStore.removeListener("recalculate", this.onSettingsChange); - }, - onSettingsChange: function () { - this.setState({ - settings: this.context.settingsStore.dict - }); - }, -}; - export var Router = { contextTypes: { diff --git a/web/src/js/components/footer.js b/web/src/js/components/footer.js index 415c2577..7d313b02 100644 --- a/web/src/js/components/footer.js +++ b/web/src/js/components/footer.js @@ -1,19 +1,18 @@ import React from "react"; import {SettingsState} from "./common.js"; -var Footer = React.createClass({ - mixins: [SettingsState], - render: function () { - var mode = this.state.settings.mode; - var intercept = this.state.settings.intercept; - return ( -
- {mode && mode != "regular" ? {mode} mode : null} -   - {intercept ? Intercept: {intercept} : null} -
- ); - } -}); +Footer.propTypes = { + settings: React.PropTypes.object.isRequired, +}; -export default Footer; \ No newline at end of file +export default function Footer({ settings }) { + const mode = settings.mode; + const intercept = settings.intercept; + return ( +
+ {mode && mode != "regular" ? {mode} mode : null} +   + {intercept ? Intercept: {intercept} : null} +
+ ); +} diff --git a/web/src/js/components/header.js b/web/src/js/components/header.js index 96b522f0..1af928a3 100644 --- a/web/src/js/components/header.js +++ b/web/src/js/components/header.js @@ -4,7 +4,7 @@ import $ from "jquery"; import Filt from "../filt/filt.js"; import {Key} from "../utils.js"; -import {Router, SettingsState} from "./common.js"; +import {Router} from "./common.js"; import {SettingsActions, FlowActions} from "../actions.js"; import {Query} from "../actions.js"; @@ -161,7 +161,10 @@ var FilterInput = React.createClass({ }); export var MainMenu = React.createClass({ - mixins: [Router, SettingsState], + mixins: [Router], + propTypes: { + settings: React.PropTypes.object.isRequired, + }, statics: { title: "Start", route: "flows" @@ -182,7 +185,7 @@ export var MainMenu = React.createClass({ render: function () { var search = this.getQuery()[Query.SEARCH] || ""; var highlight = this.getQuery()[Query.HIGHLIGHT] || ""; - var intercept = this.state.settings.intercept || ""; + var intercept = this.props.settings.intercept || ""; return (
@@ -351,6 +354,9 @@ var header_entries = [MainMenu, ViewMenu /*, ReportsMenu */]; export var Header = React.createClass({ mixins: [Router], + propTypes: { + settings: React.PropTypes.object.isRequired, + }, getInitialState: function () { return { active: header_entries[0] @@ -386,7 +392,7 @@ export var Header = React.createClass({ {header}
- +
); diff --git a/web/src/js/components/proxyapp.js b/web/src/js/components/proxyapp.js index 97acfbde..d17a1522 100644 --- a/web/src/js/components/proxyapp.js +++ b/web/src/js/components/proxyapp.js @@ -23,7 +23,6 @@ var Reports = React.createClass({ var ProxyAppMain = React.createClass({ mixins: [Router], childContextTypes: { - settingsStore: React.PropTypes.object.isRequired, flowStore: React.PropTypes.object.isRequired, eventStore: React.PropTypes.object.isRequired, returnFocus: React.PropTypes.func.isRequired, @@ -31,10 +30,16 @@ var ProxyAppMain = React.createClass({ }, componentDidMount: function () { this.focus(); + this.settingsStore.addListener("recalculate", this.onSettingsChange); + }, + componentWillUnmount: function () { + this.settingsStore.removeListener("recalculate", this.onSettingsChange); + }, + onSettingsChange: function () { + this.setState({ settings: this.settingsStore.dict }); }, getChildContext: function () { return { - settingsStore: this.state.settingsStore, flowStore: this.state.flowStore, eventStore: this.state.eventStore, returnFocus: this.focus, @@ -46,10 +51,11 @@ var ProxyAppMain = React.createClass({ var flowStore = new FlowStore(); var settingsStore = new SettingsStore(); + this.settingsStore = settingsStore; // Default Settings before fetch _.extend(settingsStore.dict, {}); return { - settingsStore: settingsStore, + settings: settingsStore.dict, flowStore: flowStore, eventStore: eventStore }; @@ -106,10 +112,10 @@ var ProxyAppMain = React.createClass({ ); return (
-
+
{children} {eventlog} -
+
); } -- cgit v1.2.3 From ca9a493a1c20651d111ab06f43437d97b7104705 Mon Sep 17 00:00:00 2001 From: Jason Date: Tue, 8 Mar 2016 00:57:01 +0800 Subject: [web] uniform code style for Footer component --- web/src/js/components/footer.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) (limited to 'web/src/js') diff --git a/web/src/js/components/footer.js b/web/src/js/components/footer.js index 7d313b02..e2d96288 100644 --- a/web/src/js/components/footer.js +++ b/web/src/js/components/footer.js @@ -6,13 +6,15 @@ Footer.propTypes = { }; export default function Footer({ settings }) { - const mode = settings.mode; - const intercept = settings.intercept; + const {mode, intercept} = settings; return ( ); } -- cgit v1.2.3