Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added className and style props to all components #134

Closed
wants to merge 1 commit into from
Closed

Added className and style props to all components #134

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
25 changes: 16 additions & 9 deletions src/components/date.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,18 +18,25 @@ var FormattedDate = React.createClass({
},

propTypes: {
format: React.PropTypes.string,
value : React.PropTypes.any.isRequired
format : React.PropTypes.string,
value : React.PropTypes.any.isRequired,
className: React.PropTypes.string,
style : React.PropTypes.object
},

render: function () {
var props = this.props;
var value = props.value;
var format = props.format;
var defaults = format && this.getNamedFormat('date', format);
var options = FormattedDate.filterFormatOptions(props, defaults);

return React.DOM.span(null, this.formatDate(value, options));
var props = this.props;
var value = props.value;
var format = props.format;
var className = props.className;
var style = props.style;
var defaults = format && this.getNamedFormat('date', format);
var options = FormattedDate.filterFormatOptions(props, defaults);

return React.DOM.span({
className: className,
style : style
}, this.formatDate(value, options));
}
});

Expand Down
18 changes: 12 additions & 6 deletions src/components/html-message.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,22 @@ var FormattedHTMLMessage = React.createClass({
mixins : [IntlMixin],

propTypes: {
tagName: React.PropTypes.string,
message: React.PropTypes.string.isRequired
tagName : React.PropTypes.string,
message : React.PropTypes.string.isRequired,
className: React.PropTypes.string,
style : React.PropTypes.object
},

getDefaultProps: function () {
return {tagName: 'span'};
},

render: function () {
var props = this.props;
var tagName = props.tagName;
var message = props.message;
var props = this.props;
var tagName = props.tagName;
var message = props.message;
var className = props.className;
var style = props.style;

// Process all the props before they are used as values when formatting
// the ICU Message string. Since the formatted message will be injected
Expand Down Expand Up @@ -53,7 +57,9 @@ var FormattedHTMLMessage = React.createClass({
return React.DOM[tagName]({
dangerouslySetInnerHTML: {
__html: this.formatMessage(message, values)
}
},
className: className,
style : style
});
}
});
Expand Down
19 changes: 13 additions & 6 deletions src/components/message.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,22 @@ var FormattedMessage = React.createClass({
mixins : [IntlMixin],

propTypes: {
tagName: React.PropTypes.string,
message: React.PropTypes.string.isRequired
tagName : React.PropTypes.string,
message : React.PropTypes.string.isRequired,
className: React.PropTypes.string,
style : React.PropTypes.object
},

getDefaultProps: function () {
return {tagName: 'span'};
},

render: function () {
var props = this.props;
var tagName = props.tagName;
var message = props.message;
var props = this.props;
var tagName = props.tagName;
var message = props.message;
var className = props.className;
var style = props.style;

// Creates a token with a random guid that should not be guessable or
// conflict with other parts of the `message` string.
Expand Down Expand Up @@ -74,7 +78,10 @@ var FormattedMessage = React.createClass({
return elements[part] || part;
});

var elementArgs = [tagName, null].concat(children);
var elementArgs = [tagName, {
className: className,
style : style
}].concat(children);
return React.createElement.apply(null, elementArgs);
}
});
Expand Down
25 changes: 16 additions & 9 deletions src/components/number.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,18 +19,25 @@ var FormattedNumber = React.createClass({
},

propTypes: {
format: React.PropTypes.string,
value : React.PropTypes.any.isRequired
format : React.PropTypes.string,
value : React.PropTypes.any.isRequired,
className: React.PropTypes.string,
style : React.PropTypes.object
},

render: function () {
var props = this.props;
var value = props.value;
var format = props.format;
var defaults = format && this.getNamedFormat('number', format);
var options = FormattedNumber.filterFormatOptions(props, defaults);

return React.DOM.span(null, this.formatNumber(value, options));
var props = this.props;
var value = props.value;
var format = props.format;
var className = props.className;
var style = props.style;
var defaults = format && this.getNamedFormat('number', format);
var options = FormattedNumber.filterFormatOptions(props, defaults);

return React.DOM.span({
className: className,
style : style
}, this.formatNumber(value, options));
}
});

