mirror of
https://github.com/bobwen-dev/react-templates
synced 2025-04-12 00:56:39 +02:00
fix update sample issue
This commit is contained in:
ido
parent
6bdd57cec2
commit
e258d88a2b
@ -1,12 +1,5 @@
|
||||
define(['react', 'lodash', 'jquery', './libs/codemirror-4.8/lib/codemirror'], function (React, _, $, CodeMirror) {
|
||||
'use strict';
|
||||
//var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
|
||||
// lineNumbers: true,
|
||||
// viewportMargin: Infinity,
|
||||
// gutters: ['CodeMirror-linenumbers', 'GUTTER_ID']
|
||||
//});
|
||||
//
|
||||
//editor.markText({line: 1, ch: 1}, {line: 1, ch: 10}, {className: 'editor-error'});
|
||||
|
||||
function annotationTooltip(ann) {
|
||||
var severity = ann.severity;
|
||||
|
||||
@ -1,26 +1,22 @@
|
||||
<!--suppress CheckEmptyScriptTag -->
|
||||
<rt-require dependency="./CodeMirrorEditor" as="CodeEditor"/>
|
||||
<!--suppress ALL -->
|
||||
<div class="playground">
|
||||
<div class="fiddle-row">
|
||||
<div class="code-area" id="area-rt">
|
||||
<!--style="border: {this.validHTML ? '' : '2px solid red'};"-->
|
||||
<CodeEditor ref="editorRT" id="editor-rt" class="large-text-area"
|
||||
value="{this.state.templateHTML}"
|
||||
mode="html"
|
||||
onChange="(evt) => this.setState({'templateHTML':evt.target.value})" />
|
||||
onChange="(e)=>this.setState({templateHTML:e.target.value})" />
|
||||
</div>
|
||||
<div class="code-area" id="area-code">
|
||||
<!--style="border: {this.validProps ? '' : '2px solid red'};"-->
|
||||
<CodeEditor ref="editorCode" id="editor-code" class="large-text-area"
|
||||
value="{this.state.templateProps}"
|
||||
mode="javascript"
|
||||
onChange="(evt) => this.setState({'templateProps':evt.target.value})" />
|
||||
onChange="(e)=>this.setState({templateProps:e.target.value})" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="fiddle-row">
|
||||
<div class="code-area" id="area-generated">
|
||||
<!--style="border:0px none black;"-->
|
||||
<CodeEditor id="editor-generated" class="large-text-area"
|
||||
ref="editorGenerated"
|
||||
value="{this.templateSource}"
|
||||
@ -30,8 +26,7 @@
|
||||
<div class="code-area" id="area-result">
|
||||
<!--<div id="result-container" class="result-area">-->
|
||||
<div id="result-area" key="result-area" class="sample-view">
|
||||
<!--<h2>Preview:</h2>-->
|
||||
<form class="result-area-form" ref="mount" onSubmit="(e) => e.preventDefault();">
|
||||
<form class="result-area-form" ref="mount" onSubmit="(e)=>e.preventDefault();">
|
||||
<!--<this.sample key="sample">-->
|
||||
<!--</this.sample>-->
|
||||
</form>
|
||||
|
||||
@ -4,11 +4,11 @@ define([
|
||||
'./CodeMirrorEditor'
|
||||
], function (React, _, CodeEditor) {
|
||||
'use strict';
|
||||
function onChange1(evt) {
|
||||
this.setState({ 'templateHTML': evt.target.value });
|
||||
function onChange1(e) {
|
||||
this.setState({ templateHTML: e.target.value });
|
||||
}
|
||||
function onChange2(evt) {
|
||||
this.setState({ 'templateProps': evt.target.value });
|
||||
function onChange2(e) {
|
||||
this.setState({ templateProps: e.target.value });
|
||||
}
|
||||
function onSubmit3(e) {
|
||||
e.preventDefault();
|
||||
@ -17,7 +17,7 @@ define([
|
||||
return React.createElement('div', { 'className': 'playground' }, React.createElement('div', { 'className': 'fiddle-row' }, React.createElement('div', {
|
||||
'className': 'code-area',
|
||||
'id': 'area-rt'
|
||||
} /* style="border: {this.validHTML ? '' : '2px solid red'};" */, React.createElement(CodeEditor, {
|
||||
}, React.createElement(CodeEditor, {
|
||||
'ref': 'editorRT',
|
||||
'id': 'editor-rt',
|
||||
'className': 'large-text-area',
|
||||
@ -27,7 +27,7 @@ define([
|
||||
})), React.createElement('div', {
|
||||
'className': 'code-area',
|
||||
'id': 'area-code'
|
||||
} /* style="border: {this.validProps ? '' : '2px solid red'};" */, React.createElement(CodeEditor, {
|
||||
}, React.createElement(CodeEditor, {
|
||||
'ref': 'editorCode',
|
||||
'id': 'editor-code',
|
||||
'className': 'large-text-area',
|
||||
@ -37,7 +37,7 @@ define([
|
||||
}))), React.createElement('div', { 'className': 'fiddle-row' }, React.createElement('div', {
|
||||
'className': 'code-area',
|
||||
'id': 'area-generated'
|
||||
} /* style="border:0px none black;" */, React.createElement(CodeEditor, {
|
||||
}, React.createElement(CodeEditor, {
|
||||
'id': 'editor-generated',
|
||||
'className': 'large-text-area',
|
||||
'ref': 'editorGenerated',
|
||||
@ -51,7 +51,7 @@ define([
|
||||
'id': 'result-area',
|
||||
'key': 'result-area',
|
||||
'className': 'sample-view'
|
||||
} /* <h2>Preview:</h2> */, React.createElement('form', {
|
||||
}, React.createElement('form', {
|
||||
'className': 'result-area-form',
|
||||
'ref': 'mount',
|
||||
'onSubmit': onSubmit3.bind(this)
|
||||
|
||||
@ -17,13 +17,10 @@ define(['react', 'jquery', 'lodash', './playground-fiddle.rt', './playground.rt'
|
||||
code = window.reactTemplates.convertTemplateToReact(html.trim().replace(/\r/g, ''), {modules: 'none', name: name});
|
||||
clearMessage(editor);
|
||||
} catch (e) {
|
||||
var msg;
|
||||
if (e.name === 'RTCodeError') {
|
||||
//index: -1 line: -1 message: "Document should have a root element" name: "RTCodeError"
|
||||
msg = e.message + ', line: ' + e.line;
|
||||
editor.annotate({line: e.line, message: e.message, index: e.index});
|
||||
} else {
|
||||
msg = e.message;
|
||||
editor.annotate({line: 1, message: e.message});
|
||||
}
|
||||
//showMessage(editor, msg);
|
||||
@ -34,23 +31,13 @@ define(['react', 'jquery', 'lodash', './playground-fiddle.rt', './playground.rt'
|
||||
|
||||
function showMessage(editor, msg) {
|
||||
if (editor && editor.showMessage) {
|
||||
//editor.showMessage(msg);
|
||||
editor.annotate({line: 1, message: msg});
|
||||
//calcSize();
|
||||
}
|
||||
}
|
||||
|
||||
function calcSize() {
|
||||
if (window.calcSize) {
|
||||
window.calcSize();
|
||||
}
|
||||
}
|
||||
|
||||
function clearMessage(editor) {
|
||||
if (editor && editor.clearMessage) {
|
||||
//editor.clearMessage();
|
||||
editor.clearAnnotations();
|
||||
//calcSize();
|
||||
}
|
||||
}
|
||||
|
||||
@ -165,13 +152,12 @@ define(['react', 'jquery', 'lodash', './playground-fiddle.rt', './playground.rt'
|
||||
}
|
||||
},
|
||||
updateSample: function (state) {
|
||||
var mountNode = this.refs.mount.getDOMNode();
|
||||
|
||||
//try {
|
||||
// React.unmountComponentAtNode(mountNode);
|
||||
//} catch (e) { }
|
||||
|
||||
this.generateCode();
|
||||
this.generateCode(state);
|
||||
//this.sampleFunc = generateTemplateFunction(this.templateSource);
|
||||
//this.validHTML = this.sampleFunc !== emptyFunc;
|
||||
this.validHTML = true;
|
||||
@ -185,14 +171,12 @@ define(['react', 'jquery', 'lodash', './playground-fiddle.rt', './playground.rt'
|
||||
// throw 'failed to eval';
|
||||
//}
|
||||
this.sample = eval('(function () {' + this.templateSource + '\n' + state.templateProps + '\n return React.createElement(' + state.name + ');})()');
|
||||
if (this.sample) {
|
||||
React.render(this.sample, mountNode);
|
||||
}
|
||||
|
||||
clearMessage(this.refs.editorCode);
|
||||
} catch (e) {
|
||||
//classBase = {};
|
||||
this.rtMessage = e.toString();
|
||||
this.validProps = false;
|
||||
this.sample = null;
|
||||
var editor = this.refs.editorCode;
|
||||
this.setTimeout(function() {
|
||||
showMessage(editor, e.message);
|
||||
@ -231,8 +215,17 @@ define(['react', 'jquery', 'lodash', './playground-fiddle.rt', './playground.rt'
|
||||
this.calcSize();
|
||||
}
|
||||
this.updateSample(this.state);
|
||||
this.renderSample();
|
||||
},
|
||||
renderSample: function () {
|
||||
var mountNode = this.refs.mount.getDOMNode();
|
||||
if (this.sample) {
|
||||
React.render(this.sample, mountNode);
|
||||
}
|
||||
},
|
||||
componentDidUpdate: function () {
|
||||
this.renderSample();
|
||||
},
|
||||
|
||||
componentWillUnmount: function(){
|
||||
window.removeEventListener('resize', this.calcSize);
|
||||
},
|
||||
@ -255,12 +248,12 @@ define(['react', 'jquery', 'lodash', './playground-fiddle.rt', './playground.rt'
|
||||
}
|
||||
},
|
||||
render: function () {
|
||||
this.generateCode();
|
||||
this.generateCode(this.state);
|
||||
var template = this.props.fiddle ? pgFiddleTemplate : playgroundTemplate;
|
||||
return template.apply(this);
|
||||
},
|
||||
generateCode: function () {
|
||||
this.templateSource = generateTemplateSource(this.state.templateHTML, this.refs.editorRT, window.reactTemplates.normalizeName(this.state.name) + 'RT');
|
||||
generateCode: function (state) {
|
||||
this.templateSource = generateTemplateSource(state.templateHTML, this.refs.editorRT, window.reactTemplates.normalizeName(state.name) + 'RT');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user