render: function () {
return (
Layout(null,
React.DOM.h1(null, "Home page view")
)
);
}
InlineLexer.prototype.outputLink = function(cap, link) {
if (cap[0][0] !== '!') {
var shouldOpenInNewWindow =
link.href.charAt(0) !== '/'
&& link.href.charAt(0) !== '#';
return React.DOM.a({
href: this.sanitizeUrl(link.href),
title: link.title,
target: shouldOpenInNewWindow ? '_blank' : '',
}, this.output(cap[1]));
} else {
return React.DOM.img({
src: this.sanitizeUrl(link.href),
alt: cap[1],
title: link.title,
}, null);
}
};
it("should properly escape text content and attributes values", function() {
expect(
React.renderToStaticMarkup(
React.DOM.div({
title: '\'"<>&',
style: {
textAlign: '\'"<>&'
}
}, '\'"<>&')
)
).toBe(
'<div title="'"<>&" style="text-align:'"<>&;">' +
''"<>&' +
'</div>'
);
});
render: function() {
return React.DOM.div({className: 'content-pane'},
this.props.viewType === 'list' ?
FilterableNoteList(_.pick(this.props, 'folder')) :
Note({id: this.props.noteId}));
}
}).map(function (dir) {
return React.DOM.li({}, React.DOM.a({href: '/'+dir}, dir.replace(/-/g, ' ')));
});
render: function() {
return React.DOM.div('test component')
}
render: function() {
return React.DOM.div({
id: this.props.graphName,
});
},
_renderColumn: function(size, children) {
return React.DOM.div({
className: 'col-' + size,
children: children
});
},
render: function () {
return (
React.DOM.div(null, "This. Is the Questors Page.")
);
}
function marked(src, opt, callback) {
if (callback || typeof opt === 'function') {
if (!callback) {
callback = opt;
opt = null;
}
if (opt) opt = merge({}, marked.defaults, opt);
var highlight = opt.highlight
, tokens
, pending
, i = 0;
try {
tokens = Lexer.lex(src, opt)
} catch (e) {
return callback(e);
}
pending = tokens.length;
var done = function(hi) {
var out, err;
if (hi !== true) {
delete opt.highlight;
}
try {
out = Parser.parse(tokens, opt);
} catch (e) {
err = e;
}
opt.highlight = highlight;
return err
? callback(err)
: callback(null, out);
};
if (!highlight || highlight.length < 3) {
return done(true);
}
if (!pending) return done();
for (; i < tokens.length; i++) {
(function(token) {
if (token.type !== 'code') {
return --pending || done();
}
return highlight(token.text, token.lang, function(err, code) {
if (code == null || code === token.text) {
return --pending || done();
}
token.text = code;
token.escaped = true;
--pending || done();
});
})(tokens[i]);
}
return;
}
try {
if (opt) opt = merge({}, marked.defaults, opt);
return Parser.parse(Lexer.lex(src, opt), opt);
} catch (e) {
e.message += '\nPlease report this to https://github.com/chjj/marked.';
if ((opt || marked.defaults).silent) {
return [React.DOM.p(null, "An error occurred:"),
React.DOM.pre(null, e.message)];
}
throw e;
}
}
Parser.prototype.tok = function() {
switch (this.token.type) {
case 'space': {
return [];
}
case 'hr': {
return React.DOM.hr(null, null);
}
case 'heading': {
return (
<Header
level={this.token.depth}
toSlug={this.token.text}>
{this.inline.output(this.token.text)}
</Header>
);
}
case 'code': {
var lang = this.token.lang
, text = this.token.text;
if (lang && lang.indexOf('ReactNativeWebPlayer') === 0) {
return (
<WebPlayer params={lang.split('?')[1]}>{text}</WebPlayer>
);
}
return <Prism>{text}</Prism>;
}
case 'table': {
var table = []
, body = []
, row = []
, heading
, i
, cells
, j;
// header
for (i = 0; i < this.token.header.length; i++) {
heading = this.inline.output(this.token.header[i]);
row.push(React.DOM.th(
this.token.align[i]
? {style: {textAlign: this.token.align[i]}}
: null,
heading
));
}
table.push(React.DOM.thead(null, React.DOM.tr(null, row)));
// body
for (i = 0; i < this.token.cells.length; i++) {
row = [];
cells = this.token.cells[i];
for (j = 0; j < cells.length; j++) {
row.push(React.DOM.td(
this.token.align[j]
? {style: {textAlign: this.token.align[j]}}
: null,
this.inline.output(cells[j])
));
}
body.push(React.DOM.tr(null, row));
}
table.push(React.DOM.thead(null, body));
return React.DOM.table(null, table);
}
case 'blockquote_start': {
var body = [];
while (this.next().type !== 'blockquote_end') {
body.push(this.tok());
}
return React.DOM.blockquote(null, body);
}
case 'list_start': {
var type = this.token.ordered ? 'ol' : 'ul'
, body = [];
while (this.next().type !== 'list_end') {
body.push(this.tok());
}
return React.DOM[type](null, body);
}
case 'list_item_start': {
var body = [];
while (this.next().type !== 'list_item_end') {
body.push(this.token.type === 'text'
? this.parseText()
: this.tok());
}
return React.DOM.li(null, body);
}
case 'loose_item_start': {
var body = [];
while (this.next().type !== 'list_item_end') {
body.push(this.tok());
}
return React.DOM.li(null, body);
}
case 'html': {
return !this.token.pre && !this.options.pedantic
? React.DOM.span({dangerouslySetInnerHTML: {__html: this.token.text}})
: this.token.text;
}
case 'paragraph': {
return this.options.paragraphFn
? this.options.paragraphFn.call(null, this.inline.output(this.token.text))
: React.DOM.p(null, this.inline.output(this.token.text));
}
case 'text': {
return this.options.paragraphFn
? this.options.paragraphFn.call(null, this.parseText())
: React.DOM.p(null, this.parseText());
}
}
};
InlineLexer.prototype.output = function(src) {
var out = []
, link
, text
, href
, cap;
while (src) {
// escape
if (cap = this.rules.escape.exec(src)) {
src = src.substring(cap[0].length);
out.push(cap[1]);
continue;
}
// autolink
if (cap = this.rules.autolink.exec(src)) {
src = src.substring(cap[0].length);
if (cap[2] === '@') {
text = cap[1][6] === ':'
? cap[1].substring(7)
: cap[1];
href = 'mailto:' + text;
} else {
text = cap[1];
href = text;
}
out.push(React.DOM.a({href: this.sanitizeUrl(href)}, text));
continue;
}
// url (gfm)
if (cap = this.rules.url.exec(src)) {
src = src.substring(cap[0].length);
text = cap[1];
href = text;
out.push(React.DOM.a({href: this.sanitizeUrl(href)}, text));
continue;
}
// tag
if (cap = this.rules.tag.exec(src)) {
src = src.substring(cap[0].length);
var color = cap[0].match('<color ([^ ]+) />');
if (color) {
out.push(React.DOM.span({className: 'color', style: {backgroundColor: color[1]}}));
continue;
}
// TODO(alpert): Don't escape if sanitize is false
out.push(cap[0]);
continue;
}
// link
if (cap = this.rules.link.exec(src)) {
src = src.substring(cap[0].length);
out.push(this.outputLink(cap, {
href: cap[2],
title: cap[3]
}));
continue;
}
// reflink, nolink
if ((cap = this.rules.reflink.exec(src))
|| (cap = this.rules.nolink.exec(src))) {
src = src.substring(cap[0].length);
link = (cap[2] || cap[1]).replace(/\s+/g, ' ');
link = this.links[link.toLowerCase()];
if (!link || !link.href) {
out.push.apply(out, this.output(cap[0][0]));
src = cap[0].substring(1) + src;
continue;
}
out.push(this.outputLink(cap, link));
continue;
}
// strong
if (cap = this.rules.strong.exec(src)) {
src = src.substring(cap[0].length);
out.push(React.DOM.strong(null, this.output(cap[2] || cap[1])));
continue;
}
// em
if (cap = this.rules.em.exec(src)) {
src = src.substring(cap[0].length);
out.push(React.DOM.em(null, this.output(cap[2] || cap[1])));
continue;
}
// code
if (cap = this.rules.code.exec(src)) {
src = src.substring(cap[0].length);
out.push(React.DOM.code(null, cap[2]));
continue;
}
// br
if (cap = this.rules.br.exec(src)) {
src = src.substring(cap[0].length);
out.push(React.DOM.br(null, null));
continue;
}
// del (gfm)
if (cap = this.rules.del.exec(src)) {
src = src.substring(cap[0].length);
out.push(React.DOM.del(null, this.output(cap[1])));
continue;
}
// text
if (cap = this.rules.text.exec(src)) {
src = src.substring(cap[0].length);
out.push(this.smartypants(cap[0]));
continue;
}
if (src) {
throw new
Error('Infinite loop on byte: ' + src.charCodeAt(0));
}
}
return out;
};
render: function() {
return this.props.children ?
React.DOM.div(null, marked(this.props.children, this.props)) :
null;
}
render() {
return React.DOM.div({className: 'ct-chart'})
}
render: function() {
return React.DOM.p({ children: 'Hello from Dialog!' });
}
render: function () {
var self = this;
return React.DOM.form({onSubmit: this.handleSubmit},
React.DOM.input({value: this.state.todo, onChange: this.handleChange})
)
},
<h3 id='modals-live'>Live demo</h3>
<p>Use <code><ModalTrigger /></code> to create a real modal that's added to the document body when opened.</p>
<ReactPlayground codeText={Samples.ModalTrigger} />
<h3 id='modals-custom'>Custom trigger</h3>
<p>Use <code>OverlayMixin</code> in a custom component to manage the modal's state yourself.</p>
<ReactPlayground codeText={Samples.ModalOverlayMixin} />
<h3 id='modals-custom'>Contained Modal</h3>
<p>You will need to add the following css to your project and ensure that your container has the <code>modal-container</code> class.</p>
<pre>
{React.DOM.code(null,
'.modal-container {\n' +
' position: relative;\n' +
'}\n' +
'.modal-container .modal, .modal-container .modal-backdrop {\n' +
' position: absolute;\n' +
'}\n'
)}
</pre>
<ReactPlayground codeText={Samples.ModalContained} />
<h3 id='modal-default-sizing'>Sizing modals using standard Bootstrap props</h3>
<p>You can specify a bootstrap large or small modal by using the "bsSize" prop.</p>
<ReactPlayground codeText={Samples.ModalDefaultSizing} />
<h3 id='modal-custom-sizing'>Sizing modals using custom css</h3>
<p>You can apply custom css to the modal dialog div using the "dialogClassName" prop. Example is using a custom css class with width set to 90%.</p>
<ReactPlayground codeText={Samples.ModalCustomSizing} />
</div>
// ===============================================
render('11', Person6, {
value: {
name: 'Giulio',
surname: 'Canti',
age: 41,
gender: 'M'
}
});
// ===============================================
render('12', Person1, {
label: React.DOM.i(null, 'My form legend')
});
// ===============================================
render('13', Person1, {
help: React.DOM.i(null, 'My form help')
});
// ===============================================
render('14', Person1, {
hasError: true,
error: React.DOM.i(null, 'A custom error message')
});
const List = (Item, a2b) => Component('List', (options, handlers) =>
DOM.div(options, options.items.map(options =>
Item(a2b(options), handlers))));
renderTitle: function() {
return (
React.DOM.h3( {className:"popover-title"}, this.props.title)
);
}
);
}
};
React.render(
TagsInput({onAdd: onAddCallback,
onRemove: onRemoveCallback,
data: tagsData,
max: 5}),
document.getElementById("tags-input-example")
);
React.render(
MediaObject({
children: [
React.DOM.img({src: "build/grumpy.jpg", key:1}),
React.DOM.p({key: 2}, "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."),
React.DOM.p({key: 3}, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
]
}),
document.getElementById("media-obj-example")
);
React.render(
Switch(),
document.getElementById("switch-example")
);
React.render(
Switch({size: "xs"}),
document.getElementById("switch-example-xs")
);
render: function () {
return React.DOM.a(this.props, this.props.children);
}
render: function() {
return React.DOM.html(null, React.DOM.body(null, div(null, this.state.message)));
}
render: function () {
var venue = this.props.venue;
var categories = venue.categories;
var icon;
var categoriesText;
var rating = venue.rating;
var price = venue.price || {};
var userCountScale = scale.scaleLinear().domain([0, 100, 1000, this.props.maxUserCount]).range([0, 25, 50, 100]);
if (categories) {
icon = categories && categories[0] && categories[0].icon;
categoriesText = categories.map(function (c) {
return c.shortName;
}).join(', ');
}
var userCountScaled = userCountScale(venue.stats.usersCount);
return React.DOM.div(
{
className: classnames(this.props.className, 'venue')
},
React.DOM.div(
{
className: 'venue__info'
},
icon && React.DOM.img(
{
className: 'venue__icon',
src: [icon.prefix, '44', icon.suffix].join('')
}
),
React.DOM.a(
{
className: 'venue__name',
target: '_blank',
href: 'https://foursquare.com/venue/' + venue.id
},
venue.name
),
categoriesText && React.DOM.div(
{
className: 'venue__category'
},
categoriesText
)
),
React.DOM.div(
{
className: 'venue__circles'
},
React.DOM.div(
{
className: 'venue__circle-wraper'
},
circleComponent({
maxValue: 4,
className: 'venue__circle',
value: rating - 6,
valueTitle: rating,
color: '#' + venue.ratingColor,
label: 'Rating'
})
),
React.DOM.div(
{
className: 'venue__circle-wraper'
},
circleComponent({
maxValue: 4,
className: 'venue__circle',
value: price.tier,
valueTitle: PRICE_DICTIONARY[price.tier],
color: String(priceColorScale(price.tier)),
label: 'Price'
})
),
React.DOM.div(
{
className: 'venue__circle-wraper'
},
circleComponent({
maxValue: 100,
className: 'venue__circle',
value: userCountScaled,
valueTitle: venue.stats.usersCount,
color: String(usersColorScale(userCountScaled)),
label: 'Users'
})
),
React.DOM.div(
{
className: 'venue__circle-wraper'
},
circleComponent({
maxValue: venue.stats.usersCount,
className: 'venue__circle',
value: venue.ratingSignals,
valueTitle: Math.round(venue.ratingSignals/venue.stats.usersCount * 100) + ' %',
color: String(votesColorScale(venue.ratingSignals/venue.stats.usersCount * 100)),
label: 'Votes per Users'
})
)
)
);
}
render: function() {
if (!this.props.data) {
return React.DOM.div();
}
var player = React.createElement(Player, {
src: Utils.mediaUrl(this.props.data),
poster: this.props.data.get('programLiveImage'),
fileType: this.props.data.get('fileType'),
autoPlay:true
});
var socialContainer = React.DOM.div({
className: 'program-expand-social-container'
},
React.DOM.i({
className: 'program-mention-air-date'
}, React.createElement(TimeAgo, {
date: this.props.data.get('mediaStartTime')
})), React.DOM.i({
className: 'fa fa-envelope-o program-card-play-icon icon-prop icon-prop-animation clickable'
}),
React.DOM.i({
className: 'fa fa-twitter program-card-play-icon icon-prop icon-prop-animation clickable'
}),
React.DOM.i({
className: 'fa fa-facebook program-card-play-icon icon-prop icon-prop-animation clickable'
}),
React.DOM.i({
className: 'fa fa-link program-card-play-icon icon-prop icon-prop-animation clickable'
}),
React.DOM.i({
className: 'fa fa-code program-card-play-icon icon-prop icon-prop-animation clickable'
}));
var expandTranscript = React.DOM.div({
className: 'program-expanded-right'
},
React.DOM.p(null, this.state.transcript ? this.state.transcript : ''));
var expandMedia = React.DOM.div({
className: 'program-expanded-left'
}, React.DOM.div({
className: 'program-expand-media-container'
}, player, socialContainer));
var closeIcon = React.DOM.i({
className: 'fa fa-times-circle program-card-close-expand-icon icon-prop icon-prop-animation clickable',
onClick: this.onCloseExpand
});
return React.DOM.div({
className: this.props.className,
hidden: this.props.hidden
}, expandMedia, expandTranscript, closeIcon);
}
render: function () {
return React.createElement(DocumentTitle, {title: 'nope'},
React.DOM.div(null, React.createElement(Component1))
);
}
render: function() {
return React.DOM.div();
}
render: function() {
return React.DOM.div({}, "div");
}
it('allow React.DOM factories to be called without warnings', function() {
spyOn(console, 'error');
var element = React.DOM.div();
expect(element.type).toBe('div');
expect(console.error.argsForCall.length).toBe(0);
});
render: function (todo) {
return React.DOM.li({onClick: this.handleClick}, this.props.todo.text)
},