This repository has been archived by the owner on Aug 19, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 309
/
style.js
92 lines (74 loc) · 2.29 KB
/
style.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
var React = require('react');
var CSSPropertyOperations = require('react/lib/CSSPropertyOperations');
var reduce = require('lodash/collection/reduce');
var MatchMediaItem = require('../mixins/match-media-item');
function buildCssString (selector, rules) {
if (!selector || !rules) {
return;
}
return selector + '{' +
CSSPropertyOperations.createMarkupForStyles(rules) +
'}';
}
var Style = React.createClass({
mixins: [ MatchMediaItem ],
propTypes: {
scopeSelector: React.PropTypes.string,
rules: React.PropTypes.arrayOf(React.PropTypes.object)
},
getDefaultProps: function () {
return {
scopeSelector: ''
};
},
_buildStyles: function (stylesArr) {
var styles = reduce(stylesArr, function (accumulator, item) {
var selector = Object.keys(item)[0];
var rules = item[selector];
if (selector === 'mediaQueries') {
accumulator += this._buildMediaQueryString(rules);
} else {
var completeSelector = (this.props.scopeSelector ?
this.props.scopeSelector + ' ' :
'') +
selector;
accumulator += buildCssString(completeSelector, rules);
}
return accumulator;
}, '', this);
return styles;
},
_buildMediaQueryString: function (mediaQueryObj) {
var contextMediaQueries = this._getContextMediaQueries();
var mediaQueryString = '';
Object.keys(mediaQueryObj).forEach(function (query) {
var completeQuery = contextMediaQueries[query] ?
contextMediaQueries[query] :
query;
mediaQueryString += '@media ' + completeQuery + '{' +
this._buildStyles(mediaQueryObj[query]) +
'}';
}.bind(this));
return mediaQueryString;
},
_getContextMediaQueries: function () {
var contextMediaQueries = {};
if (this.context && this.context.mediaQueries) {
Object.keys(this.context.mediaQueries).forEach(function (query) {
contextMediaQueries[query] = this.context.mediaQueries[query].media;
}.bind(this));
}
return contextMediaQueries;
},
render: function () {
if (!this.props.rules) {
return null;
}
var styles = this._buildStyles(this.props.rules);
return React.createElement(
'style',
{dangerouslySetInnerHTML: {__html: styles}}
);
}
});
module.exports = Style;