change way to edit

1 files changed, 42 insertions, 0 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>
+
+        )
+    }
+}