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') 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 ++-- web/src/js/ducks/ui.js | 29 ++++++-- 5 files changed, 70 insertions(+), 76 deletions(-) (limited to 'web/src/js') 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 ( +
+ {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 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, diff --git a/web/src/js/ducks/ui.js b/web/src/js/ducks/ui.js index bc64ffa8..8fb5b735 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,6 +137,10 @@ export function setPrompt(open) { return { type: SET_PROMPT, open } } +export function setDisplayLarge(displayLarge) { + return { type: SET_DISPLAY_LARGE, displayLarge } +} + export function onKeyDown(key, shiftKey) { return (dispatch, getState) => { switch (key) { -- cgit v1.2.3