getMentionComponentForMatch: function(id, display, type, key) {
var childrenCount = React.Children.count(this.props.children);
var props = { id: id, display: display, key: key };
if(childrenCount > 1) {
if(!type) {
throw new Error(
"Since multiple Mention components have been passed as children, the markup has to define the __type__ placeholder"
);
}
// detect the Mention child to be cloned
var foundChild = null;
React.Children.forEach(this.props.children, function(child) {
if(!child) {
return;
}
if(child.props.type === type) {
foundChild = child;
}
});
// clone the Mention child that is applicable for the given type
return React.addons.cloneWithProps(foundChild, props);
} else if(childrenCount === 1) {
// clone single Mention child
var child = this.props.children.length ? this.props.children[0] : React.Children.only(this.props.children);
return React.addons.cloneWithProps(child, props );
} else {
// no children, use default configuration
return Mention(props);
}
},
_getGroupedButtons: function () {
var len = this.props.buttons.length,
i, j, item, group = [], groups = [];
for (i = 0; i < len; ++i) {
item = this.props.buttons[i];
if (typeof item === "object" && item instanceof Array) {
if (group.length) {
groups.push(group);
group = [];
}
for (j = 0; j < item.length; ++j) {
group.push(React.addons.cloneWithProps(item[j], {key: j}));
}
if (group.length) {
groups.push(group);
group = [];
}
} else {
group.push(React.addons.cloneWithProps(item, {key: i}));
}
}
if (group.length) {
groups.push(group);
}
return groups;
},
render: function() {
var nbrcompleted = _.filter(this.props.list, "isComplete").length,
nbrtotal = this.props.list.length,
nbrincomplete = nbrtotal - nbrcompleted,
clearButtonClass = React.addons.classSet({hidden: nbrcompleted < 1}),
footerClass = React.addons.classSet({hidden: !nbrtotal}),
completedLabel = "Clear completed (" + nbrcompleted + ")",
itemsLeftLabel = nbrincomplete === 1 ? " item left" : " items left";
return (
<footer className={"footer " + footerClass}>
<span className="todo-count"><strong>{nbrincomplete}</strong>{itemsLeftLabel}</span>
<ul className="filters">
<li>
<ReactRouter.Link activeClassName="selected" to="All">All</ReactRouter.Link>
</li>
<li>
<ReactRouter.Link activeClassName="selected" to="Active">Active</ReactRouter.Link>
</li>
<li>
<ReactRouter.Link activeClassName="selected" to="Completed">Completed</ReactRouter.Link>
</li>
</ul>
<button className={"clear-completed " + clearButtonClass} onClick={TodoActions.clearCompleted}>{completedLabel}</button>
</footer>
);
}
scope: function(values){
var scope = this.props.application.state.value;
var result = React.addons.update(scope, {$merge : this.props});
if (values)
result = React.addons.update(result, {$merge: values});
return result;
},
createItem: function(item, idx) {
var itemFav = React.addons.classSet({
"icon-favorite": true,
"hide": !item.favorite
});
var itemNotFav = React.addons.classSet({
"icon-favorite": true,
"hide": item.favorite
});
/* jshint ignore:start */
return (
<li key={idx} onClick={this.viewItem.bind(null, idx)}>
{item.title}
<span onClick={this.toggleFavorite.bind(null, idx)}
className={itemFav}>
★
</span>
<span onClick={this.toggleFavorite.bind(null, idx)}
className={itemNotFav}>
☆
</span>
</li>
);
/* jshint ignore:end */
},
Spec.prototype.render = function () {
var _this = this;
var cx = React.addons.classSet({
"quest": true,
"my-hide": this.props.store.hide
});
var cxc = React.addons.classSet({
"progress": (this.props.store.hideClock == false),
"my-hide": this.props.store.hideClock
});
var indexSelected = this.props.store.indexSelected;
var lise = this.props.store.choices.map(function (choice, index) {
var cxl = React.addons.classSet({
"my-hide": _this.state.hideChoice,
"myQuestSelected": (indexSelected != -1 && indexSelected == index),
"myQuestUnselected": (indexSelected != -1 && indexSelected != index)
});
return rce(liComponent, {
className: cxl,
key: index,
ix: index,
choice: choice,
onClick: _this._onClick
}, choice);
});
return rce("div", { className: cx }, rce("div", { className: "question", ref: "myQuestion" }, rce("div", null, this.props.store.question), rce("ul", null, lise)), rce("div", { className: cxc }, rce(clockComponent, {
hideClock: this.props.store.hideClock,
timeoutMax: this.props.store.timeoutMax,
onTimeout: this._onTimeout
})));
};
setFormState: function (change) {
this.setState(React.addons.update(
this.state,
{$merge: {
formState: React.addons.update(this.state.formState, {$merge: change})
} }
));
},
onSelectSuccess(_id) {
let index = this.selectedList.indexOf(_id);
if(index !== -1) {
this.selectedList = React.addons.update(this.selectedList,{$splice : [[index,1]]});
} else {
this.selectedList = React.addons.update(this.selectedList,{$push : [_id]});
}
}
var children = React.Children.map(this.props.children, function(child) {
if (typeof child.type === 'string') return child;
var newChild = child;
if ('ReStock.DataTransform' === newChild.props.namespace) {
newChild = React.addons.cloneWithProps(newChild, {
data: this.props.data,
interval: this.props.interval
});
}
return React.addons.cloneWithProps(newChild, {
_width: this.getAvailableWidth(this.props)
, _height: this.getAvailableHeight(this.props)
});
}.bind(this));
return React.Children.map(this.props.children, function (child) {
var result = null;
// Clone TabList and Tab components to have refs
if (count++ === 0) {
result = React.addons.cloneWithProps(child, {
ref: 'tablist',
children: React.Children.map(child.props.children, function (tab) {
var ref = 'tabs-' + index;
var id = state.tabIds[index];
var panelId = state.panelIds[index];
var selected = state.selectedIndex === index;
var focus = selected && state.focus;
index++;
return React.addons.cloneWithProps(tab, {
ref: ref,
id: id,
panelId: panelId,
selected: selected,
focus: focus
});
})
});
// Reset index for panels
index = 0;
}
// Clone TabPanel components to have refs
else {
var ref = 'panels-' + index;
var id = state.panelIds[index];
var tabId = state.tabIds[index];
var selected = state.selectedIndex === index;
index ++;
result = React.addons.cloneWithProps(child, {
ref: ref,
id: id,
tabId: tabId,
selected: selected
});
}
return result;
});
render: function () {
let isPositive = this.props.data.change.indexOf('-') === -1;
let changeClass = React.addons.classSet({
"stock-change": true,
red: !isPositive,
green: isPositive
});
return (
<div className="stock-box">
<div className="stock-details">
<p className="stock-company-name">{this.props.data.name}</p>
<p className="stock-extra-details">
<span>{this.props.data.stockExchange} </span>
<span>{this.props.data.symbol} </span>
<span>{this.props.data.lastTradeTime} </span>
</p>
<p>
<span className="stock-price">{this.props.data.price} </span>
<span className={changeClass}>{this.props.data.change} </span>
</p>
<p className="stock-shares">
{this.state.shares} Shares
</p>
</div>
<div className="stock-actions">
<FlatButton label="BUY" primary={true} onClick={this.buy} />
<FlatButton label="SELL" primary={false} onClick={this.sell} />
</div>
</div>
)
}
componentDidMount() {
let element = React.findDOMNode(this.refs.dropdownOwner);
let dropdownHeight = element.offsetHeight;
let posTop = element.offsetTop + dropdownHeight;
let posLeft = element.offsetLeft;
this.setState({
left: posLeft,
top: posTop
});
let listStyle = {
background: this.props.background,
color: this.props.color ? this.props.color : "inherit",
cursor: "pointer",
display: "block !important",
left: posLeft,
top: posTop + (this.props.top ? this.props.top : 0),
zIndex: 100
};
this.dropdownStyle = React.addons.update(this.props.style, {$merge: listStyle});
//mousedown listener, used to detect clicks outside of the dropdown
window.addEventListener("mousedown", this.closeDropDown.bind(this));
}
self.props.children.map(function (item, index) {
var itemID = self.props.id + '-' + item.props.id;
item = (
React.addons.cloneWithProps(item, {
parentId: self.props.id,
parentType: self.props.type,
key: item.props.type +"-"+ itemID
})
);
if (
!self.state.activeItem &&
(
(index === 0 && item.props.type === "list") ||
(index === 1 && item.props.type === "content")
)
) {
item.props.active = true;
} else if (itemID === self.state.activeItem) {
item.props.active = true;
} else {
item.props.active = false;
}
if (item.props.type === "list") {
children.list.push(item);
}
if (item.props.type === "content") {
children.content.push(item);
}
});
render: function(){
var filteredList;
switch(this.getPath()){
case '/completed':
filteredList = _.filter(this.props.list, function(item){ return item.isComplete; });
break;
case '/active':
filteredList = _.filter(this.props.list, function(item){ return !item.isComplete; });
break;
default:
filteredList = this.props.list;
}
var classes = React.addons.classSet({
"hidden": this.props.list.length < 1
});
return (
<section className={"main " + classes}>
<input className="toggle-all" type='checkbox' onChange={this.toggleAll} />
<label htmlFor="toggle-all">Mark all as complete</label>
<ul className="todo-list">
{ filteredList.map(function(item){
return <TodoItem label={item.label} isComplete={item.isComplete} id={item.key} key={item.key} />
})}
</ul>
</section>
);
}
render: function() {
var that = this;
var classes = {
"button" : true,
"button-more-info-close" : true
}
if(this.props.modifier) {
classes["button-more-info-close--"+this.props.modifier] = true;
}
return (
<button className={React.addons.classSet(classes)} {...this.props}>
<div className="button-more-info__inactive">
<BlockAlign>
{this.props.children}
</BlockAlign>
</div>
<div className="button-more-info__active">
<ButtonClose />
</div>
</button>
)
}
Promise.all(promises).then(function () {
RouteStore.unregisterAllRoutes();
var newRoutes = React.addons.cloneWithProps(routes, {
location: ServerLocation,
initialPath: fullPath,
initialData: initialData
});
var html;
if (!staticMarkup) {
var initialDataScript = '<script type="text/javascript">window.__ReactRouter_initialData=' + JSON.stringify(initialData) + ';<\/script>';
html = React.renderComponentToString(newRoutes) + initialDataScript;
} else {
html = React.renderComponentToStaticMarkup(newRoutes)
}
RouteStore.unregisterAllRoutes();
resolve({
html: html,
httpStatus: httpStatus,
status: httpStatus
});
}).catch(reject);
render() {
return (
<form className="form-horizontal" onSubmit={this.onSubmit.bind(this)}>
{React.addons.cloneWithProps(this.props.children)}
</form>
);
}
self.props.children.map(function (item, key) {
item = React.addons.cloneWithProps(item, {
id: key,
key: key
});
children.push(item);
});
render: function () {
var style = {
top: this.state.offsetTop,
left: this.state.offsetLeft
};
// Set zIndex if currently dragging and prop has been provided
if (this.state.dragging && !isNaN(this.props.zIndex)) {
style.zIndex = this.props.zIndex;
}
var props = {
style: style,
className: 'react-draggable',
onMouseDown: this.handleDragStart,
onTouchStart: this.onTouchStart,
onMouseUp: this.handleDragEnd,
onTouchEnd: this.handleDragEnd
};
// Reuse the child provided
// This makes it flexible to use whatever element is wanted (div, ul, etc)
if (this.props.useChild) {
return React.addons.cloneWithProps(React.Children.only(this.props.children), props);
}
return React.DOM.div(props, this.props.children);
},
render: function() {
var diffContainerClasses = React.addons.classSet({
diffContainer: true,
visible: this.state.diffVisible,
});
var diffs = this.props.data.Diff.FilesChanged.map(function(d, i) {
return <Diff data={d} />;
});
return(
<div className="commit">
<div className="meta">
<img src={this._getGravatarURL()} height="50" width="50" />
<div className="data">
<h3> {this.props.data.Message} </h3>
<p className="sha">SHA1: {this.props.data.SHA1}</p>
<p>
by <a href={"mailto:" + this.props.data.Author.Email}> {this.props.data.Author.Name} </a>
authored <span title={this.props.data.Timestamp}>{this._formatDate()}</span>
</p>
</div>
</div>
<span className="diffToggle" onClick={this._toggleDiff}> Show diff </span>
<div className={diffContainerClasses}>
{diffs}
</div>
</div>
);
},
render: function () {
var style = {
// Set top if vertical drag is enabled
top: canDragY(this)
? this.state.clientY
: this.state.startY,
// Set left if horizontal drag is enabled
left: canDragX(this)
? this.state.clientX
: this.state.startX
};
// Set zIndex if currently dragging and prop has been provided
if (this.state.dragging && !isNaN(this.props.zIndex)) {
style.zIndex = this.props.zIndex;
}
// Reuse the child provided
// This makes it flexible to use whatever element is wanted (div, ul, etc)
return React.addons.cloneWithProps(React.Children.only(this.props.children), {
style: style,
className: 'react-draggable',
onMouseUp: this.handleMouseUp,
onMouseDown: this.handleMouseDown
});
}
renderBar: function(label, score) {
var classList = {
bar: true
};
switch(label) {
case '~':
classList['bar-zero'] = true;
break;
case 'S':
classList['bar-small'] = true;
break;
case 'M':
classList['bar-medium'] = true;
break;
case 'L':
classList['bar-large'] = true;
break;
case 'XL':
classList['bar-xlarge'] = true;
break;
default:
break;
}
if (voteService.POINT_SCALE[score] >= voteService.POINT_SCALE[label]) {
classList.active = true;
}
return (
<div className={React.addons.classSet(classList)} onClick={_.partial(this.handleClick, label)}><h2>{label}</h2></div>
);
},
React.Children.forEach(self.props.children, function(child) {
var ref = "tabb-" + tabIndex,
showTitle = true,
props = {
"icon": child.props.icon,
"title": child.props.title,
"pinned": child.props.pinned
};
if (self.state.compacted) {
if (!(props.pinned || selectedIndex == tabIndex)) {
showTitle = false;
}
}
tabButtons.push(
React.createElement(TabButton, {key: tabIndex, title: props.title, icon: props.icon,
index: tabIndex, ref: ref, showTitle: showTitle, onClick: self.handleClick})
);
tabs.push(
React.addons.cloneWithProps(child, {
key: tabIndex,
selectedIndex: selectedIndex,
index: tabIndex
})
);
++tabIndex;
});
render: function () {
var style = {
// Set top if vertical drag is enabled
top: canDragY(this)
? this.state.clientY
: this.state.startY,
// Set left if horizontal drag is enabled
left: canDragX(this)
? this.state.clientX
: this.state.startX
};
// Set zIndex if currently dragging and prop has been provided
if (this.state.dragging && !isNaN(this.props.zIndex)) {
style.zIndex = this.props.zIndex;
}
// Reuse the child provided
// This makes it flexible to use whatever element is wanted (div, ul, etc)
return React.addons.cloneWithProps(React.Children.only(this.props.children), {
style: style,
className: 'react-draggable',
onMouseDown: this.handleDragStart,
onTouchStart: function(ev){
ev.preventDefault(); // prevent for scroll
return this.handleDragStart.apply(this, arguments);
}.bind(this),
onMouseUp: this.handleDragEnd,
onTouchEnd: this.handleDragEnd
});
}
Spec.prototype.render = function () {
var cx = React.addons.classSet({
"feedback": true,
"my-hide": !this.props.store.showFeedback
});
return React.createElement("div", { className: cx });
};
render: function() {
var transform = "translate3d(" + Utils.pixelsOf(this.state.left) + ", " + Utils.pixelsOf(this.state.top) + ", 0)",
wrapperStyle = React.addons.update({
WebkitTransform: transform,
MozTransform: transform,
msTransform: transform,
transform: transform,
width: Utils.pixelsOf(this.state.width),
position: "absolute"
}, {$merge: this.props.style});
if (!this.skipUpdate) {
this.inner = (
React.createElement(ReactPanel, {title: this.props.title, icon: this.props.icon, buttons: this.props.buttons,
onDragStart: this.dragStart, onDragEnd: this.dragEnd, floating: true},
this.props.children
)
);
} else {
this.skipUpdate = false;
}
return (
React.createElement("div", {style: wrapperStyle},
this.inner
)
);
}
changeQuestion: function(e){
var newState = React.addons.update(this.state, {
question: { $set : e.target.value },
counter: { $set: 150 - e.target.value.length }
});
this.setState(newState);
},
openModalExam: function(data){
var newState = React.addons.update(this.state,{
openModalClass: { $set: 'modal-is-active' },
academyCourse: { $set: data.detail }
});
this.setState(newState);
},
var list = this.props.data.map(function (user) {
var classes = React.addons.classSet({
user: true,
me: user.me
});
return <li className={classes}>{user.username}</li>;
});
renderChildren: function renderChildren() {
var self = this,
childrens = React.Children.count(self.props.children),
children = [];
if (childrens === 1) {
React.addons.cloneWithProps(self.props.children, {
onClick: self.handleClick,
date: self.props.date,
parentId: self.props.id,
key: 0
});
} else if (childrens > 1) {
self.props.children.map(function (item, key) {
item = React.addons.cloneWithProps(item, {
onClick: self.handleClick,
date: self.props.date,
parentId: self.props.id,
key: key
});
children.push(item);
});
}
return children;
},