diff options
Diffstat (limited to 'web/src/js/components/ContentView')
-rw-r--r-- | web/src/js/components/ContentView/ContentEditor.jsx | 42 | ||||
-rw-r--r-- | web/src/js/components/ContentView/ContentViews.jsx | 29 |
2 files changed, 47 insertions, 24 deletions
diff --git a/web/src/js/components/ContentView/ContentEditor.jsx b/web/src/js/components/ContentView/ContentEditor.jsx new file mode 100644 index 00000000..a38e4d6f --- /dev/null +++ b/web/src/js/components/ContentView/ContentEditor.jsx @@ -0,0 +1,42 @@ +import React, { Component, PropTypes } from 'react' +import CodeEditor from '../common/CodeEditor' + +export default class ContentEditor extends Component { + + static propTypes = { + content: PropTypes.string.isRequired, + onSave: PropTypes.func.isRequired, + onClose: PropTypes.func.isRequired, + onOpen: PropTypes.func.isRequired, + isClosed: PropTypes.bool.isRequired + } + + constructor(props){ + super(props) + this.state = {content: this.props.content} + } + + render() { + return ( + <div> + {this.props.isClosed ? + <a className="btn btn-default btn-xs pull-right" onClick={this.props.onOpen}> + <i className="fa fa-pencil-square-o"/> + </a> : + <span> + <a className="btn btn-default btn-xs pull-right" onClick={this.props.onClose}> + <i className="fa fa-times"/> + </a> + <a className="btn btn-default btn-xs pull-right" onClick={() => this.props.onSave(this.state.content)}> + <i className="fa fa-floppy-o"/> + </a> + </span> + } + {!this.props.isClosed && + <CodeEditor value={this.state.content} onChange={content => this.setState({content: content})}/> + } + </div> + + ) + } +} diff --git a/web/src/js/components/ContentView/ContentViews.jsx b/web/src/js/components/ContentView/ContentViews.jsx index 617ed242..82ee0adc 100644 --- a/web/src/js/components/ContentView/ContentViews.jsx +++ b/web/src/js/components/ContentView/ContentViews.jsx @@ -1,12 +1,9 @@ import React, { PropTypes } from 'react' import ContentLoader from './ContentLoader' import { MessageUtils } from '../../flow/utils.js' -import CodeEditor from '../common/CodeEditor' -import {formatSize} from '../../utils.js' - -const views = [ViewAuto, ViewImage, ViewJSON, ViewRaw, ViewFile] +const views = [ViewAuto, ViewImage, ViewJSON, ViewRaw] ViewImage.regex = /^image\/(png|jpe?g|gif|vnc.microsoft.icon|x-icon)$/i ViewImage.matches = msg => ViewImage.regex.test(MessageUtils.getContentType(msg)) @@ -26,16 +23,13 @@ export function ViewImage({ flow, message }) { ViewRaw.textView = true ViewRaw.matches = () => true -ViewRaw.input = {} ViewRaw.propTypes = { content: React.PropTypes.string.isRequired, } -export function ViewRaw({ content, update_content }) { - return ( - <CodeEditor value={content} onSave={update_content}/> - ) +export function ViewRaw({ content }) { + return <pre>{content}</pre> } ViewJSON.textView = true @@ -65,26 +59,13 @@ ViewAuto.propTypes = { flow: React.PropTypes.object.isRequired, } -export function ViewAuto({ message, flow, update_content }) { +export function ViewAuto({ message, flow }) { const View = ViewAuto.findView(message) if (View.textView) { - return <ContentLoader message={message} flow={flow}><View update_content={update_content} content="" /></ContentLoader> + return <ContentLoader message={message} flow={flow}><View content="" /></ContentLoader> } else { return <View message={message} flow={flow} /> } } -ViewFile.matches = () => false - -ViewFile.propTypes = { - message: React.PropTypes.object.isRequired, - flow: React.PropTypes.object.isRequired, -} - -export function ViewFile({ message, flow }) { - return <div className="alert alert-info"> - {formatSize(message.contentLength)} content size. - </div> -} - export default views |