<div class="row">
<h2>Selection Filter</h2>
<div class="row">
<div class="col-md-4">Site:</div>
<div class="col-md-4"><select>...</select></div>
<div class="col-md-4">DCCID:</div>
<div class="col-md-4"><input type="text" /></div>
</div>
</div>
<SelectionFilter Title="Selection Filter">
<Filter Name="Site" Options=... />
<Filter Name="DCCID" />
<Filter Name="Subproject" Options=... />
<Filter Name="PSCID" />
</SelectionFilter>
FilterComponent = React.createClass({
render: function() {
return (
<div className="row">
<h2>Selection Filter</h2>
<div className="row">
<div className="col-md-4">Site:</div>
<div className="col-md-4"><select>...</select></div>
<div className="col-md-4">DCCID:</div>
<div className="col-md-4"><input type="text" /></div>
</div>
</div>
);
}
});
React.render("pageDiv", <FilterComponent />);
FilterComponent = React.createClass({displayName: 'FilterComponent',
render: function() {
return (
React.createElement("div", {className: "row"},
React.createElement("h2", null, "Selection Filter"),
React.createElement("div", {className: "row"},
React.createElement("div", {className: "col-md-4"}, "Site:"),
React.createElement("div", {className: "col-md-4"}, React.createElement("select", null, "...")),
React.createElement("div", {className: "col-md-4"}, "DCCID:"),
React.createElement("div", {className: "col-md-4"}, React.createElement("input", {type: "text"}))
)
)
);
}
});
React.render("pageDiv", React.createElement(FilterComponent, null));
FilterComponent = React.createClass({
render: function() {
return (
<div className="row">
<h2>{this.props.Title}</h2>
<div className="row">
<div className="col-md-4">Site:</div>
<div className="col-md-4"><select>...</select></div>
<div className="col-md-4">DCCID:</div>
<div className="col-md-4"><input type="text" /></div>
</div>
</div>
);
}
});
React.render("pageDiv", <FilterComponent Title="Selection Filter"/>);
FilterComponent = React.createClass({
render: function() {
return (
<div className="row">
<h2>{this.props.Title}</h2>
<div className="row">
<SiteFilterComponent />
<CandidateFilterComponent />
</div>
</div>
);
}
});
SiteFilterComponent = React.createClass({
render: function() {
return (
<div>
<div className="col-md-4">Site:</div>
<div className="col-md-4"><select>...</select></div>
</div>
);
}
});
CandidateFilterComponent = React.createClass({
render: function() {
return (
<div>
<div className="col-md-4">DCCID:</div>
<div className="col-md-4"><input type="text" /></div>
</div>
);
}
});
React.render("pageDiv", <FilterComponent Title="Selection Filter"/>);
SelectFilterComponent = React.createClass({
render: function() {
return (
<div>
<div className="col-md-4">{this.props.Label}:</div>
<div className="col-md-4"><select>{this.props.Options}</select></div>
</div>
);
}
});
SiteFilterComponent = React.createClass({
render: function() {
return <SelectFilterComponent Label="Site" Options="..."/>
}
});
FilterComponent = React.createClass({
render: function() {
return (
<div className="row">
<h2>{this.props.Title}</h2>
<div className="row">
{this.props.children}
</div>
</div>
);
}
});
/* <...stuff from previous slides here...> */
React.render("pageDiv",
<FilterComponent Title="Selection Filter">
<SelectFilterComponent Label="Site" Options=... />
<TextFilterComponent Label="DCCID" />
<SelectFilterComponent Label="Subproject" Options=... />
<TextFilterComponent Label="PSCID" />
</FilterComponent/>
);
FilterComponent = React.createClass({
getInitialState: function() {
return {
"collapsed" : false
};
},
toggleHeader: function() {
var oldState = this.state.collapsed;
this.setState({
"collapsed" : !oldState
});
if (this.props.onHeaderToggle) {
this.props.onHeaderToggle();
}
},
render: function() { /* render method goes here */ }
}
});
render: function() {
if (this.state.collapsed) {
return (<div className="row">
<h2>{this.props.Title}</h2>
</div>);
}
return (
<div className="row">
<h2>{this.props.Title}</h2>
<div className="row">
{this.props.children}
</div>
</div>
);
}
}
render: function() {
if(this.state.collapsed) {
return (<div className="row">
<h2 onClick={this.toggleHeader}>{this.props.Title}</h2>
</div>);
}
return (
<div className="row">
<h2 onClick={this.toggleHeader}>{this.props.Title}</h2>
<div className="row">
{this.props.children}
</div>
</div>
);
}
}
Composition over Inheritance
Separation of concerns, not technologies