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

removed bootstrap.js and implemented tabs in react

This commit is contained in:
avim 2014-12-28 17:36:39 +02:00
parent f3da1f73fe
commit 54e6abc482
6 changed files with 53 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
fiddle.html
View File

@ -25,7 +25,6 @@
<div id="container">
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!--<script src="playground/libs/ace-builds-1.1.8/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>-->
<!--<script src="https://cdn.firebase.com/js/client/2.0.5/firebase.js"></script>-->
<!--<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>-->

1
index.html
View File

@ -148,7 +148,6 @@
<div id="fb-root"></div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="playground/libs/ace-builds-1.1.8/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="playground/dist/rt-main.browser.min.js"></script>
<!--<script data-main="playground/home-main.js" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.js"></script>-->

7
playground/CodeMirrorEditor.js
View File

@ -78,7 +78,8 @@ define(['react', 'lodash', 'jquery', './libs/codemirror-4.8/lib/codemirror',
render: function () {
var props = _.omit(this.props, ['ref', 'key', 'value', 'valueLink', 'onChange']);
props.id = this.props.id || this.state.editorId;
return React.DOM.div(props);
var value = this.props.valueLink ? this.props.valueLink() : this.props.value;
return React.DOM.textarea(props,value);
},
componentWillUpdate: function (nextProps/*, nextState*/) {
var value = nextProps.valueLink ? nextProps.valueLink() : nextProps.value;
@ -117,7 +118,7 @@ define(['react', 'lodash', 'jquery', './libs/codemirror-4.8/lib/codemirror',
options.lint = true;
}
this.editor = new CodeMirror(document.getElementById(this.props.id || this.state.editorId), options);
this.editor = CodeMirror.fromTextArea(this.getDOMNode(), options);
if (!this.props.readOnly) {
this.editor.on('change', function (/*e*/) {
@ -145,7 +146,7 @@ define(['react', 'lodash', 'jquery', './libs/codemirror-4.8/lib/codemirror',
}
},
componentWillUnmount: function () {
this.editor.destroy();
this.editor.toTextArea();
}
});

10
playground/playground.js
View File

@ -88,6 +88,13 @@ define(['react', 'lodash', './playground-fiddle.rt', './playground.rt'], functio
fiddle: false
};
},
getTabs: function () {
if (this.props.codeVisible) {
return [['templateHTML','Template'],['templateProps','Class'],['templateSource','Generated code']];
} else {
return [['templateHTML','Template'],['templateSource','Generated code']];
}
},
updateSample: function (state) {
this.templateSource = generateTemplateSource(state.templateHTML, this.refs.editorRT);
this.sampleFunc = generateTemplateFunction(this.templateSource);
@ -122,7 +129,8 @@ define(['react', 'lodash', './playground-fiddle.rt', './playground.rt'], functio
getInitialState: function () {
var currentState = {
templateHTML: this.props.templateHTML || templateHTML,
templateProps: this.props.templateProps || templateProps
templateProps: this.props.templateProps || templateProps,
currentTab: 'templateHTML'
};
this.updateSample(currentState);
return currentState;

20
playground/playground.rt
View File

@ -2,28 +2,32 @@
<!--suppress CheckEmptyScriptTag -->
<rt-require dependency="./CodeMirrorEditor" as="CodeEditor"/>
<div class="playground">
<div id="{this.props.id}-myTab" role="tabpanel" class="code-area {(this.props.direction === 'horizontal' && 'horizontal') ||'vertical'}">
<div id="{this.props.id}-myTab" class="code-area {(this.props.direction === 'horizontal' && 'horizontal') ||'vertical'}">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#{this.props.id}-template" aria-controls="template" role="tab" data-toggle="tab">Template</a></li>
<li rt-if="this.props.codeVisible" role="presentation"><a href="#{this.props.id}-classCode" aria-controls="classCode" role="tab" data-toggle="tab">Class</a></li>
<li role="presentation"><a href="#{this.props.id}-generatedCode" aria-controls="generatedCode" role="tab" data-toggle="tab">Generated code</a></li>
<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 class="tab-content">
<div role="tabpanel" class="tab-pane active" id="{this.props.id}-template">
<div>
<div rt-if="this.state.currentTab === 'templateHTML'" 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.props.codeVisible" role="tabpanel" class="tab-pane" id="{this.props.id}-classCode">
<div rt-if="this.state.currentTab === 'templateProps'" 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 role="tabpanel" class="tab-pane" id="{this.props.id}-generatedCode">
<div rt-if="this.state.currentTab === 'templateSource'" class="tab-pane active">
<CodeEditor class="large-text-area"
value="{this.templateSource}"
mode="javascript"

72
playground/playground.rt.js
View File

@ -4,78 +4,62 @@ define([
'./CodeMirrorEditor'
], function (React, _, CodeEditor) {
'use strict';
function onChange1(evt) {
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 onChange2(evt) {
function onChange4(evt) {
this.setState({ 'templateProps': evt.target.value });
}
function onSubmit3(e) {
function onSubmit5(e) {
e.preventDefault();
}
return function () {
return React.createElement('div', { 'className': 'playground' }, React.createElement('div', {
'id': this.props.id + '-myTab',
'role': 'tabpanel',
'className': 'code-area ' + (this.props.direction === 'horizontal' && 'horizontal' || 'vertical')
} /* Nav tabs */, React.createElement('ul', {
'className': 'nav nav-tabs',
'role': 'tablist'
}, React.createElement('li', {
'role': 'presentation',
'className': 'active'
}, React.createElement('a', {
'href': '#' + this.props.id + '-template',
'aria-controls': 'template',
'role': 'tab',
'data-toggle': 'tab'
}, 'Template')), this.props.codeVisible ? React.createElement('li', { 'role': 'presentation' }, React.createElement('a', {
'href': '#' + this.props.id + '-classCode',
'aria-controls': 'classCode',
'role': 'tab',
'data-toggle': 'tab'
}, 'Class')) : null, React.createElement('li', { 'role': 'presentation' }, React.createElement('a', {
'href': '#' + this.props.id + '-generatedCode',
'aria-controls': 'generatedCode',
'role': 'tab',
'data-toggle': 'tab'
}, 'Generated code'))) /* Tab panes */, React.createElement('div', { 'className': 'tab-content' }, React.createElement('div', {
'role': 'tabpanel',
'className': 'tab-pane active',
'id': this.props.id + '-template'
}, React.createElement(CodeEditor, {
} /* 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': onChange1.bind(this)
})), this.props.codeVisible ? React.createElement('div', {
'role': 'tabpanel',
'className': 'tab-pane',
'id': this.props.id + '-classCode'
}, React.createElement(CodeEditor, {
'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': onChange2.bind(this)
})) : null, React.createElement('div', {
'role': 'tabpanel',
'className': 'tab-pane',
'id': this.props.id + '-generatedCode'
}, React.createElement(CodeEditor, {
'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
})))), React.createElement('div', {
})) : null)), React.createElement('div', {
'key': 'result-area',
'className': 'result-area ' + (this.props.direction === 'horizontal' && 'horizontal' || 'vertical')
}, React.createElement('span', { 'className': 'preview-title' }, '\xA0'), React.createElement('form', {
'className': 'sample-view',
'onSubmit': onSubmit3.bind(this)
'onSubmit': onSubmit5.bind(this)
}, React.createElement(this.sample, { 'key': 'sample' }))), React.createElement('br', { 'style': { clear: 'both' } }));
};
});