diff options
| -rw-r--r-- | web/src/js/components/ContentView.jsx | 65 | ||||
| -rw-r--r-- | web/src/js/components/ContentView/ContentViews.jsx | 6 | ||||
| -rw-r--r-- | web/src/js/components/FlowView/Messages.jsx | 6 | ||||
| -rw-r--r-- | web/src/js/ducks/ui/flow.js | 3 |
4 files changed, 39 insertions, 41 deletions
diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx index f7eafc89..93f16ec0 100644 --- a/web/src/js/components/ContentView.jsx +++ b/web/src/js/components/ContentView.jsx @@ -6,7 +6,6 @@ import * as MetaViews from './ContentView/MetaViews' import ContentLoader from './ContentView/ContentLoader' import ViewSelector from './ContentView/ViewSelector' import { setContentView, displayLarge, updateEdit } from '../ducks/ui/flow' -import CodeEditor from './common/CodeEditor' ContentView.propTypes = { // It may seem a bit weird at the first glance: @@ -19,7 +18,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, onContentChange, isFlowEditorOpen, setModifiedFlowContent } = props + const { flow, message, contentView, selectView, displayLarge, setDisplayLarge, onContentChange, readonly, isFlowEditorOpen } = props if (message.contentLength === 0) { return <MetaViews.ContentEmpty {...props}/> @@ -37,43 +36,35 @@ function ContentView(props) { return ( <div> - {isFlowEditorOpen ? ( + {View.textView ? ( <ContentLoader flow={flow} message={message}> - <CodeEditor content="" onChange={content =>{setModifiedFlowContent(content)}}/> - </ContentLoader> - ): ( - <div> - {View.textView ? ( - <ContentLoader flow={flow} message={message}> - <View content="" /> - </ContentLoader> - ) : ( - <View flow={flow} message={message} /> - )} - <div className="view-options text-center"> - <ViewSelector onSelectView={selectView} active={View} message={message}/> - - <a className="btn btn-default btn-xs" - href={MessageUtils.getContentURL(flow, message)} - title="Download the content of the flow."> - <i className="fa fa-download"/> - </a> - - <a className="btn btn-default btn-xs" - onClick={() => ContentView.fileInput.click()} - title="Upload a file to replace the content." - > - <i className="fa fa-upload"/> - </a> - <input - ref={ref => ContentView.fileInput = ref} - className="hidden" - type="file" - onChange={e => {if(e.target.files.length > 0) onContentChange(e.target.files[0])}} - /> - </div> - </div> + <View readonly={readonly} isFlowEditorOpen={isFlowEditorOpen} content="" /> + </ContentLoader> + ) : ( + <View flow={flow} message={message} /> )} + <div className="view-options text-center"> + <ViewSelector onSelectView={selectView} active={View} message={message}/> + + <a className="btn btn-default btn-xs" + href={MessageUtils.getContentURL(flow, message)} + title="Download the content of the flow."> + <i className="fa fa-download"/> + </a> + + <a className="btn btn-default btn-xs" + onClick={() => ContentView.fileInput.click()} + title="Upload a file to replace the content." + > + <i className="fa fa-upload"/> + </a> + <input + ref={ref => ContentView.fileInput = ref} + className="hidden" + type="file" + onChange={e => {if(e.target.files.length > 0) onContentChange(e.target.files[0])}} + /> + </div> </div> ) } diff --git a/web/src/js/components/ContentView/ContentViews.jsx b/web/src/js/components/ContentView/ContentViews.jsx index 82ee0adc..0eaf3ea8 100644 --- a/web/src/js/components/ContentView/ContentViews.jsx +++ b/web/src/js/components/ContentView/ContentViews.jsx @@ -1,6 +1,7 @@ import React, { PropTypes } from 'react' import ContentLoader from './ContentLoader' import { MessageUtils } from '../../flow/utils.js' +import CodeEditor from '../common/CodeEditor' const views = [ViewAuto, ViewImage, ViewJSON, ViewRaw] @@ -28,8 +29,9 @@ ViewRaw.propTypes = { content: React.PropTypes.string.isRequired, } -export function ViewRaw({ content }) { - return <pre>{content}</pre> +export function ViewRaw({ content, isFlowEditorOpen, readonly }) { + let showEditor = isFlowEditorOpen && !readonly + return showEditor ? <CodeEditor content={content} onChange={content =>alert(content)}/> : <pre>{content}</pre> } ViewJSON.textView = true diff --git a/web/src/js/components/FlowView/Messages.jsx b/web/src/js/components/FlowView/Messages.jsx index 133b2883..50568799 100644 --- a/web/src/js/components/FlowView/Messages.jsx +++ b/web/src/js/components/FlowView/Messages.jsx @@ -144,7 +144,11 @@ export class Response extends Component { onChange={headers => updateFlow({ response: { headers } })} /> <hr/> - <ContentView flow={flow} message={flow.response}/> + <ContentView + readonly={!isEdit} + flow={flow} + message={flow.response} + /> </section> ) } diff --git a/web/src/js/ducks/ui/flow.js b/web/src/js/ducks/ui/flow.js index b1fe535f..c70ebfa9 100644 --- a/web/src/js/ducks/ui/flow.js +++ b/web/src/js/ducks/ui/flow.js @@ -22,7 +22,8 @@ export default function reducer(state = defaultState, action) { case START_EDIT: return { ...state, - modifiedFlow: action.flow + modifiedFlow: action.flow, + contentView: 'ViewRaw' } case UPDATE_EDIT: |