bobwen-dev
/
react-templates
mirror of https://github.com/bobwen-dev/react-templates
1
0
Fork 0
Code Issues Releases Wiki Activity

fix update sample issue

This commit is contained in:
ido 2014-12-30 11:35:24 +02:00
parent 6bdd57cec2
commit e258d88a2b
4 changed files with 27 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
playground/CMLint.js
View File

@ -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;

11
playground/playground-fiddle.rt
View File

@ -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>

16
playground/playground-fiddle.rt.js
View File

@ -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)

39
playground/playground.js
View File

@ -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');
}
});