render: function() {
var classes = {
'bs-example': true
};
var toggleClasses = {
'code-toggle': true
};
var editor;
if (this.props.exampleClassName){
classes[this.props.exampleClassName] = true;
}
if (this.state.mode !== this.MODES.NONE) {
editor = (
<CodeMirrorEditor
key="jsx"
onChange={this.handleCodeChange}
className="highlight"
codeText={this.state.code}/>
);
toggleClasses.open = true;
}
return (
<div className="playground">
<div className={classSet(classes)}>
<div ref="mount" />
</div>
{editor}
<a className={classSet(toggleClasses)} onClick={this.handleCodeModeToggle} href="#">{this.state.mode === this.MODES.NONE ? 'show code' : 'hide code'}</a>
</div>
);
},
render: function () {
var groupClasses = mixin({
'form-group': true,
'has-error': this.state.hasError
}, opts.groupClasses);
var input = (
React.DOM.select({
ref: "input",
className: cx(inputClasses),
disabled: opts.disabled,
readOnly: opts.readOnly,
defaultValue: defaultValue},
options
)
);
if (opts.breakpoints) {
input = (
React.DOM.div({className: opts.breakpoints.toInputClassName()},
input
)
);
}
return (
React.DOM.div({className: cx(groupClasses)},
label,
input,
help
)
);
}
render: function() {
var todo = this.props.todo
, note = []
, status
;
if (this.props.isExpanded) {
[].push.apply(note, [
<input key="0" type="text"
className="note noteTitle"
value={this.state.title || todo.title}
onChange={this._onChange} />,
<textarea key="1"
className="note"
placeholder="Enter more detail here..."
value={this.state.body || todo.body}
onChange={this._onChange} />,
<div key="2" className={cx({
'noteOptions': true,
'isDirty': this.state.title || this.state.body })}>
<div className="btn blue" onClick={this._onSave}><i className="icon-checkmark"></i> Save</div>
<div className="btn red" onClick={this._onDelete}><i className="icon-trash"></i> Delete</div>
<div className="btn grey" onClick={this._onReset}>Cancel</div>
</div>
]);
}
else {
note.push(todo.title);
}
if(todo.saving)
status = 'Saving...';
var checkId = 'todocheck-'+todo._id;
return (
<li
className={cx({
'done': todo.done,
'isExpanded': this.props.isExpanded })}
key={todo._id}>
<div className={cx({
'todoBody': true,
'noteExpanded': this.props.isExpanded,
'noteCollapsed':!this.props.isExpanded })}
id={'todo-'+(todo._id||todo.time)}
onClick={this._onClick}>
{ note }
</div>
<div className="checkbox">
<input type="checkbox" value="None" id={checkId} name={checkId} checked={todo.done} onChange={this._onToggleComplete} disabled={todo.saving} />
<label htmlFor={checkId}></label>
</div>
{ status }
</li>
);
},
render: function() {
var classes = {
'bs-example': true
};
var toggleClasses = {
code: {
'code-toggle': true
},
output: {
'code-toggle': true
}
};
var drawer;
if (this.props.exampleClassName){
classes[this.props.exampleClassName] = true;
}
if (this.state.mode === this.MODES.JSX) {
drawer = (
<CodeMirrorEditor
key="jsx"
onChange={this.handleCodeChange}
className="highlight"
code={this.state.code}/>
);
toggleClasses.code.open = true;
} else if (this.state.mode === this.MODES.OUTPUT) {
drawer = (
<pre className="highlight">{JSON.stringify(this.state.output, null, 2)}</pre>
);
toggleClasses.output.open = true;
}
if (this.state.mode !== this.MODES.NONE) {
Object.keys(toggleClasses).forEach(function (toggleKey) {
if (!toggleClasses[toggleKey].open) {
toggleClasses[toggleKey].under = true;
}
});
}
var valueTab = null;
if (!this.props.hideValueTab) {
valueTab = <a className={classSet(toggleClasses.output)} onClick={this.handleOutputModeToggle} href="#">{this.state.mode !== this.MODES.OUTPUT ? 'show value' : 'hide value'}</a>;
}
return (
<div className="playground">
<div className={classSet(classes)}>
<div ref="mount" />
</div>
{drawer}
<a className={classSet(toggleClasses.code)} onClick={this.handleCodeModeToggle} href="#">{this.state.mode !== this.MODES.JSX ? 'show code' : 'hide code'}</a>
{ valueTab }
</div>
);
},
render: function () {
var groupClasses = mixin({
'form-group': true,
'has-error': this.state.hasError
}, opts.groupClasses);
var input = opts.type === 'textarea' ?
React.DOM.textarea({
ref: "input",
name: opts.name,
className: cx(inputClasses),
defaultValue: defaultValue,
disabled: opts.disabled,
readOnly: opts.readOnly,
placeholder: opts.placeholder,
onKeyDown: opts.onKeyDown,
onChange: opts.onChange}) :
React.DOM.input({
ref: "input",
name: opts.name,
className: cx(inputClasses),
type: opts.type || 'text',
defaultValue: defaultValue,
disabled: opts.disabled,
readOnly: opts.readOnly,
placeholder: opts.placeholder,
onKeyDown: opts.onKeyDown,
onChange: opts.onChange});
if (addonBefore || addonAfter) {
input = (
React.DOM.div({className: "input-group"},
addonBefore,
input,
addonAfter
)
);
}
if (opts.breakpoints) {
input = (
React.DOM.div({className: opts.breakpoints.toInputClassName()},
input
)
);
}
return (
React.DOM.div({className: cx(groupClasses)},
label,
input,
help
)
);
}
render: function() {
var server = this.props.server,
focused = this.props.focused;
var channels = [];
var classes = cx({
'servername': true,
'active': focused.channel == null && focused.server == this.props.server.id
});
for (var key in server.channels) {
channels.push(<Channel
key={key}
server_id={server.id}
channel={server.channels[key]}
focused={this.props.focused} />);
}
return (
<div className="channellist">
<div className={classes} onClick={this._onClick}>{server.name}</div>
{channels}
</div>
);
},
renderTab: function(child, index) {
if (child.type !== HTabbedPanel.Tab.type) {
return null;
}
var key = this.props.contentKeys[index] || index;
var props = {};
var className = {
"h-tabbed-panel__tab": true,
"h-tabbed-panel__tab--active": this.getActiveTab() === key
};
if (child.props.tabClassName) {
className[child.props.tabClassName] = true;
}
props.onClick = child.props.onClick || this.activateTab.bind(null, key);
props.onKeyPress = child.props.onKeyPress || this.activateTabOnReturn.bind(null, key);
props.className = classSet(className);
props.children = child;
props.key = key;
return (
<div tabIndex="0" {...props} />
);
},
renderProfile: function(patient) {
var url = patient.link.slice(0,-5) + '/profile';
var classes = cx({
'patientcard-actions-profile': true,
'navbarpatientcard-profile': true,
'patientcard-actions--highlight': this.props.currentPage && this.props.currentPage.match(/(profile)$/i)
});
var self = this;
var handleClick = function(e) {
self.props.trackMetric('Clicked Navbar Name');
};
return (
/* jshint ignore:start */
<a className={classes} href={url} onClick={handleClick} title="Profile">
<div className="patientcard-fullname" title={this.getFullName()}>
{this.getFullName()}
<i className="patientcard-icon icon-settings"></i>
</div>
</a>
/* jshint ignore:end */
);
},
render: function() {
var patient = this.props.patient;
var self = this;
var classes = cx({
'patientcard': true
});
var view = this.renderView(patient);
var upload = this.renderUpload(patient);
var share = this.renderShare(patient);
var profile = this.renderProfile(patient);
/* jshint ignore:start */
return (
<div className={classes}>
<i className="Navbar-icon icon-face-standin"></i>
<div className="patientcard-info">
{profile}
<div className="patientcard-actions">
{view}
{share}
{upload}
</div>
</div>
<div className="clear"></div>
</div>
);
/* jshint ignore:end */
},
render: function () {
return (
<div>
<section className={cx({
game: true,
gameover: this.state.isGameOver
})} style={{width: ''+(this.props.width * 1.8)+'em'}}>
<header>
<aside className="mines">
{this.state.isGameOver ? this._happyMessage : this.state.remainingMineCount}
</aside>
<button onClick={this._onRestart}>:)</button>
<aside className="timer">
00
</aside>
</header>
<Board width={this.props.width}
height={this.props.height}
mineCount={this.props.mineCount} />
</section>
<footer>
<a href="https://github.com/myrlund/sveiper">Laget</a> av <a href="https://twitter.com/danseku">@danseku</a>
</footer>
</div>
);
}
render: function () {
var p = this.props,
classes = cx({
"ui input": true,
"focus": p.focus,
"fluid": p.fluidm,
"error": p.error,
"action": !!p.action,
"loading": p.loading,
"icon": p.loading || p.icon
});
classes += " " + [p.size].join(" ");
/* jshint ignore:start */
return this.transferPropsTo(
<div className={classes}>
<input type="text" placeholder={p.placeholder} />
{p.loading ? <Icon /> : false}
{!p.loading && p.icon ? p.icon : false}
{p.action ? p.action : false}
</div>
);
/* jshint ignore:end */
}
renderInvite: function() {
var isTeamEmpty = this.props.patient.team.length === 0;
var self = this;
var classes = {
'PatientTeam-member': true,
'PatientTeam-member--emptyNew': isTeamEmpty,
'PatientTeam-member--new': !isTeamEmpty
};
classes = cx(classes);
var handleClick = function(e) {
e.preventDefault();
self.props.trackMetric('Clicked Invite New Member');
self.setState({
invite: true
});
};
return (
/* jshint ignore:start */
<li className={classes}>
<div className="PatientInfo-head">
<div className="PatientTeam-picture PatientInfo-picture PatientTeam-picture--newMember"></div>
<div className="PatientTeam-blocks PatientInfo-blocks">
<div className="PatientInfo-blockRow" onClick={handleClick}>
<a href="" onClick={handleClick} className="PatientInfo-block PatientInfo-block--withArrow">Invite new member</a>
</div>
</div>
</div>
</li>
/* jshint ignore:end */
);
},
render: function() {
var total = this.state.users.length,
userListItems = this.state.users.map(function(user, i) {
return ( <ProjectListItem isActive={user.id === this.state.userActive.id} key={user.id} index={i} name={user.fname + ' ' + user.lname} count={ UserStore.getCount() } clickHandler={this._setActiveUser.bind(this, user)} /> );
}, this);
return (
<div
className={cx({
'section': true,
'user-section': true,
'is-loading': this.state.isLoading
})}>
<div className="spinner"></div>
<h4>Users ({total})</h4>
<p>Active User: {_name(this.state.userActive)}</p>
<ul className="list">
{userListItems}
</ul>
</div>
);
},
render: function() {
var col = this.props.col;
var clickFun = this._trClick;
var format = this.props.format;
var rows = this.props.data.map(function(item){
return (
<Row data={item} col={col} onClick={clickFun} format={format}/>
)
});
return (
<div>
<table className={classNames(this.props.style)}>
<thead>
<Head data={this.props.col} format={format}/>
</thead>
<tbody>
{rows}
</tbody>
</table>
<div className={cx({
"hide":!this.state.pager
})}>
<div className="pull-left">共{this.state.total}条</div>
<Pagination onClick={this._paginationClick} max={5}/>
</div>
</div>
);
},
render: function() {
var posts = [];
var showLoader = this.state.posts === null;
var paginator = null;
if (this.state.posts && this.state.posts.length > 0) {
this.state.posts.forEach(function(post, index){
posts.push(<PostListElement key={index} post={post} context={this.props.context}/>);
}.bind(this));
paginator = <Paginator context={this.props.context} page={this.props.page} pageCount={this.props.pageCount} totalCount={this.props.totalCount}/>;
}
var classesMap = {};
classesMap.wrapper = true;
classesMap[this.state.cssClass] = true;
var classes = cx(classesMap);
return (
<div className={classes}>
<Header context={this.props.context}/>
<div className='main-content container'>
<div className='post-container'>
<Loader class={!showLoader ? 'hidden' : ''}/>
{posts}
{paginator}
</div>
</div>
<Footer context={this.props.context}/>
</div>
);
}
var NavItemRender = function (props) {
return (
React.DOM.ul( {className:classSet(props.classes), id:props.id},
utils.modifyChildren(props.children, props.renderNavItem)
)
);
};
render: function() {
var note = this.props.note;
var input;
if (this.state.isEditing) {
input =
<NoteTextInput
className="edit"
onSave={this._onSave}
value={note}
/>;
}
// List items should get the class 'editing' when editing
// and 'completed' when marked as completed.
// Note that 'completed' is a classification while 'complete' is a state.
// This differentiation between classification and state becomes important
// in the naming of view actions toggleComplete() vs. destroyCompleted().
return (
<li
className={cx({
'completed': note.complete,
'editing': this.state.isEditing
})}
key={note.id}>
<div className="view">
<label onDoubleClick={this._onDoubleClick}>
{note.title} : {note.description}
</label>
<button className="destroy" onClick={this._onDestroyClick}> Delete</button>
</div>
{input}
</li>
);
},
render(){
let todo = this.props.todo;
let input;
if( this.state.isEditing ){
input = <TodoTextInput
className = "edit"
onSave = {this._onSave}
value = {todo.text}
/>
}
return (
<li
className = { cx({ 'completed': todo.complete, 'editing': this.state.isEditing })}
key={todo.id}>
<div className = "view">
<input className="toggle"
type="checkbox"
checked={this.props.todo.complete}
onChange={this._onToggleComplete}
/>
<label onDoubleClick={this._onDoubleClick}>
{todo.text}
</label>
<button className="destroy" onClick={this._onDestroyClick} />
</div>
{input}
</li>
);
}
render: function () {
var groupClasses = mixin({
'form-group': true,
'has-error': this.state.hasError
}, opts.groupClasses);
var input = (
React.DOM.div({className: "checkbox"},
React.DOM.label(null,
React.DOM.input({ref: "input", type: "checkbox", defaultChecked: defaultValue}), " ", opts.label
)
)
);
if (opts.breakpoints) {
input = (
React.DOM.div({className: opts.breakpoints.toCheckboxClassName()},
input
)
);
}
return (
React.DOM.div({className: cx(groupClasses)},
input,
help
)
);
}
render: function () {
var groupClasses = mixin({
'form-group': true,
'has-error': this.state.hasError
}, opts.groupClasses);
var input = choices.map(function (c, i) {
return (
React.DOM.div({className: "radio", key: i},
React.DOM.label(null,
React.DOM.input({type: "radio", ref: name + i, name: name, value: c.value, defaultChecked: c.value === defaultValue}),
c.text
)
)
);
});
if (opts.breakpoints) {
input = (
React.DOM.div({className: opts.breakpoints.toInputClassName()},
input
)
);
}
return (
React.DOM.div({className: cx(groupClasses)},
label,
input,
help
)
);
}
render: function() {
var valuesLinkClass = cx({
'tidelineNavLabel': true,
'tidelineNavRightLabel': true
});
var refreshLinkClass = cx({
'patient-data-subnav-hidden': this.props.chartType === 'no-data'
});
function getValuesLinkText(props) {
if (props.chartType === 'weekly') {
if (props.showingValues) {
return 'Hide numbers';
}
else {
return 'Show numbers';
}
}
else {
return '';
}
}
var valuesLinkText = getValuesLinkText(this.props);
/* jshint ignore:start */
var showValues = (
<a className={valuesLinkClass} onClick={this.props.onClickValues}>{valuesLinkText}</a>
);
/* jshint ignore:end */
/* jshint ignore:start */
return (
<div className="container-box-outer patient-data-footer-outer">
<div className="container-box-inner patient-data-footer-inner">
<div className="grid patient-data-footer">
<div className="grid-item one-whole medium-one-half patient-data-footer-left">
<a href="" className={refreshLinkClass} onClick={this.props.onClickRefresh}>Refresh</a>
</div>
<div href="" className="grid-item one-whole medium-one-half patient-data-footer-right">{showValues}</div>
</div>
</div>
</div>
);
/* jshint ignore:end */
}
function getLabel(label, breakpoints) {
var classes = {};
if (breakpoints) {
classes['control-label'] = true;
classes[breakpoints.toLabelClassName()] = true;
}
return label ? React.DOM.label({className: cx(classes)}, label) : null;
}
getClassName: function getClassName() {
var classNames = {};
if (this.props.className) classNames[this.props.className] = true;
if (this.getActiveState()) classNames[this.props.activeClassName] = true;
return classSet(classNames);
},
var buttons = this.state.devices.map(function(device){
var className= cx({
button: true,
tiny: true,
alert: this.state.selected.indexOf(device) != -1,
});
return <li><a onClick={this._selectDevice.bind(this,device)} className={className}>{device}</a></li>
}.bind(this));
return function () {
var classes = {};
for (var size in this) {
var value = this[size];
if (this.hasOwnProperty(size) && !Nil.is(value)) {
classes['col-' + size + '-' + value[n]] = true;
}
}
return cx(classes);
};
render: function() {
return this.shouldBeClosed() ? div() : (
div({
ref: "overlay",
className: cx(this.buildClassName('overlay'), this.props.overlayClassName),
style: this.overlayStyles,
onClick: this.handleOverlayClick
},
div({
ref: "content",
className: cx(this.buildClassName('content'), this.props.className),
tabIndex: "-1",
onClick: stopPropagation,
onKeyDown: this.handleKeyDown
},
this.props.children
)
)
);
}
Breakpoints.prototype.toCheckboxClassName = function () {
var classes = {};
for (var size in this) {
var value = this[size];
if (this.hasOwnProperty(size) && !Nil.is(value)) {
classes['col-' + size + '-offset-' + value[0]] = true;
classes['col-' + size + '-' + value[1]] = true;
}
}
return cx(classes);
};
getClassName: function () {
var classNames = {};
if (this.props.className)
classNames[this.props.className] = true;
if (this.isActive(this.props.to, this.props.params, this.props.query))
classNames[this.props.activeClassName] = true;
return classSet(classNames);
},
render: function() {
var page = this.props.page;
var className = cx('Content', 'container', page.metadata.className);
return this.transferPropsTo(
<Page scripts={this.props.scripts || page.metadata.scripts}>
<div
className={className}
dangerouslySetInnerHTML={{__html: page.html}}
/>
</Page>
);
}
renderDay: function(day) {
var dayLinkClass = cx({
'dayFilter': true,
'active': this.props.activeDays[day],
'inactive': !this.props.activeDays[day]
}) + ' ' + day;
/* jshint ignore:start */
return (
<a className={dayLinkClass} key={day} onClick={this.props.onClickDay(day)}>{this.DAY_ABBREVS[day]}</a>
);
/* jshint ignore:end */
},