From 8f73dc79c073a5fc955b5d13d9eb421f38868bf9 Mon Sep 17 00:00:00 2001 From: Jason Date: Fri, 1 Jul 2016 23:43:26 +0800 Subject: [web] ui ducks for content view --- web/src/js/components/ContentView.jsx | 37 ++++++++++++++-------- web/src/js/components/ContentView/ViewSelector.jsx | 2 +- 2 files changed, 24 insertions(+), 15 deletions(-) (limited to 'web/src/js/components') diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx index 1533684e..9d11ecd9 100644 --- a/web/src/js/components/ContentView.jsx +++ b/web/src/js/components/ContentView.jsx @@ -1,11 +1,13 @@ import React, { Component, PropTypes } from 'react' +import { connect } from 'react-redux' import { MessageUtils } from '../flow/utils.js' -import { ViewAuto, ViewImage } from './ContentView/ContentViews' +import * as ContentViews from './ContentView/ContentViews' import * as MetaViews from './ContentView/MetaViews' import ContentLoader from './ContentView/ContentLoader' import ViewSelector from './ContentView/ViewSelector' +import { setContentView } from '../ducks/ui' -export default class ContentView extends Component { +class ContentView extends Component { static propTypes = { // It may seem a bit weird at the first glance: @@ -18,12 +20,7 @@ export default class ContentView extends Component { constructor(props, context) { super(props, context) - this.state = { displayLarge: false, View: ViewAuto } - this.selectView = this.selectView.bind(this) - } - - selectView(View) { - this.setState({ View }) + this.state = { displayLarge: false } } displayLarge() { @@ -31,18 +28,21 @@ export default class ContentView extends Component { } componentWillReceiveProps(nextProps) { + // @todo move to ui ducks if (nextProps.message !== this.props.message) { - this.setState({ displayLarge: false, View: ViewAuto }) + this.setState({ displayLarge: false }) } } isContentTooLarge(msg) { - return msg.contentLength > 1024 * 1024 * (ViewImage.matches(msg) ? 10 : 0.2) + return msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2) } render() { - const { flow, message } = this.props - const { displayLarge, View } = this.state + const { flow, message, contentView, selectView } = this.props + const { displayLarge } = this.state + + const View = ContentViews[contentView] if (message.contentLength === 0) { return @@ -60,13 +60,13 @@ export default class ContentView extends Component {
{View.textView ? ( - + ) : ( )}
- +   @@ -76,3 +76,12 @@ export default class ContentView extends Component { ) } } + +export default connect( + state => ({ + contentView: state.ui.contentView, + }), + { + selectView: setContentView, + } +)(ContentView) diff --git a/web/src/js/components/ContentView/ViewSelector.jsx b/web/src/js/components/ContentView/ViewSelector.jsx index df3a5b83..9b151a5b 100644 --- a/web/src/js/components/ContentView/ViewSelector.jsx +++ b/web/src/js/components/ContentView/ViewSelector.jsx @@ -14,7 +14,7 @@ export default function ViewSelector({ active, message, onSelectView }) { {views.map(View => (
) } } + +export default connect( + state => ({ + needEdit: state.ui.needEdit, + }), + { + setPrompt, + selectTab, + } +)(FlowView) diff --git a/web/src/js/components/Header.jsx b/web/src/js/components/Header.jsx index b6ef1cc7..7f1fa69f 100644 --- a/web/src/js/components/Header.jsx +++ b/web/src/js/components/Header.jsx @@ -17,7 +17,7 @@ class Header extends Component { } render() { - const { updateLocation, query, selectedFlow, activeMenu} = this.props + const { query, selectedFlow, activeMenu} = this.props let entries = [...Header.entries] if(selectedFlow) @@ -41,7 +41,6 @@ class Header extends Component {
diff --git a/web/src/js/components/Header/MainMenu.jsx b/web/src/js/components/Header/MainMenu.jsx index 48fea5a2..27a4be60 100644 --- a/web/src/js/components/Header/MainMenu.jsx +++ b/web/src/js/components/Header/MainMenu.jsx @@ -3,6 +3,7 @@ import { connect } from 'react-redux' import FilterInput from './FilterInput' import { Query } from '../../actions.js' import { update as updateSettings } from '../../ducks/settings' +import { updateQuery, setSelectedInput } from '../../ducks/ui' class MainMenu extends Component { @@ -12,8 +13,8 @@ class MainMenu extends Component { static propTypes = { query: PropTypes.object.isRequired, settings: PropTypes.object.isRequired, - updateLocation: PropTypes.func.isRequired, updateSettings: PropTypes.func.isRequired, + updateQuery: PropTypes.func.isRequired, } constructor(props, context) { @@ -22,12 +23,19 @@ class MainMenu extends Component { this.onHighlightChange = this.onHighlightChange.bind(this) } + componentWillReceiveProps(nextProps) { + if(this.refs[nextProps.selectedInput]) { + this.refs[nextProps.selectedInput].select() + } + this.props.setSelectedInput(undefined) + } + onSearchChange(val) { - this.props.updateLocation(undefined, { [Query.SEARCH]: val }) + this.props.updateQuery({ [Query.SEARCH]: val }) } onHighlightChange(val) { - this.props.updateLocation(undefined, { [Query.HIGHLIGHT]: val }) + this.props.updateQuery({ [Query.HIGHLIGHT]: val }) } render() { @@ -70,9 +78,12 @@ class MainMenu extends Component { export default connect( state => ({ settings: state.settings.settings, + selectedInput: state.ui.selectedInput }), { updateSettings, + updateQuery, + setSelectedInput }, null, { diff --git a/web/src/js/components/MainView.jsx b/web/src/js/components/MainView.jsx index 93f7b299..7bb6f196 100644 --- a/web/src/js/components/MainView.jsx +++ b/web/src/js/components/MainView.jsx @@ -20,10 +20,6 @@ class MainView extends Component { * @todo replace with mapStateToProps */ componentWillReceiveProps(nextProps) { - // Update redux store with route changes - if (nextProps.routeParams.flowId !== (nextProps.selectedFlow || {}).id) { - this.props.selectFlow(nextProps.routeParams.flowId) - } if (nextProps.location.query[Query.SEARCH] !== nextProps.filter) { this.props.updateFilter(nextProps.location.query[Query.SEARCH], false) } @@ -32,127 +28,6 @@ class MainView extends Component { } } - /** - * @todo move to actions - */ - selectFlow(flow) { - if (flow) { - this.props.updateLocation(`/flows/${flow.id}/${this.props.routeParams.detailTab || 'request'}`) - } else { - this.props.updateLocation('/flows') - } - } - - /** - * @todo move to actions - */ - selectFlowRelative(shift) { - const { flows, routeParams, selectedFlow } = this.props - let index = 0 - if (!routeParams.flowId) { - if (shift < 0) { - index = flows.length - 1 - } - } else { - index = Math.min( - Math.max(0, flows.indexOf(selectedFlow) + shift), - flows.length - 1 - ) - } - this.selectFlow(flows[index]) - } - - /** - * @todo move to actions - */ - onMainKeyDown(e) { - var flow = this.props.selectedFlow - if (e.ctrlKey) { - return - } - switch (e.keyCode) { - case Key.K: - case Key.UP: - this.selectFlowRelative(-1) - break - case Key.J: - case Key.DOWN: - this.selectFlowRelative(+1) - break - case Key.SPACE: - case Key.PAGE_DOWN: - this.selectFlowRelative(+10) - break - case Key.PAGE_UP: - this.selectFlowRelative(-10) - break - case Key.END: - this.selectFlowRelative(+1e10) - break - case Key.HOME: - this.selectFlowRelative(-1e10) - break - case Key.ESC: - this.selectFlow(null) - break - case Key.H: - case Key.LEFT: - if (this.refs.flowDetails) { - this.refs.flowDetails.nextTab(-1) - } - break - case Key.L: - case Key.TAB: - case Key.RIGHT: - if (this.refs.flowDetails) { - this.refs.flowDetails.nextTab(+1) - } - break - case Key.C: - if (e.shiftKey) { - this.props.clearFlows() - } - break - case Key.D: - if (flow) { - if (e.shiftKey) { - this.props.duplicateFlow(flow) - } else { - this.props.removeFlow(flow) - } - } - break - case Key.A: - if (e.shiftKey) { - this.props.acceptAllFlows() - } else if (flow && flow.intercepted) { - this.props.acceptFlow(flow) - } - break - case Key.R: - if (!e.shiftKey && flow) { - this.props.replayFlow(flow) - } - break - case Key.V: - if (e.shiftKey && flow && flow.modified) { - this.props.revertFlow(flow) - } - break - case Key.E: - if (this.refs.flowDetails) { - this.refs.flowDetails.promptEdit() - } - break - case Key.SHIFT: - break - default: - console.debug('keydown', e.keyCode) - return - } - e.preventDefault() - } - render() { const { flows, selectedFlow, highlight } = this.props return ( @@ -162,7 +37,7 @@ class MainView extends Component { flows={flows} selected={selectedFlow} highlight={highlight} - onSelect={flow => this.selectFlow(flow)} + onSelect={flow => this.props.selectFlow(flow.id)} /> {selectedFlow && [ , @@ -171,7 +46,6 @@ class MainView extends Component { ref="flowDetails" tab={this.props.routeParams.detailTab} query={this.props.query} - updateLocation={this.props.updateLocation} updateFlow={data => this.props.updateFlow(selectedFlow, data)} flow={selectedFlow} /> @@ -193,13 +67,6 @@ export default connect( updateFilter, updateHighlight, updateFlow: flowsActions.update, - clearFlows: flowsActions.clear, - duplicateFlow: flowsActions.duplicate, - removeFlow: flowsActions.remove, - acceptAllFlows: flowsActions.acceptAll, - acceptFlow: flowsActions.accept, - replayFlow: flowsActions.replay, - revertFlow: flowsActions.revert, }, undefined, { withRef: true } 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/Header/FilterInput.jsx | 5 --- web/src/js/components/MainView.jsx | 4 +- web/src/js/components/Prompt.jsx | 9 +---- web/src/js/components/ProxyApp.jsx | 58 ++++------------------------ web/src/js/components/ValueEditor.jsx | 12 +----- 5 files changed, 13 insertions(+), 75 deletions(-) (limited to 'web/src/js/components') diff --git a/web/src/js/components/Header/FilterInput.jsx b/web/src/js/components/Header/FilterInput.jsx index 5b49b788..e421f1a4 100644 --- a/web/src/js/components/Header/FilterInput.jsx +++ b/web/src/js/components/Header/FilterInput.jsx @@ -7,10 +7,6 @@ import FilterDocs from './FilterDocs' export default class FilterInput extends Component { - static contextTypes = { - returnFocus: React.PropTypes.func, - } - constructor(props, context) { super(props, context) @@ -91,7 +87,6 @@ export default class FilterInput extends Component { blur() { ReactDOM.findDOMNode(this.refs.input).blur() - this.context.returnFocus() } select() { diff --git a/web/src/js/components/MainView.jsx b/web/src/js/components/MainView.jsx index 7bb6f196..756fa22e 100644 --- a/web/src/js/components/MainView.jsx +++ b/web/src/js/components/MainView.jsx @@ -69,5 +69,7 @@ export default connect( updateFlow: flowsActions.update, }, undefined, - { withRef: true } + { + withRef: true + } )(MainView) diff --git a/web/src/js/components/Prompt.jsx b/web/src/js/components/Prompt.jsx index e6564896..262b5ff0 100755 --- a/web/src/js/components/Prompt.jsx +++ b/web/src/js/components/Prompt.jsx @@ -4,17 +4,13 @@ import _ from 'lodash' import {Key} from '../utils.js' -Prompt.contextTypes = { - returnFocus: PropTypes.func -} - Prompt.propTypes = { options: PropTypes.array.isRequired, done: PropTypes.func.isRequired, prompt: PropTypes.string, } -export default function Prompt({ prompt, done, options }, context) { +export default function Prompt({ prompt, done, options }) { const opts = [] function keyTaken(k) { @@ -35,7 +31,7 @@ export default function Prompt({ prompt, done, options }, context) { } opts.push(opt) } - + function onKeyDown(event) { event.stopPropagation() event.preventDefault() @@ -44,7 +40,6 @@ export default function Prompt({ prompt, done, options }, context) { return } done(key.key || false) - context.returnFocus() } return ( 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, diff --git a/web/src/js/components/ValueEditor.jsx b/web/src/js/components/ValueEditor.jsx index 0316924f..5f1bf2dc 100755 --- a/web/src/js/components/ValueEditor.jsx +++ b/web/src/js/components/ValueEditor.jsx @@ -4,27 +4,17 @@ import ValidateEditor from './ValueEditor/ValidateEditor' export default class ValueEditor extends Component { - static contextTypes = { - returnFocus: PropTypes.func, - } - static propTypes = { content: PropTypes.string.isRequired, onDone: PropTypes.func.isRequired, inline: PropTypes.bool, } - constructor(props) { - super(props) - this.focus = this.focus.bind(this) - } - render() { - var tag = this.props.inline ? "span" : 'div' + var tag = this.props.inline ? 'span' : 'div' return ( this.context.returnFocus()} tag={tag} /> ) -- 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/ContentView.jsx | 94 ++++++++++--------------- web/src/js/components/ContentView/MetaViews.jsx | 2 +- web/src/js/components/Prompt.jsx | 8 +-- web/src/js/components/ProxyApp.jsx | 13 ++-- 4 files changed, 47 insertions(+), 70 deletions(-) (limited to 'web/src/js/components') diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx index 9d11ecd9..d6ee5497 100644 --- a/web/src/js/components/ContentView.jsx +++ b/web/src/js/components/ContentView.jsx @@ -5,83 +5,61 @@ import * as ContentViews from './ContentView/ContentViews' import * as MetaViews from './ContentView/MetaViews' import ContentLoader from './ContentView/ContentLoader' import ViewSelector from './ContentView/ViewSelector' -import { setContentView } from '../ducks/ui' +import { setContentView, setDisplayLarge } from '../ducks/ui' -class ContentView extends Component { +ContentView.propTypes = { + // It may seem a bit weird at the first glance: + // Every view takes the flow and the message as props, e.g. + // + flow: React.PropTypes.object.isRequired, + message: React.PropTypes.object.isRequired, +} - static propTypes = { - // It may seem a bit weird at the first glance: - // Every view takes the flow and the message as props, e.g. - // - flow: React.PropTypes.object.isRequired, - message: React.PropTypes.object.isRequired, - } +ContentView.isContentTooLarge = msg => msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2) - constructor(props, context) { - super(props, context) +function ContentView({ flow, message, contentView, selectView, displayLarge }) { - this.state = { displayLarge: false } + if (message.contentLength === 0) { + return } - displayLarge() { - this.setState({ displayLarge: true }) + if (message.contentLength === null) { + return } - componentWillReceiveProps(nextProps) { - // @todo move to ui ducks - if (nextProps.message !== this.props.message) { - this.setState({ displayLarge: false }) - } + if (!displayLarge && ContentView.isContentTooLarge(message)) { + return this.props.setDisplayLarge(true)}/> } - isContentTooLarge(msg) { - return msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2) - } - - render() { - const { flow, message, contentView, selectView } = this.props - const { displayLarge } = this.state - - const View = ContentViews[contentView] + const View = ContentViews[contentView] - if (message.contentLength === 0) { - return - } - - if (message.contentLength === null) { - return - } - - if (!displayLarge && this.isContentTooLarge(message)) { - return - } - - return ( -
- {View.textView ? ( - - - - ) : ( - - )} - + return ( + + ) } export default connect( state => ({ contentView: state.ui.contentView, + displayLarge: state.ui.displayLarge, }), { selectView: setContentView, + setDisplayLarge, } )(ContentView) diff --git a/web/src/js/components/ContentView/MetaViews.jsx b/web/src/js/components/ContentView/MetaViews.jsx index 83720a13..2d064b54 100644 --- a/web/src/js/components/ContentView/MetaViews.jsx +++ b/web/src/js/components/ContentView/MetaViews.jsx @@ -1,5 +1,5 @@ import React from 'react' -import {formatSize} from '../../utils.js' +import { formatSize } from '../../utils.js' export function ContentEmpty({ flow, message }) { return ( diff --git a/web/src/js/components/Prompt.jsx b/web/src/js/components/Prompt.jsx index 262b5ff0..1c20b1a9 100755 --- a/web/src/js/components/Prompt.jsx +++ b/web/src/js/components/Prompt.jsx @@ -13,10 +13,6 @@ Prompt.propTypes = { export default function Prompt({ prompt, done, options }) { const opts = [] - function keyTaken(k) { - return _.map(opts, 'key').includes(k) - } - for (let i = 0; i < options.length; i++) { let opt = options[i] if (_.isString(opt)) { @@ -32,6 +28,10 @@ export default function Prompt({ prompt, done, options }) { opts.push(opt) } + function keyTaken(k) { + return _.map(opts, 'key').includes(k) + } + function onKeyDown(event) { event.stopPropagation() event.preventDefault() 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 From 7b543dd95c2732be2e704400d9ed04c20d795b56 Mon Sep 17 00:00:00 2001 From: Jason Date: Tue, 5 Jul 2016 13:43:37 -0400 Subject: [web] bug fix --- web/src/js/components/FlowView.jsx | 4 ++-- web/src/js/components/ProxyApp.jsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'web/src/js/components') diff --git a/web/src/js/components/FlowView.jsx b/web/src/js/components/FlowView.jsx index 1a04c915..5ba472a5 100644 --- a/web/src/js/components/FlowView.jsx +++ b/web/src/js/components/FlowView.jsx @@ -79,7 +79,7 @@ export default class FlowView extends Component { onSelectTab={this.props.selectTab} /> this.tabComponent = tab } flow={flow} updateFlow={updateFlow} /> - {this.state.prompt && ( + {this.props.promptOpen && ( )}
@@ -89,7 +89,7 @@ export default class FlowView extends Component { export default connect( state => ({ - needEdit: state.ui.needEdit, + promptOpen: state.ui.promptOpen, }), { setPrompt, diff --git a/web/src/js/components/ProxyApp.jsx b/web/src/js/components/ProxyApp.jsx index e8c0e6d6..28a91ff3 100644 --- a/web/src/js/components/ProxyApp.jsx +++ b/web/src/js/components/ProxyApp.jsx @@ -77,7 +77,7 @@ class ProxyAppMain extends Component { if (e.ctrlKey) { return } - this.props.onKeyDown(e.keyCode) + this.props.onKeyDown(e.keyCode, e.shiftKey) e.preventDefault() } -- cgit v1.2.3 From 666017125ac9dc38200753cdbe86eeb21bd5864a Mon Sep 17 00:00:00 2001 From: Jason Date: Fri, 8 Jul 2016 21:43:18 +0800 Subject: [web] add tests for main view and ui --- web/src/js/components/ContentView.jsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) (limited to 'web/src/js/components') diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx index d6ee5497..6a982a5d 100644 --- a/web/src/js/components/ContentView.jsx +++ b/web/src/js/components/ContentView.jsx @@ -17,18 +17,19 @@ ContentView.propTypes = { ContentView.isContentTooLarge = msg => msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2) -function ContentView({ flow, message, contentView, selectView, displayLarge }) { +function ContentView(props) { + const { flow, message, contentView, selectView, displayLarge, setDisplayLarge } = props if (message.contentLength === 0) { - return + return } if (message.contentLength === null) { - return + return } if (!displayLarge && ContentView.isContentTooLarge(message)) { - return this.props.setDisplayLarge(true)}/> + return setDisplayLarge(true)}/> } const View = ContentViews[contentView] -- cgit v1.2.3 From 2624911d75670afaff8631943d567bfa2b42d7b8 Mon Sep 17 00:00:00 2001 From: Clemens Brunner Date: Tue, 12 Jul 2016 23:52:33 +0200 Subject: fixed bug (#1342) fix minor mitmweb issues --- web/src/js/components/Header/FlowMenu.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'web/src/js/components') diff --git a/web/src/js/components/Header/FlowMenu.jsx b/web/src/js/components/Header/FlowMenu.jsx index 8d13dd6a..9855cde3 100644 --- a/web/src/js/components/Header/FlowMenu.jsx +++ b/web/src/js/components/Header/FlowMenu.jsx @@ -15,11 +15,11 @@ function FlowMenu({ flow, acceptFlow, replayFlow, duplicateFlow, removeFlow, rev return (
-
-- cgit v1.2.3 From f356a84430f6606b2d7157eefd8e4a100fdd5dfb Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Tue, 19 Jul 2016 03:13:39 -0700 Subject: simplify web ui ducks --- web/src/js/components/FlowTable/FlowTableHead.jsx | 6 +++--- web/src/js/components/Header.jsx | 6 +++--- web/src/js/components/Header/FlowMenu.jsx | 2 +- web/src/js/components/MainView.jsx | 13 ++++++------- web/src/js/components/ProxyApp.jsx | 2 +- web/src/js/components/ValueEditor/EditorBase.jsx | 1 - 6 files changed, 14 insertions(+), 16 deletions(-) (limited to 'web/src/js/components') diff --git a/web/src/js/components/FlowTable/FlowTableHead.jsx b/web/src/js/components/FlowTable/FlowTableHead.jsx index f65369bd..50242737 100644 --- a/web/src/js/components/FlowTable/FlowTableHead.jsx +++ b/web/src/js/components/FlowTable/FlowTableHead.jsx @@ -3,7 +3,7 @@ import { connect } from 'react-redux' import classnames from 'classnames' import columns from './FlowColumns' -import { updateSort } from '../../ducks/views/main' +import { updateSort } from '../../ducks/flowView' FlowTableHead.propTypes = { updateSort: PropTypes.func.isRequired, @@ -29,8 +29,8 @@ function FlowTableHead({ sortColumn, sortDesc, updateSort }) { export default connect( state => ({ - sortDesc: state.flows.views.main.sort.desc, - sortColumn: state.flows.views.main.sort.column, + sortDesc: state.flowView.sort.desc, + sortColumn: state.flowView.sort.column, }), { updateSort diff --git a/web/src/js/components/Header.jsx b/web/src/js/components/Header.jsx index 7f1fa69f..5de885ae 100644 --- a/web/src/js/components/Header.jsx +++ b/web/src/js/components/Header.jsx @@ -17,10 +17,10 @@ class Header extends Component { } render() { - const { query, selectedFlow, activeMenu} = this.props + const { query, selectedFlowId, activeMenu} = this.props let entries = [...Header.entries] - if(selectedFlow) + if(selectedFlowId) entries.push(FlowMenu) const Active = _.find(entries, (e) => e.title == activeMenu) @@ -51,7 +51,7 @@ class Header extends Component { export default connect( state => ({ - selectedFlow: state.flows.views.main.selected[0], + selectedFlowId: state.flows.selected[0], activeMenu: state.ui.activeMenu, }), { diff --git a/web/src/js/components/Header/FlowMenu.jsx b/web/src/js/components/Header/FlowMenu.jsx index 9855cde3..bdd30d5e 100644 --- a/web/src/js/components/Header/FlowMenu.jsx +++ b/web/src/js/components/Header/FlowMenu.jsx @@ -29,7 +29,7 @@ function FlowMenu({ flow, acceptFlow, replayFlow, duplicateFlow, removeFlow, rev export default connect( state => ({ - flow: state.flows.list.byId[state.flows.views.main.selected[0]], + flow: state.flows.byId[state.flows.selected[0]], }), { acceptFlow: flowsActions.accept, diff --git a/web/src/js/components/MainView.jsx b/web/src/js/components/MainView.jsx index 756fa22e..b0bbf70e 100644 --- a/web/src/js/components/MainView.jsx +++ b/web/src/js/components/MainView.jsx @@ -1,12 +1,11 @@ import React, { Component, PropTypes } from 'react' import { connect } from 'react-redux' import { Query } from '../actions.js' -import { Key } from '../utils.js' import Splitter from './common/Splitter' import FlowTable from './FlowTable' import FlowView from './FlowView' import * as flowsActions from '../ducks/flows' -import { select as selectFlow, updateFilter, updateHighlight } from '../ducks/views/main' +import { updateFilter, updateHighlight } from '../ducks/flowView' class MainView extends Component { @@ -57,13 +56,13 @@ class MainView extends Component { export default connect( state => ({ - flows: state.flows.views.main.view.data, - filter: state.flows.views.main.filter, - highlight: state.flows.views.main.highlight, - selectedFlow: state.flows.list.byId[state.flows.views.main.selected[0]] + flows: state.flowView.data, + filter: state.flowView.filter, + highlight: state.flowView.highlight, + selectedFlow: state.flows.byId[state.flows.selected[0]] }), { - selectFlow, + selectFlow: flowsActions.select, updateFilter, updateHighlight, updateFlow: flowsActions.update, diff --git a/web/src/js/components/ProxyApp.jsx b/web/src/js/components/ProxyApp.jsx index f0e33330..2962fc2b 100644 --- a/web/src/js/components/ProxyApp.jsx +++ b/web/src/js/components/ProxyApp.jsx @@ -60,7 +60,7 @@ export default connect( showEventLog: state.eventLog.visible, query: state.ui.query, panel: state.ui.panel, - selectedFlowId: state.flows.views.main.selected[0] + selectedFlowId: state.flows.selected[0] }), { appInit, diff --git a/web/src/js/components/ValueEditor/EditorBase.jsx b/web/src/js/components/ValueEditor/EditorBase.jsx index e737d2af..aa09dad5 100755 --- a/web/src/js/components/ValueEditor/EditorBase.jsx +++ b/web/src/js/components/ValueEditor/EditorBase.jsx @@ -54,7 +54,6 @@ export default class EditorBase extends Component { render() { return (