Expand Down
25 changes: 16 additions & 9 deletions src/components/relative.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,23 +16,30 @@ var FormattedRelative = React.createClass({
},

propTypes: {
format: React.PropTypes.string,
value : React.PropTypes.any.isRequired,
now : React.PropTypes.any
format : React.PropTypes.string,
value : React.PropTypes.any.isRequired,
now : React.PropTypes.any,
className: React.PropTypes.string,
style : React.PropTypes.object
},

render: function () {
var props = this.props;
var value = props.value;
var format = props.format;
var defaults = format && this.getNamedFormat('relative', format);
var options = FormattedRelative.filterFormatOptions(props, defaults);
var props = this.props;
var value = props.value;
var format = props.format;
var className = props.className;
var style = props.style;
var defaults = format && this.getNamedFormat('relative', format);
var options = FormattedRelative.filterFormatOptions(props, defaults);

var formattedRelativeTime = this.formatRelative(value, options, {
now: props.now
});

return React.DOM.span(null, formattedRelativeTime);
return React.DOM.span({
className: className,
style : style
}, formattedRelativeTime);
}
});

Expand Down
25 changes: 16 additions & 9 deletions src/components/time.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,18 +18,25 @@ var FormattedTime = React.createClass({
},

propTypes: {
format: React.PropTypes.string,
value : React.PropTypes.any.isRequired
format : React.PropTypes.string,
value : React.PropTypes.any.isRequired,
className: React.PropTypes.string,
style : React.PropTypes.object
},

render: function () {
var props = this.props;
var value = props.value;
var format = props.format;
var defaults = format && this.getNamedFormat('time', format);
var options = FormattedTime.filterFormatOptions(props, defaults);

return React.DOM.span(null, this.formatTime(value, options));
var props = this.props;
var value = props.value;
var format = props.format;
var className = props.className;
var style = props.style;
var defaults = format && this.getNamedFormat('time', format);
var options = FormattedTime.filterFormatOptions(props, defaults);

return React.DOM.span({
className: className,
style : style
}, this.formatTime(value, options));
}
});

Expand Down
55 changes: 55 additions & 0 deletions tests/smoke/smoke.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,19 @@ describe('React Intl', function () {
expect(testNode.firstChild.innerHTML).to.equal('$99.95');
});

it('Supports passing `className` and `style` to the FormattedNumber component', function () {
var testNode = document.getElementById('test1');

React.render(FormattedNumber({
locales: ['en-US'],
className: 'test-class',
style: {color: 'red'}
}), testNode);

expect(testNode.firstChild.className).to.equal('test-class');
expect(testNode.firstChild.style.color).to.equal('red');
});

it('Formats dates correctly', function () {
var FormattedDateComponent = React.createClass({
displayName: 'FormattedDate',
Expand Down Expand Up @@ -121,6 +134,20 @@ describe('React Intl', function () {
expect(testNode.firstChild.innerHTML).to.contain('Thursday');
});

it('Supports passing `className` and `style` to the FormattedDate component', function () {
var testNode = document.getElementById('test2');

React.render(FormattedDate({
locales: ['en-US'],
date: 0,
className: 'test-class',
style: {color: 'red'}
}), testNode);

expect(testNode.firstChild.className).to.equal('test-class');
expect(testNode.firstChild.style.color).to.equal('red');
});

it('Formats messages correctly', function () {
var FormattedMessageComponent = React.createClass({
displayName: 'FormattedMessage',
Expand Down Expand Up @@ -161,6 +188,20 @@ describe('React Intl', function () {
expect(testNode.firstChild.innerHTML).to.equal('You have one photo.');
});

it('Supports passing `className` and `style` to the FormattedMessage component', function () {
var testNode = document.getElementById('test3');

React.render(FormattedMessage({
locales: ['en-US'],
numPhotos: 1,
className: 'test-class',
style: {color: 'red'}
}), testNode);

expect(testNode.firstChild.className).to.equal('test-class');
expect(testNode.firstChild.style.color).to.equal('red');
});

it('Formats relative times correctly using FormattedRelative component', function () {
var testNode = document.getElementById('test4');

Expand All @@ -182,4 +223,18 @@ describe('React Intl', function () {
expect(testNode.firstChild.innerHTML).to.contain('in 2 seconds');
});

it('Supports passing `className` and `style` to the FormattedRelative component', function () {
var testNode = document.getElementById('test4');

React.render(FormattedRelative({
value: 2000,
now : 0,
className: 'test-class',
style: {color: 'red'}
}), testNode);

expect(testNode.firstChild.className).to.equal('test-class');
expect(testNode.firstChild.style.color).to.equal('red');
});

});