67 lines
3.0 KiB
JavaScript
67 lines
3.0 KiB
JavaScript
define([
|
|
'react/addons',
|
|
'lodash',
|
|
'./CodeMirrorEditor'
|
|
], function (React, _, CodeEditor) {
|
|
'use strict';
|
|
function onClick1(tab, tabIndex, evt) {
|
|
evt.preventDefault();
|
|
this.setState({ 'currentTab': tab[0] });
|
|
}
|
|
function repeatTab2(tab, tabIndex) {
|
|
return React.createElement('li', {
|
|
'role': 'presentation',
|
|
'className': React.addons.classSet({ active: this.state.currentTab === tab[0] }),
|
|
'onClick': onClick1.bind(this, tab, tabIndex)
|
|
}, React.createElement('a', { 'aria-controls': tab[1] }, tab[1]));
|
|
}
|
|
function onChange3(evt) {
|
|
this.setState({ templateHTML: evt.target.value });
|
|
}
|
|
function onChange4(evt) {
|
|
this.setState({ templateProps: evt.target.value });
|
|
}
|
|
function onSubmit5(e) {
|
|
e.preventDefault();
|
|
}
|
|
return function () {
|
|
return React.createElement('div', { 'className': 'playground' }, React.createElement('div', {
|
|
'id': this.props.id + '-myTab',
|
|
'className': 'code-area ' + this.getLayoutClass()
|
|
} /* Nav tabs */, React.createElement.apply(this, _.flatten([
|
|
'ul',
|
|
{
|
|
'className': 'nav nav-tabs',
|
|
'role': 'tablist'
|
|
},
|
|
_.map(this.getTabs(), repeatTab2.bind(this))
|
|
])) /* Tab panes */, React.createElement('div', {}, this.state.currentTab === 'templateHTML' ? React.createElement('div', { 'className': 'tab-pane active' }, React.createElement(CodeEditor, {
|
|
'ref': 'editorRT',
|
|
'className': 'large-text-area',
|
|
'style': { border: this.validHTML ? '' : '2px solid red' },
|
|
'value': this.state.templateHTML,
|
|
'mode': 'html',
|
|
'onChange': onChange3.bind(this)
|
|
})) : null, this.state.currentTab === 'templateProps' ? React.createElement('div', { 'className': 'tab-pane active' }, React.createElement(CodeEditor, {
|
|
'ref': 'editorCode',
|
|
'className': 'large-text-area',
|
|
'style': { border: this.validProps ? '' : '2px solid red' },
|
|
'value': this.state.templateProps,
|
|
'mode': 'javascript',
|
|
'onChange': onChange4.bind(this)
|
|
})) : null, this.state.currentTab === 'templateSource' ? React.createElement('div', { 'className': 'tab-pane active' }, React.createElement(CodeEditor, {
|
|
'className': 'large-text-area',
|
|
'value': this.templateSource,
|
|
'mode': 'javascript',
|
|
'readOnly': true
|
|
})) : null)), React.createElement('div', {
|
|
'key': 'result-area',
|
|
'className': 'result-area ' + this.getLayoutClass()
|
|
}, React.createElement('span', { 'className': 'preview-title' }, '\xA0'), React.createElement('form', {
|
|
'ref': 'mount',
|
|
'className': 'sample-view',
|
|
'onSubmit': onSubmit5.bind(this)
|
|
} /* <this.sample key="sample"> */
|
|
/* </this.sample> */)), React.createElement('br', { 'style': { clear: 'both' } }));
|
|
};
|
|
}); |