Skip to content

Instantly share code, notes, and snippets.

@codyduval

codyduval/react-sample-ui.js

Created February 2, 2015 16:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save codyduval/82d197e5295617d2ae02 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save codyduval/82d197e5295617d2ae02 to your computer and use it in GitHub Desktop.
Download ZIP
This is a sample user interface built in React.js.
Raw
react-sample-ui.js
/** @jsx React.DOM */
var SessionsBox = React.createClass({
handleSelect: function (e) {
this.props.onSelect(e);
},
handleFilter: function(semesterName) {
var filteredSessions = _.filter(this.props.initialSessions, { 'semester': semesterName });
this.setState({
filteredSessions: filteredSessions,
selectedSemester: semesterName
});
},
componentDidMount: function() {
return { filteredSessions: this.handleFilter(this.state.selectedSemester) };
},
getInitialState: function () {
var defaultSemester = _.first(_.uniq(_.pluck(this.props.initialSessions, "semester")));
return {filteredSessions: [],
selectedSemester: defaultSemester
};
},
render: function () {
var names = _.uniq(_.pluck(this.props.initialSessions, "semester"));
var semesterButtons = names.map(function (name, index) {
return (
<SemesterButton name={name} key={index} onFilter={this.handleFilter} currentSelected={this.state.selectedSemester} />
);
}.bind(this));
return (
<div>
<ul className="nav nav-pills">
{semesterButtons}
</ul>
<table className="table">
<SessionHeader />
<SessionList sessions={this.state.filteredSessions} selectedSession={this.props.selectedSession} onSelect={this.handleSelect}/>
</table>
</div>
);
}
});
var SemesterButton = React.createClass({
handleFilter: function (e) {
this.props.onFilter(this.props.name);
},
render: function() {
var classString;
if(this.props.currentSelected === this.props.name) {
classString = 'active';
} else {
classString = '';
}
return (
<li className={classString}>
<a onClick={this.handleFilter}>{this.props.name}</a>
</li>
);
}
});
var SessionHeader = React.createClass({
render: function() {
return (
<thead>
<tr>
<td><h2>Name</h2></td>
<td><h2>Start Time</h2></td>
<td><h2>End Time</h2></td>
<td><h2>Days of Week</h2></td>
<td></td>
</tr>
</thead>
);
}
});
var SessionList = React.createClass({
handleSelect: function (e) {
this.props.onSelect(e);
},
render: function () {
var sessionNodes = this.props.sessions.map(function (session, index) {
return (
<Session name={session.name} start_time={session.start_time} end_time={session.end_time} days_of_week={session.days_of_week} key={index} onSelect={this.handleSelect} selectedSession={this.props.selectedSession} />
);
}.bind(this));
return (
<tbody className="session-list">
{sessionNodes}
</tbody>
);
}
});
var Session = React.createClass({
handleSelect: function (e) {
this.props.onSelect(this.props.name);
},
render: function () {
var classString;
if(this.props.selectedSession === this.props.name) {
classString = 'btn btn-inverse'
buttonText = 'Selected'
} else {
classString = 'btn btn-primary'
buttonText = 'Select'
}
return (
<tr>
<td>
<div className="session-name">
{this.props.name}
</div>
</td>
<td>
<div className="session-start-time">
{this.props.start_time}
</div>
</td>
<td>
<div className="session-end-time">
{this.props.end_time}
</div>
</td>
<td>
<div className="session-days-of-week">
{this.props.days_of_week}
</div>
</td>
<td>
<div className="session-select">
<button onClick={this.handleSelect} parentName={this.props.name} selectedSession={this.props.selectedSession} className={classString}>{buttonText}</button>
</div>
</td>
</tr>
);
}
});
var Registration = React.createClass({
handleSelect: function(sessionName) {
this.setState({ selectedSession: sessionName });
},
getInitialState: function () {
return { sessions: this.props.initialSessions,
user: this.props.user,
selectedSession: "",
kids: this.props.kids };
},
render: function () {
var kid;
if (this.props.kids.length > 1) {
kid = _.first(this.props.kids);
} else {
kid = _.first(this.props.kids);
}
var regBox;
if (this.state.selectedSession !== "") {
regBox = <RegistrationsBox user={this.state.user} selectedSession={this.state.selectedSession} kids={kid} />
}
return (
<div className="container">
<div className="col-md-8">
<SessionsBox initialSessions={this.state.sessions} selectedSession={this.state.selectedSession} onSelect={this.handleSelect} />
</div>
<div className="col-md-6 col-md-offset-2">
{regBox}
</div>
</div>
);
}
});
var RegistrationsBox = React.createClass({
render: function () {
return (
<div className="well">
<table className="table">
<RegistrationsList selectedSession={this.props.selectedSession} kids={this.props.kids} />
</table>
</div>
);
}
});
var RegistrationsList = React.createClass({
render: function () {
return (
<div>
<thead>
<tr>
<td><h2>Selected Session</h2></td>
<td><h2>Child</h2></td>
<td><h2>Price</h2></td>
<td></td>
</tr>
</thead>
<tbody className="registration-list">
<tr>
<td>
<div className="session-name">
{this.props.selectedSession}
</div>
</td>
<td>
<div className="session-child">
{this.props.kids.first_name}
</div>
</td>
<td>
<div className="session-price">
$45
</div>
</td>
<td>
<div className="session-submit">
<button onClick={this.handleSubmit} className={'btn btn-success'}>Check Out</button>
</div>
</td>
</tr>
</tbody>
</div>
);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment