Sidebar is nearing completion

shared/naturalCrit/jsonFileEditor/jsonFileEditor.jsx

@@ -0,0 +1,103 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+
+var JSONEditor = require('jsoneditor');
+
+//var editor = new JSONEditor(container);
+
+var json = {
+	test : 6,
+	arr : [true, 1,2,3,4],
+	yo : {
+		yeah : true
+	}
+}
+
+
+var JsonFileEditor = React.createClass({
+	getDefaultProps: function() {
+		return {
+			name : "yo",
+
+			json : json,
+
+			onJSONChange : function(){}
+		};
+	},
+
+	getInitialState: function() {
+		return {
+			showEditor: false
+		};
+	},
+
+	componentWillReceiveProps: function(nextProps) {
+		//this.editor.set(nextProps.json);
+	},
+
+	componentDidMount: function() {
+		this.editor = new JSONEditor(this.refs.editor, {
+			change : this.handleJSONChange,
+			search : false
+		}, this.props.json)
+	},
+
+
+
+
+	handleJSONChange : function(){
+
+		this.props.onJSONChange(this.editor.get());
+
+		//try to store in local storage?
+
+	},
+
+	handleShowEditorClick : function(){
+		this.setState({
+			showEditor : !this.state.showEditor
+		})
+	},
+
+	handleDownload  : function(){
+
+	},
+	handleRemove  : function(){
+
+	},
+
+
+	renderEditor : function(){
+		return <div className='jsonEditor' ref='editor' />
+	},
+
+
+	render : function(){
+		var self = this;
+		return(
+			<div className={cx('jsonFileEditor', {'showEditor' : this.state.showEditor})}>
+
+				<span className='name'>{this.props.name}</span>
+
+
+				<div className='controls'>
+
+
+					<button className='showEditor' onClick={this.handleShowEditorClick}><i className='fa fa-edit' /></button>
+					<button className='downloadJSON' onClick={this.handleDownload}><i className='fa fa-download' /></button>
+					<div className='remove' onClick={this.handleRemove}><i className='fa fa-times' /></div>
+
+
+				</div>
+
+
+				{this.renderEditor()}
+
+			</div>
+		);
+	}
+});
+
+module.exports = JsonFileEditor;