react-templates/playground/playground.rt

46 lines
2.3 KiB
Plaintext

<!--<rt-require dependency="./aceEditor" as="CodeEditor"/>-->
<!--suppress CheckEmptyScriptTag -->
<rt-require dependency="./CodeMirrorEditor" as="CodeEditor"/>
<div class="playground">
<div id="{this.props.id}-myTab" class="code-area {this.getLayoutClass()}">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li rt-repeat="tab in this.getTabs()" role="presentation"
rt-class="{active:this.state.currentTab === tab[0]}"
onClick="(evt)=> evt.preventDefault();this.setState({'currentTab':tab[0]});">
<a aria-controls="{tab[1]}">{tab[1]}</a>
</li>
</ul>
<!-- Tab panes -->
<div>
<div rt-if="this.state.currentTab === 'templateHTML'" key="editorRT" class="tab-pane active" >
<CodeEditor ref="editorRT" class="large-text-area" style="border: {this.validHTML? '':'2px solid red'};"
value="{this.state.templateHTML}"
mode="html"
onChange="(evt) => this.setState({templateHTML:evt.target.value})" />
</div>
<div rt-if="this.state.currentTab === 'templateProps'" key="editorCode" class="tab-pane active">
<CodeEditor ref="editorCode" class="large-text-area" style="border: {this.validProps? '':'2px solid red'};"
value="{this.state.templateProps}"
mode="javascript"
onChange="(evt) => this.setState({templateProps:evt.target.value})" />
</div>
<div rt-if="this.state.currentTab === 'templateSource'" key="templateSource" class="tab-pane active">
<CodeEditor class="large-text-area"
value="{this.templateSource}"
mode="javascript"
readOnly="{true}" />
</div>
</div>
</div>
<div key="result-area" class="result-area {this.getLayoutClass()}">
<span class="preview-title">{'\u00A0'}</span>
<form ref="mount" class="sample-view" onSubmit="(e) => e.preventDefault();">
<!--<this.sample key="sample">-->
<!--</this.sample>-->
</form>
</div>
<br style="clear:both">
</div>