Skip to content

Commit

Permalink
[Style] Add a withWidth HOC
Browse files Browse the repository at this point in the history
  • Loading branch information
@oliviertassinari
oliviertassinari committed May 1, 2016
1 parent ae2a236 commit 8447590
Show file tree
Hide file tree
Showing 17 changed files with 497 additions and 209 deletions.
14 changes: 6 additions & 8 deletions docs/src/app/components/FullWidthSection.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, {createClass, PropTypes} from 'react';
import ClearFix from 'material-ui/internal/ClearFix';
import spacing from 'material-ui/styles/spacing';
import styleResizable from 'material-ui/utils/styleResizable';
import withWidth, {SMALL, LARGE} from 'material-ui/utils/withWidth';
const desktopGutter = spacing.desktopGutter;

const FullWidthSection = createClass({
Expand All @@ -12,12 +12,9 @@ const FullWidthSection = createClass({
contentType: PropTypes.string,
style: PropTypes.object,
useContent: PropTypes.bool,
width: PropTypes.number.isRequired,
},

mixins: [
styleResizable,
],

getDefaultProps() {
return {
useContent: false,
Expand Down Expand Up @@ -52,6 +49,7 @@ const FullWidthSection = createClass({
useContent,
contentType,
contentStyle,
width,
...other,
} = this.props;

Expand All @@ -75,13 +73,13 @@ const FullWidthSection = createClass({
style={Object.assign(
styles.root,
style,
this.isDeviceSize(styleResizable.statics.Sizes.SMALL) && styles.rootWhenSmall,
this.isDeviceSize(styleResizable.statics.Sizes.LARGE) && styles.rootWhenLarge)}
width === SMALL && styles.rootWhenSmall,
width === LARGE && styles.rootWhenLarge)}
>
{content}
</ClearFix>
);
},
});

export default FullWidthSection;
export default withWidth()(FullWidthSection);
14 changes: 5 additions & 9 deletions docs/src/app/components/Master.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@ import Title from 'react-title-component';
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import spacing from 'material-ui/styles/spacing';
import styleResizable from 'material-ui/utils/styleResizable';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import {darkWhite, lightWhite, grey900} from 'material-ui/styles/colors';
import AppNavDrawer from './AppNavDrawer';
import FullWidthSection from './FullWidthSection';
import withWidth, {MEDIUM, LARGE} from 'material-ui/utils/withWidth';

const githubButton = (
<IconButton
Expand All @@ -22,6 +22,7 @@ const Master = createClass({
propTypes: {
children: PropTypes.node,
location: PropTypes.object,
width: PropTypes.number.isRequired,
},

contextTypes: {
Expand All @@ -32,10 +33,6 @@ const Master = createClass({
muiTheme: PropTypes.object,
},

mixins: [
styleResizable,
],

getInitialState() {
return {
muiTheme: getMuiTheme(),
Expand Down Expand Up @@ -98,8 +95,7 @@ const Master = createClass({
},
};

if (this.isDeviceSize(styleResizable.statics.Sizes.MEDIUM) ||
this.isDeviceSize(styleResizable.statics.Sizes.LARGE)) {
if (this.props.width === MEDIUM || this.props.width === LARGE) {
styles.content = Object.assign(styles.content, styles.contentWhenMedium);
}

Expand Down Expand Up @@ -156,7 +152,7 @@ const Master = createClass({
let docked = false;
let showMenuIconButton = true;

if (this.isDeviceSize(styleResizable.statics.Sizes.LARGE) && title !== '') {
if (this.props.width === LARGE && title !== '') {
docked = true;
navDrawerOpen = true;
showMenuIconButton = false;
Expand Down Expand Up @@ -223,4 +219,4 @@ const Master = createClass({
},
});

export default Master;
export default withWidth()(Master);
14 changes: 7 additions & 7 deletions docs/src/app/components/pages/Home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,22 @@ import React, {createClass, PropTypes} from 'react';
import HomeFeature from './HomeFeature';
import FullWidthSection from '../FullWidthSection';
import RaisedButton from 'material-ui/RaisedButton';
import styleResizable from 'material-ui/utils/styleResizable';
import withWidth, {LARGE} from 'material-ui/utils/withWidth';
import spacing from 'material-ui/styles/spacing';
import typography from 'material-ui/styles/typography';
import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import {cyan500, grey200, darkWhite} from 'material-ui/styles/colors';

const HomePage = createClass({

propTypes: {
width: PropTypes.number.isRequired,
},

contextTypes: {
router: PropTypes.object.isRequired,
},

mixins: [
styleResizable,
],

homePageHero() {
const styles = {
root: {
Expand Down Expand Up @@ -73,7 +73,7 @@ const HomePage = createClass({

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

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

});

export default HomePage;
export default withWidth()(HomePage);
10 changes: 4 additions & 6 deletions docs/src/app/components/pages/HomeFeature.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, {createClass, PropTypes} from 'react';
import {Link} from 'react-router';
import styleResizable from 'material-ui/utils/styleResizable';
import withWidth, {MEDIUM, LARGE} from 'material-ui/utils/withWidth';
import spacing from 'material-ui/styles/spacing';
import transitions from 'material-ui/styles/transitions';
import typography from 'material-ui/styles/typography';
Expand All @@ -15,10 +15,9 @@ const HomeFeature = createClass({
img: PropTypes.string,
lastChild: PropTypes.bool,
route: PropTypes.string,
width: PropTypes.number.isRequired,
},

mixins: [styleResizable],

getDefaultProps() {
return {
firstChild: false,
Expand Down Expand Up @@ -76,8 +75,7 @@ const HomeFeature = createClass({
},
};

if (this.isDeviceSize(styleResizable.statics.Sizes.MEDIUM) ||
this.isDeviceSize(styleResizable.statics.Sizes.LARGE)) {
if (this.props.width === MEDIUM || this.props.width === LARGE) {
styles.root = Object.assign(
styles.root,
styles.rootWhenMedium,
Expand Down Expand Up @@ -124,4 +122,4 @@ const HomeFeature = createClass({

});

export default HomeFeature;
export default withWidth()(HomeFeature);
17 changes: 8 additions & 9 deletions docs/src/app/components/pages/customization/Colors.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
import React, {createClass} from 'react';
import React, {createClass, PropTypes} from 'react';
import Title from 'react-title-component';
import styleResizable from 'material-ui/utils/styleResizable';
import withWidth, {MEDIUM, LARGE} from 'material-ui/utils/withWidth';
import ClearFix from 'material-ui/internal/ClearFix';
import {getContrastRatio} from 'material-ui/utils/colorManipulator';
import typography from 'material-ui/styles/typography';
import * as colors from 'material-ui/styles/colors';

const ColorsPage = createClass({

mixins: [
styleResizable,
],
propTypes: {
width: PropTypes.number.isRequired,
},

getStyles() {
const styles = {
Expand Down Expand Up @@ -54,9 +53,9 @@ const ColorsPage = createClass({
},
};

if (this.isDeviceSize(styleResizable.statics.Sizes.LARGE)) {
if (this.props.width === LARGE) {
styles.colorGroup = Object.assign(styles.colorGroup, styles.colorGroupWhenLarge);
} else if (this.isDeviceSize(styleResizable.statics.Sizes.MEDIUM)) {
} else if (this.props.width === MEDIUM) {
styles.colorGroup = Object.assign(styles.colorGroup, styles.colorGroupWhenMedium);
} else {
styles.colorGroup = Object.assign(styles.colorGroup, styles.colorGroupWhenSmall);
Expand Down Expand Up @@ -175,4 +174,4 @@ const ColorsPage = createClass({

});

export default ColorsPage;
export default withWidth()(ColorsPage);
9 changes: 4 additions & 5 deletions docs/src/app/components/pages/customization/Themes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Title from 'react-title-component';
import MarkdownElement from '../../MarkdownElement';
import muiThemeable from 'material-ui/styles/muiThemeable';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import styleResizable from 'material-ui/utils/styleResizable';
import withWidth, {MEDIUM} from 'material-ui/utils/withWidth';
import typography from 'material-ui/styles/typography';
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
import themesText from './themes.md';
Expand Down Expand Up @@ -44,10 +44,9 @@ const ThemesPage = createClass({
propTypes: {
muiTheme: PropTypes.object,
onChangeMuiTheme: PropTypes.func,
width: PropTypes.number.isRequired,
},

mixins: [styleResizable],

getInitialState() {
return {
valueTabs: this.props.muiTheme.name || 'light',
Expand Down Expand Up @@ -113,7 +112,7 @@ const ThemesPage = createClass({
},
};

if (this.isDeviceSize(styleResizable.statics.Sizes.MEDIUM)) {
if (this.props.width === MEDIUM) {
styles.group.width = '33%';
}

Expand Down Expand Up @@ -369,4 +368,4 @@ const ThemesPage = createClass({

});

export default muiThemeable()(ThemesPage);
export default muiThemeable()(withWidth()(ThemesPage));
Loading

4 comments on commit 8447590

@kerwynrg
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is it duplicated in styles and utils? Which one will stay?

@newoga
Copy link
Contributor

@newoga newoga commented on 8447590 May 3, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kerwynrg Thanks for pointing that out. The /styles one should not be there. That being said, in case you were wondering, don't rely on this component. It's considered internal and we can't provide guarantees that it won't be moved or removed. If you're looking for an HoC like it, feel free to copy the implementation and use it in your projects.

@newoga
Copy link
Contributor

@newoga newoga commented on 8447590 May 3, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kerwynrg Looks like this commit is old anyhow, they're both not in master, so this should be fine.

@oliviertassinari
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The commit history isn't has clean as I would like it to be. The internal withWidth HoC was remove from the styles folder in an other commit.

Please sign in to comment.