mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2025-12-30 13:12:40 +00:00
Newlines
This commit is contained in:
Scott Tolksdorf
@@ -1,94 +1,94 @@
|
||||
var React = require('react');
|
||||
var _ = require('lodash');
|
||||
var cx = require('classnames');
|
||||
|
||||
var JSONEditor = require('jsoneditor');
|
||||
|
||||
|
||||
var downloadFile = function(filename, text) {
|
||||
var element = document.createElement('a');
|
||||
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
|
||||
element.setAttribute('download', filename);
|
||||
element.style.display = 'none';
|
||||
document.body.appendChild(element);
|
||||
element.click();
|
||||
document.body.removeChild(element);
|
||||
}
|
||||
|
||||
|
||||
var JsonFileEditor = React.createClass({
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
name : "test",
|
||||
json : {},
|
||||
onJSONChange : function(){}
|
||||
};
|
||||
},
|
||||
|
||||
getInitialState: function() {
|
||||
return {
|
||||
showEditor: false
|
||||
};
|
||||
},
|
||||
componentWillReceiveProps: function(nextProps) {
|
||||
if(JSON.stringify(nextProps.json) != JSON.stringify(this.editor.get())){
|
||||
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());
|
||||
},
|
||||
handleShowEditorClick : function(){
|
||||
this.setState({
|
||||
showEditor : !this.state.showEditor
|
||||
})
|
||||
},
|
||||
handleDownload : function(){
|
||||
downloadFile(this.props.name + '.json', JSON.stringify(this.props.json, null, '\t'));
|
||||
},
|
||||
handleUpload : function(e){
|
||||
var self = this;
|
||||
var reader = new FileReader();
|
||||
reader.onload = function() {
|
||||
self.props.onJSONChange(JSON.parse(reader.result));
|
||||
}
|
||||
reader.readAsText(e.target.files[0]);
|
||||
},
|
||||
handleUploadClick : function(){
|
||||
this.refs.uploader.click()
|
||||
},
|
||||
|
||||
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>
|
||||
<button className='uploadJSON' onClick={this.handleUploadClick}><i className='fa fa-cloud-upload' /></button>
|
||||
</div>
|
||||
|
||||
{this.renderEditor()}
|
||||
<input type="file" id="input" onChange={this.handleUpload} ref='uploader' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = JsonFileEditor;
|
||||
|
||||
var React = require('react');
|
||||
var _ = require('lodash');
|
||||
var cx = require('classnames');
|
||||
|
||||
var JSONEditor = require('jsoneditor');
|
||||
|
||||
|
||||
var downloadFile = function(filename, text) {
|
||||
var element = document.createElement('a');
|
||||
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
|
||||
element.setAttribute('download', filename);
|
||||
element.style.display = 'none';
|
||||
document.body.appendChild(element);
|
||||
element.click();
|
||||
document.body.removeChild(element);
|
||||
}
|
||||
|
||||
|
||||
var JsonFileEditor = React.createClass({
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
name : "test",
|
||||
json : {},
|
||||
onJSONChange : function(){}
|
||||
};
|
||||
},
|
||||
|
||||
getInitialState: function() {
|
||||
return {
|
||||
showEditor: false
|
||||
};
|
||||
},
|
||||
componentWillReceiveProps: function(nextProps) {
|
||||
if(JSON.stringify(nextProps.json) != JSON.stringify(this.editor.get())){
|
||||
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());
|
||||
},
|
||||
handleShowEditorClick : function(){
|
||||
this.setState({
|
||||
showEditor : !this.state.showEditor
|
||||
})
|
||||
},
|
||||
handleDownload : function(){
|
||||
downloadFile(this.props.name + '.json', JSON.stringify(this.props.json, null, '\t'));
|
||||
},
|
||||
handleUpload : function(e){
|
||||
var self = this;
|
||||
var reader = new FileReader();
|
||||
reader.onload = function() {
|
||||
self.props.onJSONChange(JSON.parse(reader.result));
|
||||
}
|
||||
reader.readAsText(e.target.files[0]);
|
||||
},
|
||||
handleUploadClick : function(){
|
||||
this.refs.uploader.click()
|
||||
},
|
||||
|
||||
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>
|
||||
<button className='uploadJSON' onClick={this.handleUploadClick}><i className='fa fa-cloud-upload' /></button>
|
||||
</div>
|
||||
|
||||
{this.renderEditor()}
|
||||
<input type="file" id="input" onChange={this.handleUpload} ref='uploader' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = JsonFileEditor;
|
||||
|
||||
//<div className='remove' onClick={this.handleRemove}><i className='fa fa-times' /></div>
|
||||
@@ -1,53 +1,53 @@
|
||||
|
||||
@import (less) "./jsoneditor.css";
|
||||
.jsonFileEditor{
|
||||
position : relative;
|
||||
padding : 10px;
|
||||
&.showEditor{
|
||||
.jsonEditor{
|
||||
display : initial;
|
||||
}
|
||||
button.showEditor{
|
||||
color: @red;
|
||||
}
|
||||
}
|
||||
.jsonEditor{
|
||||
position : absolute;
|
||||
display : none;
|
||||
top : 100%;
|
||||
left : 0px;
|
||||
z-index : 1000;
|
||||
min-width : 400px;
|
||||
background-color : white;
|
||||
}
|
||||
.name{
|
||||
display : inline-block;
|
||||
font-size : 0.8em;
|
||||
font-weight : 800;
|
||||
min-width: 100px;
|
||||
}
|
||||
.controls{
|
||||
display: inline-block;
|
||||
float: right;
|
||||
|
||||
button{
|
||||
outline: none;
|
||||
border : none;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
.animate(color);
|
||||
|
||||
&:hover{
|
||||
&.showEditor{ color : @green; }
|
||||
&.downloadJSON{ color : @blue; }
|
||||
&.uploadJSON{ color : @orange; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
input[type="file"]{
|
||||
display : none;
|
||||
}
|
||||
|
||||
@import (less) "./jsoneditor.css";
|
||||
.jsonFileEditor{
|
||||
position : relative;
|
||||
padding : 10px;
|
||||
&.showEditor{
|
||||
.jsonEditor{
|
||||
display : initial;
|
||||
}
|
||||
button.showEditor{
|
||||
color: @red;
|
||||
}
|
||||
}
|
||||
.jsonEditor{
|
||||
position : absolute;
|
||||
display : none;
|
||||
top : 100%;
|
||||
left : 0px;
|
||||
z-index : 1000;
|
||||
min-width : 400px;
|
||||
background-color : white;
|
||||
}
|
||||
.name{
|
||||
display : inline-block;
|
||||
font-size : 0.8em;
|
||||
font-weight : 800;
|
||||
min-width: 100px;
|
||||
}
|
||||
.controls{
|
||||
display: inline-block;
|
||||
float: right;
|
||||
|
||||
button{
|
||||
outline: none;
|
||||
border : none;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
.animate(color);
|
||||
|
||||
&:hover{
|
||||
&.showEditor{ color : @green; }
|
||||
&.downloadJSON{ color : @blue; }
|
||||
&.uploadJSON{ color : @orange; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
input[type="file"]{
|
||||
display : none;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user