diff options
Diffstat (limited to 'web/src/js/components')
| -rw-r--r-- | web/src/js/components/common.js | 79 | ||||
| -rw-r--r-- | web/src/js/components/editor.js | 15 | ||||
| -rw-r--r-- | web/src/js/components/eventlog.js | 2 | ||||
| -rw-r--r-- | web/src/js/components/flowtable.js | 5 | ||||
| -rw-r--r-- | web/src/js/components/flowview/index.js | 10 | ||||
| -rw-r--r-- | web/src/js/components/flowview/messages.js | 3 | ||||
| -rw-r--r-- | web/src/js/components/header.js | 29 | ||||
| -rw-r--r-- | web/src/js/components/mainview.js | 14 | ||||
| -rw-r--r-- | web/src/js/components/prompt.js | 3 | ||||
| -rw-r--r-- | web/src/js/components/proxyapp.js | 45 | ||||
| -rw-r--r-- | web/src/js/components/virtualscroll.js | 11 |
11 files changed, 103 insertions, 113 deletions
diff --git a/web/src/js/components/common.js b/web/src/js/components/common.js index 965ae9a7..03b2ef8c 100644 --- a/web/src/js/components/common.js +++ b/web/src/js/components/common.js @@ -1,11 +1,12 @@ var React = require("react"); +var ReactDOM = require("react-dom"); var ReactRouter = require("react-router"); var _ = require("lodash"); // http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html (also contains inverse example) -var AutoScrollMixin = { +export var AutoScrollMixin = { componentWillUpdate: function () { - var node = this.getDOMNode(); + var node = ReactDOM.findDOMNode(this); this._shouldScrollBottom = ( node.scrollTop !== 0 && node.scrollTop + node.clientHeight === node.scrollHeight @@ -13,23 +14,23 @@ var AutoScrollMixin = { }, componentDidUpdate: function () { if (this._shouldScrollBottom) { - var node = this.getDOMNode(); + var node = ReactDOM.findDOMNode(this); node.scrollTop = node.scrollHeight; } }, }; -var StickyHeadMixin = { +export var StickyHeadMixin = { adjustHead: function () { // Abusing CSS transforms to set the element // referenced as head into some kind of position:sticky. - var head = this.refs.head.getDOMNode(); - head.style.transform = "translate(0," + this.getDOMNode().scrollTop + "px)"; + var head = this.refs.head; + head.style.transform = "translate(0," + ReactDOM.findDOMNode(this).scrollTop + "px)"; } }; -var SettingsState = { +export var SettingsState = { contextTypes: { settingsStore: React.PropTypes.object.isRequired }, @@ -52,58 +53,62 @@ var SettingsState = { }; -var ChildFocus = { +export var ChildFocus = { contextTypes: { returnFocus: React.PropTypes.func }, returnFocus: function(){ - React.findDOMNode(this).blur(); + ReactDOM.findDOMNode(this).blur(); window.getSelection().removeAllRanges(); this.context.returnFocus(); } }; -var Navigation = _.extend({}, ReactRouter.Navigation, { +export var Navigation = { + contextTypes: { + routerFoo: React.PropTypes.object, + router: React.PropTypes.object.isRequired + }, setQuery: function (dict) { - var q = this.context.router.getCurrentQuery(); + 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(this.context.router.getCurrentPath(), this.context.router.getCurrentParams(), q); + this.replaceWith(undefined, q); }, - replaceWith: function (routeNameOrPath, params, query) { - if (routeNameOrPath === undefined) { - routeNameOrPath = this.context.router.getCurrentPath(); - } - if (params === undefined) { - params = this.context.router.getCurrentParams(); + replaceWith: function (pathname, query) { + if (pathname === undefined) { + pathname = this.context.routerFoo.location.pathname; } if (query === undefined) { - query = this.context.router.getCurrentQuery(); + query = this.context.routerFoo.query; } - - this.context.router.replaceWith(routeNameOrPath, params, query); + 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. -var RouterState = _.extend({}, ReactRouter.State, { +export var RouterState = { + contextTypes: { + routerFoo: React.PropTypes.object, + }, 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.router.getCurrentQuery()); + return _.clone(this.context.routerFoo.location.query); }, getParams: function () { - return _.clone(this.context.router.getCurrentParams()); + return _.clone(this.context.routerFoo.params); } -}); +}; -var Splitter = React.createClass({ +export var Splitter = React.createClass({ getDefaultProps: function () { return { axis: "x" @@ -127,7 +132,7 @@ var Splitter = React.createClass({ window.addEventListener("dragend", this.onDragEnd); }, onDragEnd: function () { - this.getDOMNode().style.transform = ""; + ReactDOM.findDOMNode(this).style.transform = ""; window.removeEventListener("dragend", this.onDragEnd); window.removeEventListener("mouseup", this.onMouseUp); window.removeEventListener("mousemove", this.onMouseMove); @@ -135,7 +140,7 @@ var Splitter = React.createClass({ onMouseUp: function (e) { this.onDragEnd(); - var node = this.getDOMNode(); + var node = ReactDOM.findDOMNode(this); var prev = node.previousElementSibling; var next = node.nextElementSibling; @@ -163,7 +168,7 @@ var Splitter = React.createClass({ } else { dY = e.pageY - this.state.startY; } - this.getDOMNode().style.transform = "translate(" + dX + "px," + dY + "px)"; + ReactDOM.findDOMNode(this).style.transform = "translate(" + dX + "px," + dY + "px)"; }, onResize: function () { // Trigger a global resize event. This notifies components that employ virtual scrolling @@ -176,7 +181,7 @@ var Splitter = React.createClass({ if (!this.state.applied) { return; } - var node = this.getDOMNode(); + var node = ReactDOM.findDOMNode(this); var prev = node.previousElementSibling; var next = node.nextElementSibling; @@ -206,14 +211,4 @@ var Splitter = React.createClass({ </div> ); } -}); - -module.exports = { - ChildFocus: ChildFocus, - RouterState: RouterState, - Navigation: Navigation, - StickyHeadMixin: StickyHeadMixin, - AutoScrollMixin: AutoScrollMixin, - Splitter: Splitter, - SettingsState: SettingsState -};
\ No newline at end of file +});
\ No newline at end of file diff --git a/web/src/js/components/editor.js b/web/src/js/components/editor.js index f2d44566..62c5310c 100644 --- a/web/src/js/components/editor.js +++ b/web/src/js/components/editor.js @@ -1,4 +1,5 @@ var React = require("react"); +var ReactDOM = require('react-dom'); var common = require("./common.js"); var utils = require("../utils.js"); @@ -98,12 +99,12 @@ var EditorBase = React.createClass({ range = document.caretRangeFromPoint(e.clientX, e.clientY); } else { range = document.createRange(); - range.selectNodeContents(React.findDOMNode(this)); + range.selectNodeContents(ReactDOM.findDOMNode(this)); } this._ignore_events = true; this.setState({editable: true}, function () { - var node = React.findDOMNode(this); + var node = ReactDOM.findDOMNode(this); node.blur(); node.focus(); this._ignore_events = false; @@ -117,7 +118,7 @@ var EditorBase = React.createClass({ // a stop would cause a blur as a side-effect. // but a blur event must trigger a stop as well. // to fix this, make stop = blur and do the actual stop in the onBlur handler. - React.findDOMNode(this).blur(); + ReactDOM.findDOMNode(this).blur(); this.props.onStop && this.props.onStop(); }, _stop: function (e) { @@ -126,14 +127,14 @@ var EditorBase = React.createClass({ } console.log("_stop", _.extend({}, e)); window.getSelection().removeAllRanges(); //make sure that selection is cleared on blur - var node = React.findDOMNode(this); + var node = ReactDOM.findDOMNode(this); var content = this.props.nodeToContent(node); this.setState({editable: false}); this.props.onDone(content); this.props.onBlur && this.props.onBlur(e); }, reset: function () { - React.findDOMNode(this).innerHTML = this.props.contentToHtml(this.props.content); + ReactDOM.findDOMNode(this).innerHTML = this.props.contentToHtml(this.props.content); }, onKeyDown: function (e) { e.stopPropagation(); @@ -154,7 +155,7 @@ var EditorBase = React.createClass({ } }, onInput: function () { - var node = React.findDOMNode(this); + var node = ReactDOM.findDOMNode(this); var content = this.props.nodeToContent(node); this.props.onInput && this.props.onInput(content); } @@ -228,7 +229,7 @@ var ValueEditor = React.createClass({ />; }, focus: function () { - React.findDOMNode(this).focus(); + ReactDOM.findDOMNode(this).focus(); }, onStop: function () { this.returnFocus(); diff --git a/web/src/js/components/eventlog.js b/web/src/js/components/eventlog.js index fea7b247..9dcd2c38 100644 --- a/web/src/js/components/eventlog.js +++ b/web/src/js/components/eventlog.js @@ -1,7 +1,7 @@ var React = require("react"); var common = require("./common.js"); var Query = require("../actions.js").Query; -var VirtualScrollMixin = require("./virtualscroll.js"); +import { VirtualScrollMixin } from "./virtualscroll.js" var views = require("../store/view.js"); var _ = require("lodash"); diff --git a/web/src/js/components/flowtable.js b/web/src/js/components/flowtable.js index 609034f6..b27ed30d 100644 --- a/web/src/js/components/flowtable.js +++ b/web/src/js/components/flowtable.js @@ -1,9 +1,10 @@ var React = require("react"); +var ReactDOM = require('react-dom'); var common = require("./common.js"); var utils = require("../utils.js"); var _ = require("lodash"); -var VirtualScrollMixin = require("./virtualscroll.js"); +import { VirtualScrollMixin } from "./virtualscroll.js" var flowtable_columns = require("./flowtable-columns.js"); var FlowRow = React.createClass({ @@ -143,7 +144,7 @@ var FlowTable = React.createClass({ scrollIntoView: function (flow) { this.scrollRowIntoView( this.context.view.index(flow), - this.refs.body.getDOMNode().offsetTop + ReactDOM.findDOMNode(this.refs.body).offsetTop ); }, renderRow: function (flow) { diff --git a/web/src/js/components/flowview/index.js b/web/src/js/components/flowview/index.js index 739a46dc..91b17dd2 100644 --- a/web/src/js/components/flowview/index.js +++ b/web/src/js/components/flowview/index.js @@ -40,13 +40,7 @@ var FlowView = React.createClass({ this.selectTab(tabs[nextIndex]); }, selectTab: function (panel) { - this.replaceWith( - "flow", - { - flowId: this.getParams().flowId, - detailTab: panel - } - ); + this.replaceWith(`/flows/${this.getParams().flowId}/${panel}`); }, getActive: function(){ return this.getParams().detailTab; @@ -93,7 +87,7 @@ var FlowView = React.createClass({ var tabs = this.getTabs(flow); var active = this.getActive(); - if (!_.contains(tabs, active)) { + if (tabs.indexOf(active) < 0) { if (active === "response" && flow.error) { active = "error"; } else if (active === "error" && flow.response) { diff --git a/web/src/js/components/flowview/messages.js b/web/src/js/components/flowview/messages.js index 7ac95d85..c11ee46f 100644 --- a/web/src/js/components/flowview/messages.js +++ b/web/src/js/components/flowview/messages.js @@ -1,4 +1,5 @@ var React = require("react"); +var ReactDOM = require('react-dom'); var _ = require("lodash"); var common = require("../common.js"); @@ -98,7 +99,7 @@ var HeaderEditor = React.createClass({ return <ValueEditor ref="input" {...this.props} onKeyDown={this.onKeyDown} inline/>; }, focus: function () { - this.getDOMNode().focus(); + ReactDOM.findDOMNode(this).focus(); }, onKeyDown: function (e) { switch (e.keyCode) { diff --git a/web/src/js/components/header.js b/web/src/js/components/header.js index 998a41df..f2cc3fc5 100644 --- a/web/src/js/components/header.js +++ b/web/src/js/components/header.js @@ -1,4 +1,5 @@ var React = require("react"); +var ReactDOM = require('react-dom'); var $ = require("jquery"); var Filt = require("../filt/filt.js"); @@ -76,26 +77,24 @@ var FilterInput = React.createClass({ }, isValid: function (filt) { try { - Filt.parse(filt || this.state.value); + var str = filt || this.state.value; + if(str){ + Filt.parse(filt || this.state.value); + } return true; } catch (e) { return false; } }, getDesc: function () { - var desc; - try { - desc = Filt.parse(this.state.value).desc; - } catch (e) { - desc = "" + e; - } - if (desc !== "true") { - return desc; - } else { - return ( - <FilterDocs/> - ); + if(this.state.value) { + try { + return Filt.parse(this.state.value).desc; + } catch (e) { + return "" + e; + } } + return <FilterDocs/>; }, onFocus: function () { this.setState({focus: true}); @@ -118,11 +117,11 @@ var FilterInput = React.createClass({ e.stopPropagation(); }, blur: function () { - this.refs.input.getDOMNode().blur(); + ReactDOM.findDOMNode(this.refs.input).blur(); this.returnFocus(); }, select: function () { - this.refs.input.getDOMNode().select(); + ReactDOM.findDOMNode(this.refs.input).select(); }, render: function () { var isValid = this.isValid(); diff --git a/web/src/js/components/mainview.js b/web/src/js/components/mainview.js index 9ff51dfa..86666e39 100644 --- a/web/src/js/components/mainview.js +++ b/web/src/js/components/mainview.js @@ -42,7 +42,8 @@ var MainView = React.createClass({ }, getViewFilt: function () { try { - var filt = Filt.parse(this.getQuery()[Query.SEARCH] || ""); + var filtStr = this.getQuery()[Query.SEARCH]; + var filt = filtStr ? Filt.parse(filtStr) : function(){return true}; var highlightStr = this.getQuery()[Query.HIGHLIGHT]; var highlight = highlightStr ? Filt.parse(highlightStr) : false; } catch (e) { @@ -90,16 +91,11 @@ var MainView = React.createClass({ }, selectFlow: function (flow) { if (flow) { - this.replaceWith( - "flow", - { - flowId: flow.id, - detailTab: this.getParams().detailTab || "request" - } - ); + var tab = this.getParams().detailTab || "request"; + this.replaceWith(`/flows/${flow.id}/${tab}`); this.refs.flowTable.scrollIntoView(flow); } else { - this.replaceWith("flows", {}); + this.replaceWith("/flows"); } }, selectFlowRelative: function (shift) { diff --git a/web/src/js/components/prompt.js b/web/src/js/components/prompt.js index 121a1170..9695bd94 100644 --- a/web/src/js/components/prompt.js +++ b/web/src/js/components/prompt.js @@ -1,4 +1,5 @@ var React = require("react"); +var ReactDOM = require('react-dom'); var _ = require("lodash"); var utils = require("../utils.js"); @@ -12,7 +13,7 @@ var Prompt = React.createClass({ prompt: React.PropTypes.string }, componentDidMount: function () { - React.findDOMNode(this).focus(); + ReactDOM.findDOMNode(this).focus(); }, onKeyDown: function (e) { e.stopPropagation(); diff --git a/web/src/js/components/proxyapp.js b/web/src/js/components/proxyapp.js index e766d6e6..9c2d8714 100644 --- a/web/src/js/components/proxyapp.js +++ b/web/src/js/components/proxyapp.js @@ -1,4 +1,5 @@ var React = require("react"); +var ReactDOM = require("react-dom"); var ReactRouter = require("react-router"); var _ = require("lodash"); @@ -27,6 +28,7 @@ var ProxyAppMain = React.createClass({ flowStore: React.PropTypes.object.isRequired, eventStore: React.PropTypes.object.isRequired, returnFocus: React.PropTypes.func.isRequired, + routerFoo: React.PropTypes.object, }, componentDidMount: function () { this.focus(); @@ -37,6 +39,10 @@ var ProxyAppMain = React.createClass({ flowStore: this.state.flowStore, eventStore: this.state.eventStore, returnFocus: this.focus, + routerFoo: { + location: this.props.location, + params: this.props.params + } }; }, getInitialState: function () { @@ -53,10 +59,10 @@ var ProxyAppMain = React.createClass({ }; }, focus: function () { - React.findDOMNode(this).focus(); + ReactDOM.findDOMNode(this).focus(); }, getMainComponent: function () { - return this.refs.view.refs.__routeHandler__; + return this.refs.view; }, onKeydown: function (e) { @@ -88,7 +94,7 @@ var ProxyAppMain = React.createClass({ }, render: function () { var eventlog; - if (this.getQuery()[Query.SHOW_EVENTLOG]) { + if (this.props.location.query[Query.SHOW_EVENTLOG]) { eventlog = [ <common.Splitter key="splitter" axis="y"/>, <EventLog key="eventlog"/> @@ -96,10 +102,14 @@ var ProxyAppMain = React.createClass({ } else { eventlog = null; } + var children = React.cloneElement( + this.props.children, + { ref: "view", query: this.props.location.query } + ); return ( <div id="container" tabIndex="0" onKeyDown={this.onKeydown}> <header.Header ref="header"/> - <RouteHandler ref="view" query={this.getQuery()}/> + {children} {eventlog} <Footer/> </div> @@ -108,22 +118,15 @@ var ProxyAppMain = React.createClass({ }); -var Route = ReactRouter.Route; -var RouteHandler = ReactRouter.RouteHandler; -var Redirect = ReactRouter.Redirect; -var DefaultRoute = ReactRouter.DefaultRoute; -var NotFoundRoute = ReactRouter.NotFoundRoute; - +import { Route, Router, hashHistory, Redirect} from "react-router"; -var routes = ( - <Route path="/" handler={ProxyAppMain}> - <Route name="flows" path="flows" handler={MainView}/> - <Route name="flow" path="flows/:flowId/:detailTab" handler={MainView}/> - <Route name="reports" handler={Reports}/> - <Redirect path="/" to="flows" /> +export var app = ( +<Router history={hashHistory}> + <Redirect from="/" to="/flows" /> + <Route path="/" component={ProxyAppMain}> + <Route path="flows" component={MainView}/> + <Route path="flows/:flowId/:detailTab" component={MainView}/> + <Route path="reports" component={Reports}/> </Route> -); - -module.exports = { - routes: routes -};
\ No newline at end of file +</Router> +);
\ No newline at end of file diff --git a/web/src/js/components/virtualscroll.js b/web/src/js/components/virtualscroll.js index 956e1a0b..f462fdcc 100644 --- a/web/src/js/components/virtualscroll.js +++ b/web/src/js/components/virtualscroll.js @@ -1,6 +1,7 @@ -var React = require("react"); +import React from "react"; +import ReactDOM from "react-dom"; -var VirtualScrollMixin = { +export var VirtualScrollMixin = { getInitialState: function () { return { start: 0, @@ -43,7 +44,7 @@ var VirtualScrollMixin = { window.removeEventListener('resize', this.onScroll); }, onScroll: function () { - var viewport = this.getDOMNode(); + var viewport = ReactDOM.findDOMNode(this); var top = viewport.scrollTop; var height = viewport.offsetHeight; var start = Math.floor(top / this.props.rowHeight); @@ -69,7 +70,7 @@ var VirtualScrollMixin = { var row_top = (index * this.props.rowHeight) + head_height; var row_bottom = row_top + this.props.rowHeight; - var viewport = this.getDOMNode(); + var viewport = ReactDOM.findDOMNode(this); var viewport_top = viewport.scrollTop; var viewport_bottom = viewport_top + viewport.offsetHeight; @@ -81,5 +82,3 @@ var VirtualScrollMixin = { } }, }; - -module.exports = VirtualScrollMixin;
\ No newline at end of file |