From 9bfde2a3ae7fada86911dc96f1ed35a21aae40c3 Mon Sep 17 00:00:00 2001 From: Jason Date: Mon, 4 Jul 2016 12:59:11 -0400 Subject: [web] change ducks/ui --- web/src/js/components/ProxyApp.jsx | 80 +++++++++++--------------------------- 1 file changed, 22 insertions(+), 58 deletions(-) (limited to 'web/src/js/components/ProxyApp.jsx') diff --git a/web/src/js/components/ProxyApp.jsx b/web/src/js/components/ProxyApp.jsx index 1ac979bc..e8c0e6d6 100644 --- a/web/src/js/components/ProxyApp.jsx +++ b/web/src/js/components/ProxyApp.jsx @@ -4,6 +4,7 @@ import _ from 'lodash' import { connect } from 'react-redux' import { init as appInit, destruct as appDestruct } from '../ducks/app' +import { onKeyDown } from '../ducks/ui' import Header from './Header' import EventLog from './EventLog' import Footer from './Footer' @@ -24,13 +25,23 @@ class ProxyAppMain extends Component { this.focus = this.focus.bind(this) this.onKeyDown = this.onKeyDown.bind(this) - this.updateLocation = this.updateLocation.bind(this) } componentWillMount() { this.props.appInit() } + componentWillReceiveProps(nextProps) { + if(nextProps.query === this.props.query && nextProps.flowId === this.props.flowId && nextProps.panel === this.props.panel) { + return + } + if(nextProps.flowId) { + this.context.router.replace({ pathname: `/flows/${nextProps.flowId}/${nextProps.panel}`, query: nextProps.query }) + } else { + this.context.router.replace({ pathname: '/flows', query: nextProps.query }) + } + } + /** * @todo listen to window's key events */ @@ -63,72 +74,21 @@ class ProxyAppMain extends Component { * @todo bind on window */ onKeyDown(e) { - let name = null - - switch (e.keyCode) { - case Key.I: - name = 'intercept' - break - case Key.L: - name = 'search' - break - case Key.H: - name = 'highlight' - break - default: - let main = this.refs.view - if (this.refs.view.refs.wrappedInstance) { - main = this.refs.view.refs.wrappedInstance - } - if (main.onMainKeyDown) { - main.onMainKeyDown(e) - } - return // don't prevent default then + if (e.ctrlKey) { + return } - - if (name) { - const headerComponent = this.refs.header.refs.wrappedInstance || this.refs.header - headerComponent.setState({ active: Header.entries[0] }, () => { - const active = headerComponent.refs.active.refs.wrappedInstance || headerComponent.refs.active - active.refs[name].select() - }) - } - + this.props.onKeyDown(e.keyCode) e.preventDefault() } - /** - * @todo move to actions - */ - updateLocation(pathname, queryUpdate) { - if (pathname === undefined) { - pathname = this.props.location.pathname - } - const query = this.props.location.query - for (const key of Object.keys(queryUpdate || {})) { - query[key] = queryUpdate[key] || undefined - } - this.context.router.replace({ pathname, query }) - } - - /** - * @todo pass in with props - */ - getQuery() { - // 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.props.location.query) - } - render() { - const { showEventLog, location, children } = this.props - const query = this.getQuery() + const { showEventLog, location, children, query } = this.props return (
-
+
{React.cloneElement( children, - { ref: 'view', location, query, updateLocation: this.updateLocation } + { ref: 'view', location, query } )} {showEventLog && ( @@ -143,9 +103,13 @@ export default connect( state => ({ showEventLog: state.eventLog.visible, settings: state.settings.settings, + query: state.ui.query, + panel: state.ui.panel, + flowId: state.flows.views.main.selected[0] }), { appInit, appDestruct, + onKeyDown } )(ProxyAppMain) -- cgit v1.2.3 From af2319aa6458a92caec2c09386fdf251502c03cb Mon Sep 17 00:00:00 2001 From: Jason Date: Tue, 5 Jul 2016 22:28:00 +0800 Subject: [web] listen to window.onKeyDown --- web/src/js/components/ProxyApp.jsx | 58 +++++--------------------------------- 1 file changed, 7 insertions(+), 51 deletions(-) (limited to 'web/src/js/components/ProxyApp.jsx') diff --git a/web/src/js/components/ProxyApp.jsx b/web/src/js/components/ProxyApp.jsx index e8c0e6d6..62b13932 100644 --- a/web/src/js/components/ProxyApp.jsx +++ b/web/src/js/components/ProxyApp.jsx @@ -12,23 +12,18 @@ import { Key } from '../utils.js' class ProxyAppMain extends Component { - static childContextTypes = { - returnFocus: PropTypes.func.isRequired, - } - static contextTypes = { router: PropTypes.object.isRequired, } - constructor(props, context) { - super(props, context) - - this.focus = this.focus.bind(this) - this.onKeyDown = this.onKeyDown.bind(this) - } - componentWillMount() { this.props.appInit() + window.addEventListener('keydown', this.props.onKeyDown); + } + + componentWillUnmount() { + this.props.appDestruct() + window.removeEventListener('keydown', this.props.onKeyDown); } componentWillReceiveProps(nextProps) { @@ -42,49 +37,10 @@ class ProxyAppMain extends Component { } } - /** - * @todo listen to window's key events - */ - componentDidMount() { - this.focus() - } - - componentWillUnmount() { - this.props.appDestruct() - } - - /** - * @todo use props - */ - getChildContext() { - return { returnFocus: this.focus } - } - - /** - * @todo remove it - */ - focus() { - document.activeElement.blur() - window.getSelection().removeAllRanges() - ReactDOM.findDOMNode(this).focus() - } - - /** - * @todo move to actions - * @todo bind on window - */ - onKeyDown(e) { - if (e.ctrlKey) { - return - } - this.props.onKeyDown(e.keyCode) - e.preventDefault() - } - render() { const { showEventLog, location, children, query } = this.props return ( -
+
{React.cloneElement( children, -- cgit v1.2.3 From db991e2bccc10e8e31fb200cba2a99bf94e83914 Mon Sep 17 00:00:00 2001 From: Jason Date: Tue, 5 Jul 2016 22:49:16 +0800 Subject: [web] set display large --- web/src/js/components/ProxyApp.jsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) (limited to 'web/src/js/components/ProxyApp.jsx') diff --git a/web/src/js/components/ProxyApp.jsx b/web/src/js/components/ProxyApp.jsx index 62b13932..f0e33330 100644 --- a/web/src/js/components/ProxyApp.jsx +++ b/web/src/js/components/ProxyApp.jsx @@ -17,21 +17,21 @@ class ProxyAppMain extends Component { } componentWillMount() { - this.props.appInit() + this.props.appInit(this.context.router) window.addEventListener('keydown', this.props.onKeyDown); } componentWillUnmount() { - this.props.appDestruct() + this.props.appDestruct(this.context.router) window.removeEventListener('keydown', this.props.onKeyDown); } componentWillReceiveProps(nextProps) { - if(nextProps.query === this.props.query && nextProps.flowId === this.props.flowId && nextProps.panel === this.props.panel) { + if (nextProps.query === this.props.query && nextProps.selectedFlowId === this.props.selectedFlowId && nextProps.panel === this.props.panel) { return } - if(nextProps.flowId) { - this.context.router.replace({ pathname: `/flows/${nextProps.flowId}/${nextProps.panel}`, query: nextProps.query }) + if (nextProps.selectedFlowId) { + this.context.router.replace({ pathname: `/flows/${nextProps.selectedFlowId}/${nextProps.panel}`, query: nextProps.query }) } else { this.context.router.replace({ pathname: '/flows', query: nextProps.query }) } @@ -58,10 +58,9 @@ class ProxyAppMain extends Component { export default connect( state => ({ showEventLog: state.eventLog.visible, - settings: state.settings.settings, query: state.ui.query, panel: state.ui.panel, - flowId: state.flows.views.main.selected[0] + selectedFlowId: state.flows.views.main.selected[0] }), { appInit, -- cgit v1.2.3