Skip to content

Commit 250e129

Browse files
RickWongRickWong
committed
Proof of Concept, version 0.1.0
2 parents 0f1359d + d681228 commit 250e129

File tree

4 files changed

+233
-0
lines changed

4 files changed

+233
-0
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/.idea
2+

‎index.html‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>React Style component</title>
6+
7+
<!-- Simple page CSS (irrelevant). -->
8+
<style>
9+
html * {
10+
box-sizing: border-box;
11+
-webkit-font-smoothing: antialiased;
12+
}
13+
body {
14+
background: #eee;
15+
width: 400px;
16+
margin: 60px auto;
17+
font-family: monospace;
18+
}
19+
</style>
20+
21+
<!-- React + JSX. -->
22+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.10.0/react.min.js"></script>
23+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.10.0/JSXTransformer.js"></script>
24+
25+
<!-- React Style component! -->
26+
<script src="react-style-0.1.0.js"></script>
27+
28+
</head>
29+
<body>
30+
<div id="profile0"></div>
31+
<div id="profile1"></div>
32+
<div id="profile2"></div>
33+
<div id="profile3"></div>
34+
35+
<script type="text/jsx">
36+
/** @jsx React.DOM */
37+
38+
/*
39+
* Smallest component in this example, has a default style.
40+
*/
41+
var Profile = React.createClass({
42+
render: function () {
43+
return (
44+
<Style sheet="
45+
.card {
46+
cursor: pointer;
47+
margin: 15px;
48+
padding: 15px;
49+
text-align: center;
50+
height: 200px;
51+
}
52+
img {
53+
width: 130px;
54+
height: 130px;
55+
}
56+
p {
57+
margin: 10px;
58+
}
59+
">
60+
<div className="card">
61+
<img src="mao.jpg" />
62+
<p>{this.props.name || 'Default Mao'}</p>
63+
</div>
64+
</Style>
65+
);
66+
}
67+
});
68+
69+
/*
70+
* Facebook style.
71+
*/
72+
var FacebookProfile = React.createClass({
73+
render: function () {
74+
return (
75+
<Style sheet="
76+
.card {
77+
padding-top: 30px;
78+
border-radius: 3px;
79+
border: 1px solid rgb(208, 209, 213);
80+
border-left-color: rgb(223, 224, 228);
81+
border-right-color: rgb(223, 224, 228);
82+
border-top-color: rgb(229, 230, 233);
83+
background: linear-gradient(to bottom, rgba(255,255,255,1) 56%,rgba(204,204,204,1) 100%);
84+
}
85+
img {
86+
vertical-align: middle;
87+
padding: 4px;
88+
background: #fff;
89+
border: 1px solid #ccc;
90+
border-radius: 3px;
91+
}
92+
p {
93+
font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
94+
font-weight: bold;
95+
color: rgb(59, 89, 152);
96+
display: inline;
97+
}
98+
">
99+
<Profile name={this.props.name} />
100+
</Style>
101+
);
102+
}
103+
});
104+
105+
/*
106+
* Google style.
107+
*/
108+
var GoogleProfile = React.createClass({
109+
render: function () {
110+
return (
111+
<Style sheet="
112+
@import url(https://fonts.googleapis.com/css?family=Roboto);
113+
114+
.card {
115+
border-radius: 3px;
116+
background-color: #fff;
117+
box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);
118+
border: 1px solid #d8d8d8;
119+
border-bottom-width: 2px;
120+
border-top-width: 0;
121+
vertical-align: top;
122+
}
123+
img {
124+
vertical-align: middle;
125+
border-radius: 9999px;
126+
border: 0;
127+
padding: 0;
128+
margin-right: 3px;
129+
}
130+
p {
131+
font-family: Roboto, arial, sans-serif;
132+
color: rgb(38, 38, 38);
133+
display: block;
134+
}
135+
">
136+
<Profile name={this.props.name} />
137+
</Style>
138+
);
139+
}
140+
});
141+
142+
/*
143+
* Twitter style.
144+
*/
145+
var TwitterProfile = React.createClass({
146+
render: function () {
147+
return (
148+
<Style sheet="
149+
.card {
150+
border-radius: 5px;
151+
background-color: rgb(178, 223, 218);
152+
border: 1px solid #e1e8ed;
153+
padding: 0;
154+
}
155+
img {
156+
background: #fff;
157+
border: 6px solid #fff;
158+
border-radius: 6px;
159+
margin: 15px;
160+
box-shadow: rgba(136, 153, 166, 0.14902) 0px 1px 1px 0px;
161+
}
162+
p {
163+
font-family: 'Helvetica Neue', Helvetica, arial, sans-serif;
164+
color: #292f33;
165+
font-size: 18px;
166+
display: block;
167+
background: #f5f8fa;
168+
border-radius: 0 0 5px 5px;
169+
margin: 0;
170+
padding: 10px;
171+
bottom: 0;
172+
}
173+
">
174+
<Profile name={this.props.name} />
175+
</Style>
176+
);
177+
}
178+
});
179+
180+
React.renderComponent(<Profile />, document.getElementById('profile0'));
181+
React.renderComponent(<FacebookProfile name="Facebook Mao" />, document.getElementById('profile1'));
182+
React.renderComponent(<GoogleProfile name="Google Mao" />, document.getElementById('profile2'));
183+
React.renderComponent(<TwitterProfile name="Twitter Mao" />, document.getElementById('profile3'));
184+
</script>
185+
</body>
186+
</html>

‎mao.jpg‎

170 KB
Loading

‎react-style-0.1.0.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/*!
2+
* React Style component 0.1.0
3+
* https://github.com/RickWong/ReactStyle
4+
*
5+
* Copyright 2014 Rick Wong
6+
* Released under the MIT license
7+
*/
8+
(function (root, factory) {
9+
if (typeof define === 'function' && define.amd) {
10+
define(['react'], factory);
11+
} else if (typeof exports === 'object') {
12+
module.exports = factory(require('react'));
13+
} else {
14+
root.Style = factory(root.React);
15+
}
16+
}(this, function (React) {
17+
return React.createClass({
18+
displayName: 'Style',
19+
componentWillMount: function () {
20+
this.props.namespace = "Style-" + Math.random().toString(36).substring(9);
21+
this.props.sheet = this.props.sheet
22+
23+
// Put all CSS-properties at start of new line.
24+
.replace(/([a-z0-9\-_]+\s*:)(?!\/\/)/ig, '\n $1')
25+
26+
// Prettier output.
27+
.replace(/}\s*/ig, '\n}\n')
28+
29+
// Regular rules are namespaced.
30+
.replace(/(^|}|;)\s*([a-z0-9\-_\.:#\(\)]+\s*{)/ig, '$1\n.' + this.props.namespace + ' $2');
31+
},
32+
render: function () {
33+
return React.DOM.div({
34+
className: this.props.namespace
35+
},
36+
this.props.children,
37+
React.DOM.style({
38+
dangerouslySetInnerHTML: {
39+
__html: this.props.sheet
40+
}
41+
})
42+
);
43+
}
44+
});
45+
}));

0 commit comments

Comments
 (0)