44 lines
2.3 KiB
Plaintext
44 lines
2.3 KiB
Plaintext
<!DOCTYPE rt CodeEditor="./aceEditor">
|
|
<div>
|
|
<div id="myTab" role="tabpanel" class="code-area {(this.props.direction === 'horizontal' && 'horizontal') ||'vertical'}">
|
|
<!-- Nav tabs -->
|
|
<ul class="nav nav-pills" role="tablist">
|
|
<li role="presentation" class="active"><a href="#template" aria-controls="template" role="tab" data-toggle="tab">Template</a></li>
|
|
<li role="presentation"><a href="#classCode" aria-controls="classCode" role="tab" data-toggle="tab">Class</a></li>
|
|
<li role="presentation"><a href="#generatedCode" aria-controls="generatedCode" role="tab" data-toggle="tab">Generated code</a></li>
|
|
</ul>
|
|
<!-- Tab panes -->
|
|
<div class="tab-content">
|
|
<div role="tabpanel" class="tab-pane active" id="template">
|
|
<CodeEditor class="large-text-area" style="border: {this.validHTML? '1px solid black':'2px solid red'};"
|
|
value="{this.state.templateHTML}"
|
|
mode="html"
|
|
onChange="(evt) => this.setState({'templateHTML':evt.target.value})"
|
|
/>
|
|
</div>
|
|
<div role="tabpanel" class="tab-pane" id="classCode">
|
|
<CodeEditor class="large-text-area" style="border: {this.validProps? '1px solid black':'2px solid red'};"
|
|
value="{this.state.templateProps}"
|
|
mode="javascript"
|
|
onChange="(evt) => this.setState({'templateProps':evt.target.value})"
|
|
/>
|
|
</div>
|
|
<div role="tabpanel" class="tab-pane" id="generatedCode">
|
|
<CodeEditor class="large-text-area" style="border:1px solid black;"
|
|
value="{this.templateSource}"
|
|
mode="javascript"
|
|
readOnly="{true}"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div key="result-area" class="result-area well {(this.props.direction === 'horizontal' && 'horizontal') ||'vertical'}" style="margin-top: 48px;">
|
|
<h2>Preview:</h2>
|
|
<form class="sample-view" onSubmit="(e) => e.preventDefault();">
|
|
<this.sample key="sample">
|
|
</this.sample>
|
|
</form>
|
|
</div>
|
|
<br style="clear:both">
|
|
</div>
|