renderIntoDocument: function(instance) {
var div = document.createElement('div');
// None of our tests actually require attaching the container to the
// DOM, and doing so creates a mess that we rely on test isolation to
// clean up, so we're going to stop honoring the name of this method
// (and probably rename it eventually) if no problems arise.
// document.documentElement.appendChild(div);
return React.renderComponent(instance, div);
},
it('should set style attribute when styles exist', function() {
var styles = {
backgroundColor: '#000',
display: 'none'
};
var div = <div style={styles} />;
var root = document.createElement('div');
div = React.renderComponent(div, root);
expect(/style=".*"/.test(root.innerHTML)).toBe(true);
});
it("should validate against invalid styles", function() {
React.renderComponent(<div></div>, container);
expect(function() {
React.renderComponent(<div style={1}></div>, container);
}).toThrow(
'Invariant Violation: The `style` prop expects a mapping from style ' +
'properties to values, not a string.'
);
});
it('should not set style attribute when no styles exist', function() {
var styles = {
backgroundColor: null,
display: null
};
var div = <div style={styles} />;
var root = document.createElement('div');
React.renderComponent(div, root);
expect(/style=".*"/.test(root.innerHTML)).toBe(false);
});
it("should validate against multiple children props", function() {
React.renderComponent(<div></div>, container);
expect(function() {
React.renderComponent(
<div children="" dangerouslySetInnerHTML={{__html: ''}}></div>,
container
);
}).toThrow(
'Invariant Violation: Can only set one of `children` or ' +
'`props.dangerouslySetInnerHTML`.'
);
});
window.onload = function () {
React.renderComponent(GameSetup({ onSubmit: initGame }), document.querySelector('#playerSetup'));
function initGame (players) {
document.querySelector('#setup').classList.add('hidden');
document.querySelector('#game').classList.remove('hidden');
if (players.length === 0) {
players = [];
players.push(new Player('First', 37, 39, '#f00'));
players.push(new Player('Second', 65, 68, '#00f'));
}
var game = new Game(players);
game.setup('.canvasContainer');
}
};
var rendered = new Promise( function( resolve, reject ){
var onRender = function(result) {
console.log('react result of rendering:', result);
if (false) {
return reject();
}
return resolve();
}
try{
var instance = React.renderComponent( viewProvider(scope), element, onRender );
} catch(e) {
console.error( 'Atlantjs: React doesn\'t rendered component', e );
}
});
// Functions
function render () {
if (!game) return; // Nothing to render yet
React.renderComponent(Game({
game: game,
refreshRate: refreshRate,
increaseSpeed: increaseSpeed,
decreaseSpeed: decreaseSpeed,
play: play,
pause: pause,
jump: jump,
playing: playing,
buffered: buffered,
map: url.query.map,
debug: debug,
quality: quality,
}), mount);
}
MapOverlayView.prototype.draw = function() {
var props = merge(this.props, {position: null, mapPane: null});
if (this.props.position) {
var point = this.getProjection()
.fromLatLngToDivPixel(this.props.position);
props.style = merge({
position: 'absolute',
left: point.x,
top: point.y
}, this.props.style);
}
React.renderComponent(
cloneWithProps(<div />, props),
this._containerElement
)
};
window.addEventListener('keyup', function(e){
if (e.keyCode === KEY.RIGHT){
time.add('h', 1);
} else if (e.keyCode === KEY.LEFT){
time.subtract('h', 1);
}
// Push new data to re-render component
React.renderComponent(
App({
time: time,
timezones: timezones
}),
targetNode
);
});
l10n.get('Menu').then(function(texts) {
var menu = views.Menu(merge({
texts: texts,
projects: projectStore.getAll(),
users: userStore.getAll(),
}, currentUser.super
? {
onAddProjectClicked: onAddProjectClicked,
onAddUserClicked: onAddUserClicked,
}
: null
))
var menuContainer = document.querySelector('.menu')
var deferred = Q.defer()
React.renderComponent(menu, menuContainer, deferred.resolve)
return deferred.promise
}).done()
define(function(require) {
var $ = require('jquery');
var React = require('react');
var DefaultRoute = require('react-router').DefaultRoute;
var Routes = require('react-router').Routes;
var Route = require('react-router').Route;
var WeekView = require('jsx!components/week');
React.renderComponent((
<Routes>
<Route path='/' handler={WeekView}>
<DefaultRoute handler={WeekView} />
</Route>
</Routes>
), $('#entry').get(0));
});
(function() {
var React = require('react');
var MainView = require('./views/mainView');
var Events = require('./models/events');
var Activities = require('./models/activities');
var events = new Events();
React.renderComponent(
MainView({
events: new Events(),
activities: new Activities()
}),
document.getElementById('container')
);
}());
function App() {
var data = {
nodes: [{
id: Utils.uuid(),
name: 'Lists TODO',
nodes: [{
id: Utils.uuid(),
name: '[x] Rendering of nested lists',
nodes: [{
id: Utils.uuid(),
name: '[x] Just to verify multiple levels of nesting',
nodes: []
}]
},{
id: Utils.uuid(),
name: '[x] Adding new items',
nodes: []
},{
id: Utils.uuid(),
name: '[ ] Saving the state',
nodes: []
},{
id: Utils.uuid(),
name: '[ ] Indenting/unindenting lists',
nodes: []
},{
id: Utils.uuid(),
name: '[ ] Editing current items',
nodes: []
}]
},{
id: Utils.uuid(),
name: 'Second top level list',
nodes: [{
id: Utils.uuid(),
name: 'Added just in case',
nodes: []
}]
}]
}
var store = new Store({initialData: data})
React.renderComponent(Root({store: store}), document.getElementById('app'));
}
(function () {
// MessageStore : Store <- emits events (onChange callbacks)
// AppDispatcher : Dispatcher <- main dispatcher, accepts
var React = require('react');
var AppDispatcher = require('./dispatcher/AppDispatcher');
var ChatClient = require('./ChatClient');
var MessageList = require('./components/MessageList.jsx');
React.renderComponent(
MessageList({ room: 'pockychat' }),
document.querySelector('#messageContainer')
);
})();
it("should execute custom event plugin listening behavior", function() {
var React = require('React');
var SimpleEventPlugin = require('SimpleEventPlugin');
SimpleEventPlugin.didPutListener = mocks.getMockFunction();
SimpleEventPlugin.willDeleteListener = mocks.getMockFunction();
var container = document.createElement('div');
React.renderComponent(
<div onClick={() => true} />,
container
);
expect(SimpleEventPlugin.didPutListener.mock.calls.length).toBe(1);
React.unmountComponentAtNode(container);
expect(SimpleEventPlugin.willDeleteListener.mock.calls.length).toBe(1);
});
render: function (nextLayout) {
//
// Wrapper around React.RenderComponent.
// > Handles unmountComponent for situations where we're rendering
// the same component, but with different data (for example different teams)
// on contentMain. In these situations, re-rendering the component is not the
// most effective approach, since the whole data structure will change.
//
// Usage:
// dispatcher.render();
//
var settings;
var layout = nextLayout ? nextLayout : this.layout;
if ((window.innerWidth < 800 && layout === 'auto') || layout === 'compact') {
settings = {
'layout': SmallLayout,
'props': this.nextSmallProps
};
} else if ((window.innerWidth > 1200 && layout === 'auto') || layout === 'full') {
settings = {
'layout': LargeLayout,
'props': this.nextLargeProps
};
} else {
settings = {
'layout': MediumLayout,
'props': this.nextMediumProps
};
}
if (!this.app || (nextLayout !== undefined && this.layout !== nextLayout)) {
this.app = React.renderComponent(
settings.layout(settings.props),
document.getElementById('main')
);
} else {
this.app.setProps(settings.props);
}
this.layout = layout;
}
return function bootstrap(node) {
var dataBridge = new DataBridge(mediator);
dataBridge.listen();
start();
React.renderComponent(cmApp, node);
mediator.subscribe('dataError', function (e) {
console.error('Data error:', e);
try {
window.alert('Data Error: ' + JSON.stringify(e));
} catch (e) {
window.alert('Unrecoverable data error.');
}
}, {
// Let this be very late in the chain so data error can be caught
// upstream.
priority: 100
});
};
define(function(require) {
//var config = "";
$.ajax({
url : '/getConfig',
dataType : 'text',
async: false,
}).done(function(result){
config = result;
});
var jQuery = require('jquery');
var React = require('react');
var dashboard;
if (config == "silktest")
dashboard = require('dashboardSilkTest');
else if (config == "performer")
dashboard = require('dashboardPerformer');
React.renderComponent(dashboard(), document.getElementById('content'));
});
function run() {
var appConstructor = require('./core/app');
var app = appConstructor({
rootDir: './'
});
var Root = app.component('Root');
React.renderComponent(Root(), document.body);
function go() {
var url = document.location.pathname;
console.log('I see url', url);
app.router.go(url);
}
window.onpopstate = go;
go();
}
TodoApp.prototype.refresh = function () {
// rerender DOM
React.renderComponent(
TodoAppView ({
key: 'root',
app: this,
UIState: this.path
}),
document.getElementById('todoapp')
);
// recover focus
var item = this.getItem();
var edit = document.getElementById(item._id);
if (edit) {
edit.focus();
// TODO scroll into view
}
// set URI
var locationPath = this.buildLocationPath();
window.history.replaceState({},"",window.location.origin + locationPath);
};
.end(function(res) {
var users = {};
var posts = res.body.map(function(item) {
if(item.doc.type === 'post') return item.doc;
}).filter(function(x) { return x != null; });
res.body.forEach(function(item) {
if(item.doc.type === 'user') users[item.doc._id] = item.doc;
});
var kommentar = Kommentar({
posts: posts,
users: users,
thread: thread,
currentUser: auth.user,
auth: authHeader
});
React.renderComponent(kommentar, el);
});
var createComponent = function(rootContainer, global, name, type) {
var component, className;
var klass = React.createClass(extend({
displayName: name,
render: function() {
return React.DOM.div({});
}
}, type));
component = {
name: name,
type: klass
};
// Exports "Hello" to global.helloComponent
component.globalName = [
component.name,
'component'
].join('_').underscore().camelize(true);
// CSS class for the container that houses a component named "Hello" is
// "hello-fixture"
className = [
component.name,
'fixture'
].join('_').underscore().replace(/_/g, '-');
component.container = $('<div />')
.addClass(className)
.appendTo(rootContainer)[0];
component.instance =
React.renderComponent(component.type(), component.container);
global[component.globalName] = component.instance;
components.push(component);
return component.instance;
};
var Page = function (component, dataPage, opts) {
var opts = _.extend({}, opts || {
onClose: function () {}
});
component.props.page = this;
var e = document.createElement('div');
this.e = e;
this.c = component;
if (!opts.navbar)
$(e).addClass('pContainer');
$(e).addClass((opts && opts.class) || '');
$(e).addClass('invisible').hide().appendTo('body');
if (dataPage)
e.dataset.page = dataPage;
var oldTitle = document.title;
if (opts.title) {
document.title = opts.title;
}
$('html').addClass(opts.crop?'crop':'place-crop');
React.renderComponent(component, e, function () {
$(e).show().removeClass('invisible');
});
this.destroy = function (navigate) {
$(e).addClass('invisible');
React.unmountComponentAtNode(e);
$(e).remove();
document.title = oldTitle;
$('html').removeClass(opts.crop?'crop':'place-crop');
if (opts.onClose) {
opts.onClose();
opts.onClose = undefined; // Prevent calling twice
}
};
};
it("should clean up listeners", function() {
var React = require('React');
var ReactEventEmitter = require('ReactEventEmitter');
var container = document.createElement('div');
document.documentElement.appendChild(container);
var callback = function() {};
var instance = <div onClick={callback} />;
React.renderComponent(instance, container);
var rootNode = instance.getDOMNode();
var rootNodeID = rootNode.id;
expect(
ReactEventEmitter.getListener(rootNodeID, 'onClick')
).toBe(callback);
React.unmountAndReleaseReactRootNode(container);
expect(
ReactEventEmitter.getListener(rootNodeID, 'onClick')
).toBe(undefined);
});
it('view should record correct events when accessing collection contents', function () {
HelloCollectionView = View.extend({
componentDidUpdate: function () {
console.log("Here");
},
render: function () {
return (
<div>
{this.props.collection.map(function (item) {
return item.get('content');
})}
</div>
);
}
});
var collection = new Collection({}, {id: 1, content: 'content'});
var view = new HelloCollectionView({collection: collection});
React.renderComponent(
view,
document.createElement('div')
);
});
res.renderComponent = function (Component, data) {
data = _.extend({}, data, res.locals);
if (typeof window !== 'undefined') {
if(params.exportReact){//react dev tools support
window.React = React;
}
document.title = data.title ? data.title : '';
React.renderComponent(Component(data), document.getElementById(params.rootElId));
} else {
var html = React.renderComponentToString(Component(data));
res.render(params.layoutName, {
data: data,
component: html
});
}
firstRender = false;
};
var AppInit = function(categoriesUrl, postsUrl, postsOptions) {
options = postsOptions?$.extend(defaultOptions, postsOptions):defaultOptions;
PBDataLoader.loadData(postsUrl, options, true)
React.initializeTouchEvents(true);
$.getJSON(categoriesUrl, function(data) {
$('#treeview').treeview({data: data, levels: 10, enableLinks: false, nodeIcon: ""}).on('nodeSelected', function(event, node) {
var category = node.id?node.slug.concat('_',node.id):node.id;
PBViewActions.showCategory(category, node.text);
});
}).fail(function(){
React.renderComponent(
Message({type: 'error', message: Messages.AJAX_FAIL}),
document.getElementById('treeview'));
});
React.renderComponent(
PostsList(),
document.getElementById('posts_list')
);
};
db.open(function (err) {
if (err) {
return console.error(err);
}
var GistAppView = require('./components/gist_app_view');
var GithubStore = require('./stores/github_store');
var GistStore = require('./stores/gist_store');
var GistActions = require('./actions/gist_actions');
if (localStorage.githubToken) {
GistActions.githubAuthenticated(localStorage.githubToken);
}
// OAuth
OAuth.initialize('rRW8z4osjyMGc2rtUmJJm0U1qso');
React.renderComponent(
<GistAppView
githubStore={GithubStore}
gistStore={GistStore}
gistActions={GistActions} />,
document.body);
});
var render = function (transition, videos, error) {
var params = {
width: window.innerWidth,
height: window.innerHeight,
transition: transition,
videos: videos,
duration: 2500,
loop: !!url.query.loop,
autoplay: !!url.query.autoplay
};
var comp;
if (error) {
params.error = error.message || error;
comp = ErrorView(params);
}
else if (!videos) {
comp = Loading(params);
}
else {
comp = VideoLinearPlayer(params);
}
return React.renderComponent(comp, document.body);
};