diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx index 9d11ecd9b..d6ee54973 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) + +function ContentView({ flow, message, contentView, selectView, displayLarge }) { + + if (message.contentLength === 0) { + return } - constructor(props, context) { - super(props, context) - - this.state = { displayLarge: false } + if (message.contentLength === null) { + return } - displayLarge() { - this.setState({ displayLarge: true }) + if (!displayLarge && ContentView.isContentTooLarge(message)) { + return this.props.setDisplayLarge(true)}/> } - componentWillReceiveProps(nextProps) { - // @todo move to ui ducks - if (nextProps.message !== this.props.message) { - this.setState({ displayLarge: false }) - } - } + const View = ContentViews[contentView] - 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] - - if (message.contentLength === 0) { - return - } - - if (message.contentLength === null) { - return - } - - if (!displayLarge && this.isContentTooLarge(message)) { - return - } - - return ( -
- {View.textView ? ( - - - - ) : ( - - )} -
- -   - - - -
+ return ( +
+ {View.textView ? ( + + + + ) : ( + + )} +
+ +   + + +
- ) - } +
+ ) } 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 83720a137..2d064b546 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/Header/FilterInput.jsx b/web/src/js/components/Header/FilterInput.jsx index 5b49b7884..e421f1a49 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 7bb6f196d..756fa22e2 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 e6564896c..1c20b1a91 100755 --- a/web/src/js/components/Prompt.jsx +++ b/web/src/js/components/Prompt.jsx @@ -4,23 +4,15 @@ 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) { - return _.map(opts, 'key').includes(k) - } - for (let i = 0; i < options.length; i++) { let opt = options[i] if (_.isString(opt)) { @@ -35,7 +27,11 @@ export default function Prompt({ prompt, done, options }, context) { } opts.push(opt) } - + + function keyTaken(k) { + return _.map(opts, 'key').includes(k) + } + 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 28a91ff37..f0e333307 100644 --- a/web/src/js/components/ProxyApp.jsx +++ b/web/src/js/components/ProxyApp.jsx @@ -12,79 +12,35 @@ 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(this.context.router) + window.addEventListener('keydown', this.props.onKeyDown); } - componentWillMount() { - this.props.appInit() + componentWillUnmount() { + 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 }) } } - /** - * @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.shiftKey) - e.preventDefault() - } - render() { const { showEventLog, location, children, query } = this.props return ( -
+
{React.cloneElement( children, @@ -102,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, diff --git a/web/src/js/components/ValueEditor.jsx b/web/src/js/components/ValueEditor.jsx index 0316924f6..5f1bf2dca 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} /> ) diff --git a/web/src/js/ducks/ui.js b/web/src/js/ducks/ui.js index bc64ffa83..15334f880 100644 --- a/web/src/js/ducks/ui.js +++ b/web/src/js/ducks/ui.js @@ -4,15 +4,17 @@ import * as flowsActions from '../ducks/flows' export const SET_ACTIVE_MENU = 'UI_SET_ACTIVE_MENU' export const SET_CONTENT_VIEW = 'UI_SET_CONTENT_VIEW' -export const SET_SELECTED_INPUT = 'SET_SELECTED_INPUT' -export const UPDATE_QUERY = 'UPDATE_QUERY' -export const SELECT_TAB = 'SELECT_TAB' -export const SELECT_TAB_RELATIVE = 'SELECT_TAB_RELATIVE' -export const SET_PROMPT = 'SET_PROMPT' +export const SET_SELECTED_INPUT = 'UI_SET_SELECTED_INPUT' +export const UPDATE_QUERY = 'UI_UPDATE_QUERY' +export const SELECT_TAB = 'UI_SELECT_TAB' +export const SELECT_TAB_RELATIVE = 'UI_SELECT_TAB_RELATIVE' +export const SET_PROMPT = 'UI_SET_PROMPT' +export const SET_DISPLAY_LARGE = 'UI_SET_DISPLAY_LARGE' const defaultState = { activeMenu: 'Start', selectedInput: null, + displayLarge: false, promptOpen: false, contentView: 'ViewAuto', query: {}, @@ -32,6 +34,7 @@ export default function reducer(state = defaultState, action) { if (action.flowId && !action.currentSelection) { return { ...state, + displayLarge: false, activeMenu: 'Flow', } } @@ -39,11 +42,15 @@ export default function reducer(state = defaultState, action) { if (!action.flowId && state.activeMenu === 'Flow') { return { ...state, + displayLarge: false, activeMenu: 'Start', } } - return state + return { + ...state, + displayLarge: false, + } case SET_CONTENT_VIEW: return { @@ -88,6 +95,12 @@ export default function reducer(state = defaultState, action) { promptOpen: action.open, } + case SET_DISPLAY_LARGE: + return { + ...state, + displayLarge: action.displayLarge, + } + default: return state } @@ -124,7 +137,17 @@ export function setPrompt(open) { return { type: SET_PROMPT, open } } -export function onKeyDown(key, shiftKey) { +export function setDisplayLarge(displayLarge) { + return { type: SET_DISPLAY_LARGE, displayLarge } +} + +export function onKeyDown(e) { + if(e.ctrlKey) { + return () => {} + } + var key = e.keyCode + var shiftKey = e.shiftKey + e.preventDefault() return (dispatch, getState) => { switch (key) { @@ -235,6 +258,5 @@ export function onKeyDown(key, shiftKey) { default: return () => {} } - event.preventDefault() } }