From 281f20ef1e9ac33a7e210ba562eb2914f6d187e6 Mon Sep 17 00:00:00 2001 From: Clemens Date: Tue, 19 Jul 2016 16:13:26 +0200 Subject: added flow_content update --- web/src/js/components/ContentView.jsx | 54 ++++++++++++++++------ .../js/components/FlowView/FlowEditorButton.jsx | 49 ++++++++------------ web/src/js/components/FlowView/Messages.jsx | 2 +- web/src/js/ducks/ui.js | 43 +++++++++++++++-- 4 files changed, 98 insertions(+), 50 deletions(-) (limited to 'web/src/js') diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx index 0b93d3f0..766de26f 100644 --- a/web/src/js/components/ContentView.jsx +++ b/web/src/js/components/ContentView.jsx @@ -5,9 +5,8 @@ import * as ContentViews from './ContentView/ContentViews' import * as MetaViews from './ContentView/MetaViews' import ContentLoader from './ContentView/ContentLoader' import ViewSelector from './ContentView/ViewSelector' -import { setContentView, setDisplayLarge } from '../ducks/ui' +import { setContentView, setDisplayLarge, setModifiedFlowContent } from '../ducks/ui' import CodeEditor from './common/CodeEditor' -import {setModifiedFlowContent} from '../ducks/flows' ContentView.propTypes = { // It may seem a bit weird at the first glance: @@ -20,7 +19,7 @@ ContentView.propTypes = { ContentView.isContentTooLarge = msg => msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2) function ContentView(props) { - const { flow, message, contentView, selectView, displayLarge, setDisplayLarge } = props + const { flow, message, contentView, selectView, displayLarge, setDisplayLarge, onContentChange, isFlowEditorOpen, setModifiedFlowContent } = props if (message.contentLength === 0) { return @@ -38,20 +37,43 @@ function ContentView(props) { return (
- {View.textView ? ( + {isFlowEditorOpen ? ( - - - ) : ( - + {setModifiedFlowContent(content)}}/> + + ): ( +
+ {View.textView ? ( + + + + ) : ( + + )} +
+ +   + + + +   + ContentView.fileInput.click()} + title="Upload a file to replace the content." + > + + + ContentView.fileInput = ref} + className="hidden" + type="file" + onChange={e => {if(e.target.files.length > 0) onContentChange(e.target.files[0])}} + /> +
+
)} -
- -   - - - -
) } @@ -60,9 +82,11 @@ export default connect( state => ({ contentView: state.ui.contentView, displayLarge: state.ui.displayLarge, + isFlowEditorOpen : state.ui.isFlowEditorOpen }), { selectView: setContentView, setDisplayLarge, + setModifiedFlowContent } )(ContentView) diff --git a/web/src/js/components/FlowView/FlowEditorButton.jsx b/web/src/js/components/FlowView/FlowEditorButton.jsx index e9c75535..3d0d1d16 100644 --- a/web/src/js/components/FlowView/FlowEditorButton.jsx +++ b/web/src/js/components/FlowView/FlowEditorButton.jsx @@ -4,41 +4,32 @@ import { connect } from 'react-redux' import {closeFlowEditor} from '../../ducks/ui.js' import {openFlowEditor} from '../../ducks/ui.js' -// FlowEditorButton.propTypes = { -// isFlowEditorOpen: PropTypes.bool.isRequired, -// content: PropTypes.string.isRequired, -// onContentChange: PropTypes.func.isRequired -// } - -class FlowEditorButton extends Component{ - static propTypes = { - isFlowEditorOpen: PropTypes.bool.isRequired, - content: PropTypes.string.isRequired, - onContentChange: PropTypes.func.isRequired - } +FlowEditorButton.propTypes = { + isFlowEditorOpen: PropTypes.bool.isRequired, + content: PropTypes.string.isRequired, + onContentChange: PropTypes.func.isRequired +} - render(){ - let { isFlowEditorOpen, closeFlowEditor, openFlowEditor, onContentChange, content } = this.props - return ( - - ) - } +function FlowEditorButton ({ isFlowEditorOpen, closeFlowEditor, openFlowEditor, onContentChange, content }) { + return ( + + ) } export default connect( state => ({ isFlowEditorOpen: state.ui.isFlowEditorOpen, - content: state.flows.modifiedFlow.content + content: state.ui.modifiedFlow.content }), { closeFlowEditor, diff --git a/web/src/js/components/FlowView/Messages.jsx b/web/src/js/components/FlowView/Messages.jsx index 8cb918a8..2f03c712 100644 --- a/web/src/js/components/FlowView/Messages.jsx +++ b/web/src/js/components/FlowView/Messages.jsx @@ -7,7 +7,7 @@ import ContentView from '../ContentView' import ValueEditor from '../ValueEditor' import Headers from './Headers' import * as flowActions from '../../ducks/flows' -import FlowEditorButton from './FlowEditorButton.jsx' +import FlowEditorButton from './FlowEditorButton' class RequestLine extends Component { diff --git a/web/src/js/ducks/ui.js b/web/src/js/ducks/ui.js index f745f0af..ccd17eb6 100644 --- a/web/src/js/ducks/ui.js +++ b/web/src/js/ducks/ui.js @@ -9,6 +9,9 @@ export const UPDATE_QUERY = 'UI_UPDATE_QUERY' export const SELECT_TAB = 'UI_SELECT_TAB' export const SET_PROMPT = 'UI_SET_PROMPT' export const SET_DISPLAY_LARGE = 'UI_SET_DISPLAY_LARGE' +export const OPEN_FLOW_EDITOR= 'UI_OPEN_FLOW_EDITOR' +export const CLOSE_FLOW_EDITOR = 'UI_CLOSE_FLOW_EDITOR' +export const SET_MODIFIED_FLOW_CONTENT = 'UI_SET_MODIFIED_FLOW' const defaultState = { activeMenu: 'Start', @@ -18,7 +21,9 @@ const defaultState = { promptOpen: false, contentView: 'ViewAuto', query: {}, - panel: 'request' + panel: 'request', + modifiedFlow: {headers: "", content: ""}, + isFlowEditorOpen: false } export default function reducer(state = defaultState, action) { @@ -31,9 +36,10 @@ export default function reducer(state = defaultState, action) { } case flowsActions.SELECT: + let s = {...state, isFlowEditorOpen: false} if (action.flowIds.length && !state.isFlowSelected) { return { - ...state, + ...s, displayLarge: false, activeMenu: 'Flow', isFlowSelected: true, @@ -46,14 +52,14 @@ export default function reducer(state = defaultState, action) { activeMenu = 'Start' } return { - ...state, + ...s, activeMenu, isFlowSelected: false, } } return { - ...state, + ...s, displayLarge: false, } @@ -78,6 +84,7 @@ export default function reducer(state = defaultState, action) { case SELECT_TAB: return { ...state, + isFlowEditorOpen: false, panel: action.panel } @@ -92,7 +99,21 @@ export default function reducer(state = defaultState, action) { ...state, displayLarge: action.displayLarge, } - + case OPEN_FLOW_EDITOR: + return { + ...state, + isFlowEditorOpen: true + } + case CLOSE_FLOW_EDITOR: + return { + ...state, + isFlowEditorOpen: false + } + case SET_MODIFIED_FLOW_CONTENT: + return{ + ...state, + modifiedFlow: {...state.modifiedFlow, content: action.content} + } default: return state } @@ -126,6 +147,18 @@ export function setDisplayLarge(displayLarge) { return { type: SET_DISPLAY_LARGE, displayLarge } } +export function openFlowEditor(){ + return { type: OPEN_FLOW_EDITOR } +} + +export function closeFlowEditor(){ + return { type: CLOSE_FLOW_EDITOR } +} + +export function setModifiedFlowContent(content) { + return { type: SET_MODIFIED_FLOW_CONTENT, content } +} + export function onKeyDown(e) { if (e.ctrlKey) { return () => { -- cgit v1.2.3