Skip to content

Commit 451d8d9

Browse files
kenwheelerkenwheeler
committed
Full conversion to Radium
1 parent afc4cfb commit 451d8d9

File tree

14 files changed

+79
-43
lines changed

14 files changed

+79
-43
lines changed

‎presentation/deck.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,12 +67,12 @@ export default class extends React.Component {
6767
<Heading caps fit>Flexible Layouts</Heading>
6868
<Layout>
6969
<Fill>
70-
<Heading size={4} caps textColor="black" bgColor="white" padding={10}>
70+
<Heading size={4} caps textColor="black" bgColor="white" margin={10}>
7171
Left
7272
</Heading>
7373
</Fill>
7474
<Fill>
75-
<Heading size={4} caps textColor="black" bgColor="white" padding={10}>
75+
<Heading size={4} caps textColor="black" bgColor="white" margin={10}>
7676
Right
7777
</Heading>
7878
</Fill>

‎src/base.jsx‎

Lines changed: 38 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,19 @@ class Base extends React.Component {
88
getStyles() {
99
let styles = {};
1010
if (this.props.italic) {
11-
styles = assign(styles, {fontStyle: 'italic'});
11+
styles.fontStyle = 'italic';
1212
}
1313
if (this.props.bold) {
14-
styles = assign(styles, {fontWeight: 'bold'});
14+
styles.fontWeight = 'bold';
1515
}
1616
if (this.props.caps) {
17-
styles = assign(styles, {textTransform: 'uppercase'});
17+
styles.textTransform = 'uppercase';
1818
}
1919
if (this.props.margin) {
20-
styles = assign(styles, {margin: this.props.margin});
20+
styles.margin = this.props.margin;
2121
}
2222
if (this.props.padding) {
23-
styles = assign(styles, {margin: this.props.padding});
23+
styles.padding = this.props.padding;
2424
}
2525
if (this.props.textColor) {
2626
let color = "";
@@ -29,16 +29,22 @@ class Base extends React.Component {
2929
} else {
3030
color = this.context.styles.colors[this.props.textColor]
3131
}
32-
styles = assign(styles, {color: color});
32+
styles.color = color;
3333
}
3434
if (this.props.textFont) {
35-
styles = assign(styles, {fontFamily: this.context.styles.fonts[this.props.textFont]});
35+
let font = "";
36+
if (!this.context.styles.fonts.hasOwnProperty(this.props.textFont)) {
37+
font = this.props.textFont
38+
} else {
39+
font = this.context.styles.fonts[this.props.textFont]
40+
}
41+
styles.fontFamily = font;
3642
}
3743
if (this.props.textSize) {
38-
styles = assign(styles, {fontSize: this.props.textSize});
44+
styles.fontSize = this.props.textSize;
3945
}
4046
if (this.props.textAlign) {
41-
styles = assign(styles, {textAlign: this.props.textAlign});
47+
styles.textAlign = this.props.textAlign;
4248
}
4349
if (this.props.bgColor) {
4450
let color = "";
@@ -47,14 +53,14 @@ class Base extends React.Component {
4753
} else {
4854
color = this.context.styles.colors[this.props.bgColor]
4955
}
50-
styles = assign(styles, {backgroundColor: color});
56+
styles.backgroundColor = color;
5157
}
5258
if (this.props.bgImage) {
53-
styles = assign(styles, {backgroundImage:
59+
styles.backgroundImage =
5460
'linear-gradient( rgba(0, 0, 0, ' + this.props.bgDarken +
5561
'), rgba(0, 0, 0, ' + this.props.bgDarken +
56-
') ), url(' + this.props.bgImage + ')'});
57-
styles = assign(styles, {backgroundSize: 'cover'});
62+
') ), url(' + this.props.bgImage + ')';
63+
styles.backgroundSize = 'cover';
5864
}
5965
return styles;
6066
}
@@ -79,19 +85,19 @@ Base.Mixin = {
7985
getStyles() {
8086
let styles = {};
8187
if (this.props.italic) {
82-
styles = assign(styles, {fontStyle: 'italic'});
88+
styles.fontStyle = 'italic';
8389
}
8490
if (this.props.bold) {
85-
styles = assign(styles, {fontWeight: 'bold'});
91+
styles.fontWeight = 'bold';
8692
}
8793
if (this.props.caps) {
88-
styles = assign(styles, {textTransform: 'uppercase'});
94+
styles.textTransform = 'uppercase';
8995
}
9096
if (this.props.margin) {
91-
styles = assign(styles, {margin: this.props.margin});
97+
styles.margin = this.props.margin;
9298
}
9399
if (this.props.padding) {
94-
styles = assign(styles, {margin: this.props.padding});
100+
styles.padding = this.props.padding;
95101
}
96102
if (this.props.textColor) {
97103
let color = "";
@@ -100,16 +106,22 @@ Base.Mixin = {
100106
} else {
101107
color = this.context.styles.colors[this.props.textColor]
102108
}
103-
styles = assign(styles, {color: color});
109+
styles.color = color;
104110
}
105111
if (this.props.textFont) {
106-
styles = assign(styles, {fontFamily: this.context.styles.fonts[this.props.textFont]});
112+
let font = "";
113+
if (!this.context.styles.fonts.hasOwnProperty(this.props.textFont)) {
114+
font = this.props.textFont
115+
} else {
116+
font = this.context.styles.colors[this.props.textFont]
117+
}
118+
styles.fontFamily = font;
107119
}
108120
if (this.props.textSize) {
109-
styles = assign(styles, {fontSize: this.props.textSize});
121+
styles.fontSize = this.props.textSize;
110122
}
111123
if (this.props.textAlign) {
112-
styles = assign(styles, {textAlign: this.props.textAlign});
124+
styles.textAlign = this.props.textAlign;
113125
}
114126
if (this.props.bgColor) {
115127
let color = "";
@@ -118,14 +130,14 @@ Base.Mixin = {
118130
} else {
119131
color = this.context.styles.colors[this.props.bgColor]
120132
}
121-
styles = assign(styles, {backgroundColor: color});
133+
styles.backgroundColor = color;
122134
}
123135
if (this.props.bgImage) {
124-
styles = assign(styles, {backgroundImage:
136+
styles.backgroundImage =
125137
'linear-gradient( rgba(0, 0, 0, ' + this.props.bgDarken +
126138
'), rgba(0, 0, 0, ' + this.props.bgDarken +
127-
') ), url(' + this.props.bgImage + ')'});
128-
styles = assign(styles, {backgroundSize: 'cover'});
139+
') ), url(' + this.props.bgImage + ')';
140+
styles.backgroundSize = 'cover';
129141
}
130142
return styles;
131143
}

‎src/block-quote.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import React from 'react/addons';
22
import assign from 'object-assign';
33
import Base from './base';
4+
import Radium from 'radium';
45

6+
@Radium
57
class BlockQuote extends Base {
68
render() {
79
return (
8-
<blockquote style={assign({}, this.context.styles.components.blockquote, this.getStyles())}>
10+
<blockquote style={[this.context.styles.components.blockquote, this.getStyles()]}>
911
{this.props.children}
1012
</blockquote>
1113
)

‎src/cite.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import React from 'react/addons';
22
import assign from 'object-assign';
33
import Base from './base';
4+
import Radium from 'radium';
45

6+
@Radium
57
class Cite extends Base {
68
render() {
79
return (
8-
<cite style={assign({}, this.context.styles.components.cite, this.getStyles())}>
10+
<cite style={[this.context.styles.components.cite, this.getStyles()]}>
911
- {this.props.children}
1012
</cite>
1113
)

‎src/code-pane.jsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@ import React from 'react/addons';
22
import assign from 'object-assign';
33
import highlight from 'highlight.js';
44
import Base from './base';
5+
import Radium from 'radium';
56

7+
@Radium
68
class CodePane extends Base {
79
createMarkup() {
810
let markup = highlight.highlight(this.props.lang, this.props.source);
@@ -12,10 +14,10 @@ class CodePane extends Base {
1214
}
1315
render() {
1416
return (
15-
<pre style={assign({}, this.context.styles.components.codePane.pre, this.getStyles())}>
17+
<pre style={[this.context.styles.components.codePane.pre, this.getStyles()]}>
1618
<code
1719
className="hljs"
18-
style={assign({}, this.context.styles.components.codePane.code)}
20+
style={this.context.styles.components.codePane.code}
1921
dangerouslySetInnerHTML={this.createMarkup()}/>
2022
</pre>
2123
)

‎src/code.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import React from 'react/addons';
22
import assign from 'object-assign';
33
import Base from './base';
4+
import Radium from 'radium';
45

6+
@Radium
57
class Code extends Base {
68
render() {
79
return (
8-
<code style={assign({}, this.context.styles.components.code, this.getStyles())}>
10+
<code style={[this.context.styles.components.code, this.getStyles()]}>
911
{this.props.children}
1012
</code>
1113
)

‎src/heading.jsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import React from 'react/addons';
22
import assign from 'object-assign';
33
import Base from './base';
4+
import Radium from 'radium';
45

6+
@Radium
57
class Heading extends Base {
68
constructor(props) {
79
super(props);
@@ -54,7 +56,7 @@ class Heading extends Base {
5456
}
5557
};
5658
return this.props.fit
57-
? <div style={assign({}, this.context.styles.components.heading["h" + this.props.size], this.getStyles())}>
59+
? <div style={[this.context.styles.components.heading["h" + this.props.size], this.getStyles()]}>
5860
<svg {...this.props}
5961
viewBox={viewBox}
6062
style={styles.svg}>
@@ -68,7 +70,7 @@ class Heading extends Base {
6870
</svg>
6971
</div>
7072
: React.createElement(Tag, {
71-
style: assign({}, this.context.styles.components.heading["h" + this.props.size], this.getStyles())
73+
style: [this.context.styles.components.heading["h" + this.props.size], this.getStyles()]
7274
}, this.props.children)
7375
}
7476
}

‎src/image.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import React from 'react/addons';
22
import assign from 'object-assign';
33
import Base from './base';
4+
import Radium from 'radium';
45

6+
@Radium
57
class Image extends Base {
68
render() {
79
let styles = {
@@ -10,7 +12,7 @@ class Image extends Base {
1012
display: this.props.display || ""
1113
};
1214
return (
13-
<img src={this.props.src} style={assign({}, this.context.styles.components.image, this.getStyles(), styles)}/>
15+
<img src={this.props.src} style={[this.context.styles.components.image, this.getStyles()]} />
1416
);
1517
}
1618
}

‎src/link.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import React from 'react/addons';
22
import assign from 'object-assign';
33
import Base from './base';
4+
import Radium from 'radium';
45

6+
@Radium
57
class Link extends Base {
68
render() {
79
return (
8-
<a href={this.props.href} style={assign({}, this.context.styles.components.link, this.getStyles())}>
10+
<a href={this.props.href} style={[this.context.styles.components.link, this.getStyles()]}>
911
{this.props.children}
1012
</a>
1113
)

‎src/list-item.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import React from 'react/addons';
22
import assign from 'object-assign';
33
import Base from './base';
4+
import Radium from 'radium';
45

6+
@Radium
57
class ListItem extends Base {
68
render() {
79
return (
8-
<li style={assign({}, this.context.styles.components.listItem, this.getStyles())}>
10+
<li style={[this.context.styles.components.listItem, this.getStyles()]}>
911
{this.props.children}
1012
</li>
1113
)

0 commit comments

Comments
 (0)