From e258d88a2bc2dcb97ab593457c06e7ddb68b1054 Mon Sep 17 00:00:00 2001 From: ido Date: Tue, 30 Dec 2014 11:35:24 +0200 Subject: [PATCH] fix update sample issue --- playground/CMLint.js | 7 ------ playground/playground-fiddle.rt | 11 +++------ playground/playground-fiddle.rt.js | 16 ++++++------ playground/playground.js | 39 ++++++++++++------------------ 4 files changed, 27 insertions(+), 46 deletions(-) diff --git a/playground/CMLint.js b/playground/CMLint.js index d9452b1..7754213 100644 --- a/playground/CMLint.js +++ b/playground/CMLint.js @@ -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; diff --git a/playground/playground-fiddle.rt b/playground/playground-fiddle.rt index 5d7abe0..b23a568 100644 --- a/playground/playground-fiddle.rt +++ b/playground/playground-fiddle.rt @@ -1,26 +1,22 @@ -
- + onChange="(e)=>this.setState({templateHTML:e.target.value})" />
- + onChange="(e)=>this.setState({templateProps:e.target.value})" />
-
- -
+
diff --git a/playground/playground-fiddle.rt.js b/playground/playground-fiddle.rt.js index 6d6d864..3412864 100644 --- a/playground/playground-fiddle.rt.js +++ b/playground/playground-fiddle.rt.js @@ -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' - } /*

Preview:

*/, React.createElement('form', { + }, React.createElement('form', { 'className': 'result-area-form', 'ref': 'mount', 'onSubmit': onSubmit3.bind(this) diff --git a/playground/playground.js b/playground/playground.js index b0f577a..beceb5c 100644 --- a/playground/playground.js +++ b/playground/playground.js @@ -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'); } });