var Footer = require('./layoutFooter.react');
var Header = require('./layoutHeader.react');
var MainSection = require('./layoutMain.react');
var TodoStore = require('../stores/todoStore');
var TodoApp = React.createClass({
render: function() {
return (
<div>
<Header />
<MainSection
allTodos={this.props.allTodos}
areAllComplete={this.props.areAllComplete}
/>
<Footer allTodos={this.props.allTodos} />
</div>
);
}
});
module.exports = Marty.createContainer(TodoApp, {
listenTo: TodoStore,
fetch: {
allTodos() {
return TodoStore.getState()
},
areAllComplete() {
return TodoStore.areAllComplete()
}
}
});
)
}
, _onToggleComplete: function() {
this.app.todoActions.toggleComplete(this.props.todo)
}
, _onDoubleClick: function() {
this.setState({isEditing: true})
}
/**
* Event handler called within TodoTextInput.
* Defining this here allows TodoTextInput to be used in multiple places
* in different ways.
* @param {string} text
*/
, _onSave: function(text) {
this.app.todoActions.updateText(this.props.todo.id, text)
this.setState({isEditing: false})
}
, _onDestroyClick: function() {
this.app.todoActions.destroy(this.props.todo.id)
}
})
module.exports = Marty.createContainer(TodoItem)
var todos = [];
for (var key in allTodos) {
todos.push(<TodoItem key={key} todo={allTodos[key]} />);
}
return (
<section id="main">
<input
id="toggle-all"
type="checkbox"
onChange={this._onToggleCompleteAll}
checked={this.props.areAllComplete ? 'checked' : ''}
/>
<label htmlFor="toggle-all">Mark all as complete</label>
<ul id="todo-list">{todos}</ul>
</section>
);
},
/**
* Event handler to mark all TODOs as complete
*/
_onToggleCompleteAll: function() {
this.app.todoActions.toggleCompleteAll();
}
});
module.exports = Marty.createContainer(MainSection);
<label htmlFor="password">Password</label>
<input type="password"
valueLink={this.linkState('password')}
className="form-control"
id="password"
ref="password"
placeholder="Password" />
</div>
<button type="submit"
className="btn btn-default"
onClick={this.login}>
Submit
</button>
</div>
<Link to="home">Home</Link>
</div>
)
}
})
module.exports = Marty.createContainer(Login, {
listenTo: 'loginStore'
, fetch: {
loggedIn() {
return this.app.loginStore.getLoggedIn() ? 'true' : 'false'
}
}
})
</Grid>
</div>);
}
}
Streams.propTypes = {
client: React.PropTypes.object.isRequired
};
export default Marty.createContainer(Streams, {
listenTo: [ StreamStore ],
fetch: {
stream_game() {
return StreamStore.for(this).getStreamGame();
},
streams() {
return StreamStore.for(this).getStreams();
}
},
pending: function () {
return <div className='loading'>Loading...</div>;
},
failed: function(errors) {
return <div className='error'>Failed to load streams. {errors}</div>;
}
});
</div>
</div>;
} else {
return <div></div>;
}
}
backClick(event) {
if (event.target === this.refs.background.getDOMNode()) {
this.closeModal();
}
}
closeModal() {
this.app.modalStore.closeModal();
}
makeContent() {
let [type, args] = this.props.modal;
let component = this.typeComponents[type];
return React.createElement(component, {args: args, close: this.closeModal.bind(this)});
}
}
let ModalRenderComponentContainer = Marty.createContainer(ModalRenderComponent, {
listenTo: 'modalStore',
fetch: {
modal() {
return this.app.modalStore.getModal();
}
}
});
export default ModalRenderComponentContainer;
}
}
componentDidUpdate(prevProps) {
var name = decodeURIComponent(this.props.game_name).trim();
var prevName = decodeURIComponent(prevProps.game_name).trim();
if (name !== prevName) {
clientActionCreators.for(this).selectGame(name);
}
}
}
export default Marty.createContainer(Contents, {
listenTo: [ ClientStore ],
fetch: {
client() {
return ClientStore.for(this).getClient();
}
},
pending: function () {
return <div className='loading'>Loading...</div>;
},
failed: function(errors) {
return <div className='error'>Failed to load client. {errors}</div>;
}
});
let React = require('react');
let Radium = require('Radium');
let Marty = require('marty');
let CodeActionCreators = require('../actions/codeActionCreators');
let styles = {
cursor: 'pointer',
':hover': {
backgroundColor: '#eee8d5'
}
}
class Clickable extends React.Component {
handleClick(){
let lineNumber = this.props.lineNumber
this.app.codeActionCreators.clickLine(lineNumber);
}
render(){
return(
<div onClick={this.handleClick.bind(this)} style={[styles]}>
{this.props.children}
</div>
);
}
}
module.exports = Marty.createContainer(Radium.Enhancer(Clickable));
render() {
return (
<div>
<select ref="vizType" defaultValue={"histogram"}>
<option value="histogram">Histogram</option>
<option value="timeline">Timeline</option>
</select>
<button onClick={this.handleClick.bind(this)}>Add viz</button>
{
this.props.visualizations.entrySeq().map(viz =>
<VizContainer key={viz[0]} vizId={viz[0]}>
{VizFactory.createComponent(viz[1].type, viz[1].data)}
</VizContainer>
)
}
</div>
);
}
}
module.exports = Marty.createContainer(App, {
listenTo: VizMgrStore,
fetch: {
visualizations() {
return VizMgrStore.getVisualizations();
}
},
});
import {createContainer} from 'marty';
import React from 'react';
import isoMarty from './isoflux';
import EchoStore from './EchoStore';
class EchoComponent extends React.Component {
render() {
return (
<div>{this.props.echo}</div>
);
}
}
export default createContainer(EchoComponent, {
listenTo: EchoStore.name,
fetch: {
echo() {
return EchoStore.getEcho(this.props.value);
}
}
});
const Marty = require('marty');
const ProjectList = require('./ProjectList');
module.exports = Marty.createContainer(ProjectList, {
listenTo: [ 'TaskStore' ],
fetch: {
projects() {
return this.app.TaskStore.getProjects();
}
},
pending(results) {
return this.done(results);
}
});
<li className='room'>
<a href="javascript:void(0)"
onClick={_.partial(this.navigateToRoom, room.id)}>
{room.name}
</a>
</li>
);
})}
</ul>
</div>
);
},
navigateToRoom(roomId) {
NavigationActionCreators.for(this).navigateToRoom(roomId);
}
});
module.exports = Marty.createContainer(Home, {
listenTo: RoomsStore,
fetch: {
rooms() {
return RoomsStore.for(this).getAll();
}
},
pending() {
return <div className='pending'>Loading rooms...</div>;
},
failed(errors) {
return <div className='error'>Failed to load rooms. {errors}</div>;
}
});
import React from 'react';
import Marty from 'marty';
import UserStore from 'stores/UserStore';
class Dashboard extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<main className="Dashboard">
<h3>{ `Welcome, ${this.props.user.username}!` }</h3>
</main>
);
}
}
export default Marty.createContainer(Dashboard, {
listenTo: UserStore,
fetch: {
user() {
return UserStore.getUser();
}
}
});
onClick={this._onClearCompletedClick}>
Clear completed ({completed})
</button>
}
return (
<footer id="footer">
<span id="todo-count">
<strong>
{itemsLeft}
</strong>
{itemsLeftPhrase}
</span>
{clearCompletedButton}
</footer>
)
}
/**
* Event handler to delete all completed TODOs
*/
, _onClearCompletedClick: function() {
this.app.todoActions.destroyCompleted()
}
})
module.exports = Marty.createContainer(Footer)
*/
render: function() {
return (
<header id="header">
<h1>todos</h1>
<TodoTextInput
id="new-todo"
placeholder="What needs to be done?"
onSave={this._onSave}
/>
</header>
)
}
/**
* Event handler called within TodoTextInput.
* Defining this here allows TodoTextInput to be used in multiple places
* in different ways.
* @param {string} text
*/
, _onSave: function(text) {
if (text.trim()){
this.app.todoActions.create(text)
}
}
})
module.exports = Marty.createContainer(Header)
<div className='message-text'>
{message.text}
</div>
</li>
);
})}
</ul>
<NewMessage roomId={room.id} />
</div>
</div>
);
}
});
module.exports = Marty.createContainer(Room, {
listenTo: [RoomsStore, MessagesStore],
fetch: {
room() {
return RoomsStore.for(this).getRoom(this.props.id)
},
messages() {
return MessagesStore.for(this).getMessagesForRoom(this.props.id)
}
},
pending() {
return <div className='loading'>Loading...</div>;
},
failed(errors) {
return <div className='error'>Failed to load room. {errors}</div>;
}
});
id.value = '';
name.value = '';
}
render() {
return (
<div>
<h1>Users</h1>
{this.props.users && this.props.users.map((user) => {
return <User key={user.id} {...user} />;
})}
<form onSubmit={this.onSubmit.bind(this)}>
<input type='text' placeholder='id' name='id' ref='id' />
<input type='text' placeholder='name' name='name' ref='name' />
<input type="submit" value="Submit" />
</form>
</div>
)
}
}
Users.contextTypes = Marty.contextTypes;
export default Marty.createContainer(Users, {
listenTo: 'userStore',
fetch: {
users() {
return this.context.app.userStore.getUsers()
}
}
});
</div>
</div>
);
if (!this.props.hasLoadedUser) {
UserActions.getUserData();
}
} else {
root = <LogIn/>;
this.context.router.transitionTo('root');
}
return(
<div className="RtTrainer container-fluid">
{ root }
</div>
);
}
}
RtTrainer.contextTypes = { router: React.PropTypes.func.isRequired };
export default Marty.createContainer(RtTrainer, {
listenTo: UserStore,
fetch: {
hasLoadedUser() {
return UserStore.hasLoadedUser();
}
}
});
{this.renderWaveform()}
</div>
);
}
}
AudioRenderer.propTypes = {
type: PropTypes.oneOf(['div','3d']),
height: PropTypes.number.isRequired,
width: PropTypes.number.isRequired
};
AudioRenderer.defaultProps = {
type: '3d'
};
export default Marty.createContainer(AudioRenderer, {
listenTo: 'SongStore',
fetch: {
audio() {
return this.app.SongStore.getAudio();
},
samples() {
return this.app.SongStore.getSamples(this.props.width);
}
},
pending() {
return <div>Rendering...</div>;
}
});
<ListGroup>
{_.map(this.props.presentations, (presentation) => {
return(
<ListGroupItemLink to="annotations" params={{presentationId: presentation.id, annotationId: 1}}>
{presentation.name}
</ListGroupItemLink>);
})}
</ListGroup>
<Button bsStyle="primary">Create</Button>
</div>
);
}
}
module.exports = Marty.createContainer(Presentation, {
listenTo: 'presentationStore',
fetch: {
presentations() {
return this.app.presentationStore.getPresentations();
},
failed(errors) {
return <div className="Presentation-Failed">{errors}</div>
},
pending() {
return this.done({
presentations: {}
});
}
}
});
let React = require('react');
let Marty = require('marty');
let Button = require('react-bootstrap/lib/Button');
let styles = {
position: 'fixed',
backgroundColor: '#002b36',
color: '#93a1a1',
width: 'inherit',
height: '100%'
}
class SideBar extends React.Component {
render() {
return (
<div style={styles}>
<h1>{this.props.text}</h1>
<Button onClick={this.handleClick.bind(this)}>Next</Button>
</div>
);
}
handleClick(event) {
let newID = parseInt(this.props.annotationId) + 1;
this.app.navigationActionCreators.navigateToAnnotation(this.props.annotationId, newID);
}
}
module.exports = Marty.createContainer(SideBar);