diff options
Diffstat (limited to 'web/src/js/components/ContentView')
4 files changed, 53 insertions, 87 deletions
diff --git a/web/src/js/components/ContentView/CodeEditor.jsx b/web/src/js/components/ContentView/CodeEditor.jsx index d0430e6f..8afc128f 100644 --- a/web/src/js/components/ContentView/CodeEditor.jsx +++ b/web/src/js/components/ContentView/CodeEditor.jsx @@ -1,5 +1,4 @@ -import React, { Component, PropTypes } from 'react' -import { render } from 'react-dom'; +import React, {PropTypes} from 'react' import Codemirror from 'react-codemirror'; diff --git a/web/src/js/components/ContentView/ContentViews.jsx b/web/src/js/components/ContentView/ContentViews.jsx index cd593023..32a07564 100644 --- a/web/src/js/components/ContentView/ContentViews.jsx +++ b/web/src/js/components/ContentView/ContentViews.jsx @@ -30,6 +30,12 @@ function Edit({ content, onChange }) { Edit = ContentLoader(Edit) class ViewServer extends Component { + static propTypes = { + showFullContent: PropTypes.bool.isRequired, + maxLines: PropTypes.number.isRequired, + setContentViewDescription : PropTypes.func.isRequired, + setContent: PropTypes.func.isRequired + } componentWillMount(){ this.setContentView(this.props) @@ -40,6 +46,7 @@ class ViewServer extends Component { this.setContentView(nextProps) } } + setContentView(props){ try { this.data = JSON.parse(props.content) @@ -50,25 +57,31 @@ class ViewServer extends Component { props.setContentViewDescription(props.contentView != this.data.description ? this.data.description : '') props.setContent(this.data.lines) } + render() { const {content, contentView, message, maxLines} = this.props let lines = this.props.showFullContent ? this.data.lines : this.data.lines.slice(0, maxLines) - return <div> + 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> - )} + {line.map((element, j) => { + let [style, text] = element + return ( + <span key={`tuple${j}`} className={style}> + {text} + </span> + ) + })} </div> )} </pre> - {ViewImage.matches(message) && - <ViewImage {...this.props} /> - } - </div> + {ViewImage.matches(message) && + <ViewImage {...this.props} /> + } + </div> + ) } } diff --git a/web/src/js/components/ContentView/UploadContentButton.jsx b/web/src/js/components/ContentView/UploadContentButton.jsx index 0652b584..de349af4 100644 --- a/web/src/js/components/ContentView/UploadContentButton.jsx +++ b/web/src/js/components/ContentView/UploadContentButton.jsx @@ -1,28 +1,18 @@ import { PropTypes } from 'react' +import FileChooser from '../common/FileChooser' UploadContentButton.propTypes = { uploadContent: PropTypes.func.isRequired, } export default function UploadContentButton({ uploadContent }) { - - let fileInput; - + return ( - <a className="btn btn-default btn-xs" - onClick={() => fileInput.click()} - title="Upload a file to replace the content."> - <i className="fa fa-upload"/> - <input - ref={ref => fileInput = ref} - className="hidden" - type="file" - onChange={e => { - if (e.target.files.length > 0) uploadContent(e.target.files[0]) - }} - /> - </a> - + <FileChooser + icon="fa-upload" + title="Upload a file to replace the content." + onOpenFile={uploadContent} + className="btn btn-default btn-xs"/> ) } diff --git a/web/src/js/components/ContentView/ViewSelector.jsx b/web/src/js/components/ContentView/ViewSelector.jsx index 59ec4276..ab433ea3 100644 --- a/web/src/js/components/ContentView/ViewSelector.jsx +++ b/web/src/js/components/ContentView/ViewSelector.jsx @@ -1,72 +1,36 @@ import React, { PropTypes, Component } from 'react' -import classnames from 'classnames' import { connect } from 'react-redux' import * as ContentViews from './ContentViews' -import { setContentView } from "../../ducks/ui/flow"; - -function ViewItem({ name, setContentView, children }) { - return ( - <li> - <a href="#" onClick={() => setContentView(name)}> - {children} - </a> - </li> - ) -} +import { setContentView } from '../../ducks/ui/flow'; +import Dropdown from '../common/Dropdown' -/*ViewSelector.propTypes = { +ViewSelector.propTypes = { contentViews: PropTypes.array.isRequired, activeView: PropTypes.string.isRequired, isEdit: PropTypes.bool.isRequired, - isContentViewSelectorOpen: PropTypes.bool.isRequired, - setContentViewSelectorOpen: PropTypes.func.isRequired -}*/ - - -class ViewSelector extends Component { - constructor(props, context) { - super(props, context) - this.close = this.close.bind(this) - this.state = {open: false} - } - close() { - this.setState({open: false}) - document.removeEventListener('click', this.close) - } - - onDropdown(e){ - e.preventDefault() - this.setState({open: !this.state.open}) - document.addEventListener('click', this.close) - } + setContentView: PropTypes.func.isRequired +} - render() { - const {contentViews, activeView, isEdit, setContentView} = this.props - let edit = ContentViews.Edit.displayName +function ViewSelector ({contentViews, activeView, isEdit, setContentView}){ + let edit = ContentViews.Edit.displayName + let inner = <span> <b>View:</b> {activeView}<span className="caret"></span> </span> - return ( - <div className={classnames('dropup pull-left', { open: this.state.open })}> - <a className="btn btn-default btn-xs" - onClick={ e => this.onDropdown(e) } - href="#"> - <b>View:</b> {activeView}<span className="caret"></span> + return ( + <Dropdown dropup className="pull-left" btnClass="btn btn-default btn-xs" text={inner}> + {contentViews.map(name => + <a href="#" key={name} onClick={e => {e.preventDefault(); setContentView(name)}}> + {name.toLowerCase().replace('_', ' ')} </a> - <ul className="dropdown-menu" role="menu"> - {contentViews.map(name => - <ViewItem key={name} setContentView={setContentView} name={name}> - {name.toLowerCase().replace('_', ' ')} - </ViewItem> - )} - {isEdit && - <ViewItem key={edit} setContentView={setContentView} name={edit}> - {edit.toLowerCase()} - </ViewItem> - } - </ul> - </div> - ) - } + ) + } + {isEdit && + <a href="#" onClick={e => {e.preventDefault(); setContentView(edit)}}> + {edit.toLowerCase()} + </a> + } + </Dropdown> + ) } export default connect ( |