diff options
Diffstat (limited to 'web/src/js/components/ContentView/ContentViews.jsx')
-rw-r--r-- | web/src/js/components/ContentView/ContentViews.jsx | 91 |
1 files changed, 60 insertions, 31 deletions
diff --git a/web/src/js/components/ContentView/ContentViews.jsx b/web/src/js/components/ContentView/ContentViews.jsx index a1adebea..9feb0623 100644 --- a/web/src/js/components/ContentView/ContentViews.jsx +++ b/web/src/js/components/ContentView/ContentViews.jsx @@ -1,4 +1,6 @@ -import React, { PropTypes } from 'react' +import React, { PropTypes, Component } from 'react' +import { connect } from 'react-redux' +import { setContentViewDescription, setShowFullContent } from '../../ducks/ui/flow' import ContentLoader from './ContentLoader' import { MessageUtils } from '../../flow/utils' import CodeEditor from './CodeEditor' @@ -18,43 +20,70 @@ function ViewImage({ flow, message }) { ) } - -ViewRaw.matches = () => true -ViewRaw.propTypes = { +Edit.propTypes = { content: React.PropTypes.string.isRequired, } -function ViewRaw({ content, readonly, onChange }) { - return readonly ? <pre>{content}</pre> : <CodeEditor content={content} onChange={onChange}/> + +function Edit({ content, onChange }) { + return <CodeEditor content={content} onChange={onChange}/> } -ViewRaw = ContentLoader(ViewRaw) +Edit = ContentLoader(Edit) +class ViewServer extends Component { + static defaultProps = { + maxLines: 80, + } -const isJSON = /^application\/json$/i -ViewJSON.matches = msg => isJSON.test(MessageUtils.getContentType(msg)) -ViewJSON.propTypes = { - content: React.PropTypes.string.isRequired, -} -function ViewJSON({ content }) { - let json = content - try { - json = JSON.stringify(JSON.parse(content), null, 2); - } catch (e) { - // @noop + componentWillMount(){ + this.setContentView(this.props) } - return <pre>{json}</pre> -} -ViewJSON = ContentLoader(ViewJSON) + componentWillReceiveProps(nextProps){ + this.setContentView(nextProps) + } + setContentView(props){ + try { + this.data = JSON.parse(props.content) + }catch(err) { + this.data= {lines: [], description: err.message} + } + + props.setContentViewDescription(props.contentView != this.data.description ? this.data.description : '') + + let isFullContentShown = this.data.lines.length < props.maxLines + if (isFullContentShown) props.setShowFullContent(true) + } + render() { + const {content, contentView, message, maxLines} = this.props + let lines = this.props.showFullContent ? this.data.lines : this.data.lines.slice(0, maxLines) + return <div> + <pre> + {lines.map((line, i) => + <div key={`line${i}`}> + {line.map((tuple, j) => + <span key={`tuple${j}`} className={tuple[0]}> + {tuple[1]} + </span> + )} + </div> + )} + </pre> + {ViewImage.matches(message) && + <ViewImage {...this.props} /> + } + </div> + } -ViewAuto.matches = () => false -ViewAuto.findView = msg => [ViewImage, ViewJSON, ViewRaw].find(v => v.matches(msg)) || ViewRaw -ViewAuto.propTypes = { - message: React.PropTypes.object.isRequired, - flow: React.PropTypes.object.isRequired, -} -function ViewAuto({ message, flow, readonly, onChange }) { - const View = ViewAuto.findView(message) - return <View message={message} flow={flow} readonly={readonly} onChange={onChange}/> } -export { ViewImage, ViewRaw, ViewAuto, ViewJSON } +ViewServer = connect( + state => ({ + showFullContent: state.ui.flow.showFullContent + }), + { + setContentViewDescription, + setShowFullContent + } +)(ContentLoader(ViewServer)) + +export { Edit, ViewServer, ViewImage } |