Skip to content

Commit 8447590

Browse files
oliviertassinarioliviertassinari
committed
[Style] Add a withWidth HOC
1 parent ae2a236 commit 8447590

17 files changed

Lines changed: 497 additions & 209 deletions

‎docs/src/app/components/FullWidthSection.js‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, {createClass, PropTypes} from 'react';
22
import ClearFix from 'material-ui/internal/ClearFix';
33
import spacing from 'material-ui/styles/spacing';
4-
import styleResizable from 'material-ui/utils/styleResizable';
4+
import withWidth, {SMALL, LARGE} from 'material-ui/utils/withWidth';
55
const desktopGutter = spacing.desktopGutter;
66

77
const FullWidthSection = createClass({
@@ -12,12 +12,9 @@ const FullWidthSection = createClass({
1212
contentType: PropTypes.string,
1313
style: PropTypes.object,
1414
useContent: PropTypes.bool,
15+
width: PropTypes.number.isRequired,
1516
},
1617

17-
mixins: [
18-
styleResizable,
19-
],
20-
2118
getDefaultProps() {
2219
return {
2320
useContent: false,
@@ -52,6 +49,7 @@ const FullWidthSection = createClass({
5249
useContent,
5350
contentType,
5451
contentStyle,
52+
width,
5553
...other,
5654
} = this.props;
5755

@@ -75,13 +73,13 @@ const FullWidthSection = createClass({
7573
style={Object.assign(
7674
styles.root,
7775
style,
78-
this.isDeviceSize(styleResizable.statics.Sizes.SMALL) && styles.rootWhenSmall,
79-
this.isDeviceSize(styleResizable.statics.Sizes.LARGE) && styles.rootWhenLarge)}
76+
width === SMALL && styles.rootWhenSmall,
77+
width === LARGE && styles.rootWhenLarge)}
8078
>
8179
{content}
8280
</ClearFix>
8381
);
8482
},
8583
});
8684

87-
export default FullWidthSection;
85+
export default withWidth()(FullWidthSection);

‎docs/src/app/components/Master.js‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ import Title from 'react-title-component';
33
import AppBar from 'material-ui/AppBar';
44
import IconButton from 'material-ui/IconButton';
55
import spacing from 'material-ui/styles/spacing';
6-
import styleResizable from 'material-ui/utils/styleResizable';
76
import getMuiTheme from 'material-ui/styles/getMuiTheme';
87
import {darkWhite, lightWhite, grey900} from 'material-ui/styles/colors';
98
import AppNavDrawer from './AppNavDrawer';
109
import FullWidthSection from './FullWidthSection';
10+
import withWidth, {MEDIUM, LARGE} from 'material-ui/utils/withWidth';
1111

1212
const githubButton = (
1313
<IconButton
@@ -22,6 +22,7 @@ const Master = createClass({
2222
propTypes: {
2323
children: PropTypes.node,
2424
location: PropTypes.object,
25+
width: PropTypes.number.isRequired,
2526
},
2627

2728
contextTypes: {
@@ -32,10 +33,6 @@ const Master = createClass({
3233
muiTheme: PropTypes.object,
3334
},
3435

35-
mixins: [
36-
styleResizable,
37-
],
38-
3936
getInitialState() {
4037
return {
4138
muiTheme: getMuiTheme(),
@@ -98,8 +95,7 @@ const Master = createClass({
9895
},
9996
};
10097

101-
if (this.isDeviceSize(styleResizable.statics.Sizes.MEDIUM) ||
102-
this.isDeviceSize(styleResizable.statics.Sizes.LARGE)) {
98+
if (this.props.width === MEDIUM || this.props.width === LARGE) {
10399
styles.content = Object.assign(styles.content, styles.contentWhenMedium);
104100
}
105101

@@ -156,7 +152,7 @@ const Master = createClass({
156152
let docked = false;
157153
let showMenuIconButton = true;
158154

159-
if (this.isDeviceSize(styleResizable.statics.Sizes.LARGE) && title !== '') {
155+
if (this.props.width === LARGE && title !== '') {
160156
docked = true;
161157
navDrawerOpen = true;
162158
showMenuIconButton = false;
@@ -223,4 +219,4 @@ const Master = createClass({
223219
},
224220
});
225221

226-
export default Master;
222+
export default withWidth()(Master);

‎docs/src/app/components/pages/Home.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,22 @@ import React, {createClass, PropTypes} from 'react';
22
import HomeFeature from './HomeFeature';
33
import FullWidthSection from '../FullWidthSection';
44
import RaisedButton from 'material-ui/RaisedButton';
5-
import styleResizable from 'material-ui/utils/styleResizable';
5+
import withWidth, {LARGE} from 'material-ui/utils/withWidth';
66
import spacing from 'material-ui/styles/spacing';
77
import typography from 'material-ui/styles/typography';
88
import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
99
import {cyan500, grey200, darkWhite} from 'material-ui/styles/colors';
1010

1111
const HomePage = createClass({
1212

13+
propTypes: {
14+
width: PropTypes.number.isRequired,
15+
},
16+
1317
contextTypes: {
1418
router: PropTypes.object.isRequired,
1519
},
1620

17-
mixins: [
18-
styleResizable,
19-
],
20-
2121
homePageHero() {
2222
const styles = {
2323
root: {
@@ -73,7 +73,7 @@ const HomePage = createClass({
7373

7474
styles.h2 = Object.assign({}, styles.h1, styles.h2);
7575

76-
if (this.isDeviceSize(styleResizable.statics.Sizes.LARGE)) {
76+
if (this.props.width === LARGE) {
7777
styles.tagline = Object.assign({}, styles.tagline, styles.taglineWhenLarge);
7878
styles.h1 = Object.assign({}, styles.h1, styles.h1WhenLarge);
7979
styles.h2 = Object.assign({}, styles.h2, styles.h2WhenLarge);
@@ -221,4 +221,4 @@ const HomePage = createClass({
221221

222222
});
223223

224-
export default HomePage;
224+
export default withWidth()(HomePage);

‎docs/src/app/components/pages/HomeFeature.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, {createClass, PropTypes} from 'react';
22
import {Link} from 'react-router';
3-
import styleResizable from 'material-ui/utils/styleResizable';
3+
import withWidth, {MEDIUM, LARGE} from 'material-ui/utils/withWidth';
44
import spacing from 'material-ui/styles/spacing';
55
import transitions from 'material-ui/styles/transitions';
66
import typography from 'material-ui/styles/typography';
@@ -15,10 +15,9 @@ const HomeFeature = createClass({
1515
img: PropTypes.string,
1616
lastChild: PropTypes.bool,
1717
route: PropTypes.string,
18+
width: PropTypes.number.isRequired,
1819
},
1920

20-
mixins: [styleResizable],
21-
2221
getDefaultProps() {
2322
return {
2423
firstChild: false,
@@ -76,8 +75,7 @@ const HomeFeature = createClass({
7675
},
7776
};
7877

79-
if (this.isDeviceSize(styleResizable.statics.Sizes.MEDIUM) ||
80-
this.isDeviceSize(styleResizable.statics.Sizes.LARGE)) {
78+
if (this.props.width === MEDIUM || this.props.width === LARGE) {
8179
styles.root = Object.assign(
8280
styles.root,
8381
styles.rootWhenMedium,
@@ -124,4 +122,4 @@ const HomeFeature = createClass({
124122

125123
});
126124

127-
export default HomeFeature;
125+
export default withWidth()(HomeFeature);

‎docs/src/app/components/pages/customization/Colors.js‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
1-
import React, {createClass} from 'react';
1+
import React, {createClass, PropTypes} from 'react';
22
import Title from 'react-title-component';
3-
import styleResizable from 'material-ui/utils/styleResizable';
3+
import withWidth, {MEDIUM, LARGE} from 'material-ui/utils/withWidth';
44
import ClearFix from 'material-ui/internal/ClearFix';
55
import {getContrastRatio} from 'material-ui/utils/colorManipulator';
66
import typography from 'material-ui/styles/typography';
77
import * as colors from 'material-ui/styles/colors';
88

99
const ColorsPage = createClass({
10-
11-
mixins: [
12-
styleResizable,
13-
],
10+
propTypes: {
11+
width: PropTypes.number.isRequired,
12+
},
1413

1514
getStyles() {
1615
const styles = {
@@ -54,9 +53,9 @@ const ColorsPage = createClass({
5453
},
5554
};
5655

57-
if (this.isDeviceSize(styleResizable.statics.Sizes.LARGE)) {
56+
if (this.props.width === LARGE) {
5857
styles.colorGroup = Object.assign(styles.colorGroup, styles.colorGroupWhenLarge);
59-
} else if (this.isDeviceSize(styleResizable.statics.Sizes.MEDIUM)) {
58+
} else if (this.props.width === MEDIUM) {
6059
styles.colorGroup = Object.assign(styles.colorGroup, styles.colorGroupWhenMedium);
6160
} else {
6261
styles.colorGroup = Object.assign(styles.colorGroup, styles.colorGroupWhenSmall);
@@ -175,4 +174,4 @@ const ColorsPage = createClass({
175174

176175
});
177176

178-
export default ColorsPage;
177+
export default withWidth()(ColorsPage);

‎docs/src/app/components/pages/customization/Themes.js‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Title from 'react-title-component';
33
import MarkdownElement from '../../MarkdownElement';
44
import muiThemeable from 'material-ui/styles/muiThemeable';
55
import getMuiTheme from 'material-ui/styles/getMuiTheme';
6-
import styleResizable from 'material-ui/utils/styleResizable';
6+
import withWidth, {MEDIUM} from 'material-ui/utils/withWidth';
77
import typography from 'material-ui/styles/typography';
88
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
99
import themesText from './themes.md';
@@ -44,10 +44,9 @@ const ThemesPage = createClass({
4444
propTypes: {
4545
muiTheme: PropTypes.object,
4646
onChangeMuiTheme: PropTypes.func,
47+
width: PropTypes.number.isRequired,
4748
},
4849

49-
mixins: [styleResizable],
50-
5150
getInitialState() {
5251
return {
5352
valueTabs: this.props.muiTheme.name || 'light',
@@ -113,7 +112,7 @@ const ThemesPage = createClass({
113112
},
114113
};
115114

116-
if (this.isDeviceSize(styleResizable.statics.Sizes.MEDIUM)) {
115+
if (this.props.width === MEDIUM) {
117116
styles.group.width = '33%';
118117
}
119118

@@ -369,4 +368,4 @@ const ThemesPage = createClass({
369368

370369
});
371370

372-
export default muiThemeable()(ThemesPage);
371+
export default muiThemeable()(withWidth()(ThemesPage));

0 commit comments

Comments
 (0)
⚡