diff --git a/.eslintrc.js b/.eslintrc.js index 115eb00fbe24ac..afbb2c26965e5d 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -110,7 +110,7 @@ module.exports = { 'react/no-unknown-property': 'error', 'react/no-is-mounted': 'error', 'react/prefer-arrow-callback': 'off', // Wishlist, one day - 'react/prefer-es6-class': 'off', // Wishlist, one day + 'react/prefer-es6-class': 'error', 'react/prop-types': 'error', 'react/react-in-jsx-scope': 'error', 'react/require-extension': 'error', diff --git a/docs/package.json b/docs/package.json index 2d83d554a66fc5..435b8fe2791811 100644 --- a/docs/package.json +++ b/docs/package.json @@ -29,7 +29,7 @@ "doctrine": "^1.1.0", "eslint": "^2.5.1", "eslint-plugin-babel": "^3.1.0", - "eslint-plugin-react": "^4.0.0", + "eslint-plugin-react": "^5.0.1", "highlight.js": "^9.0.0", "history": "^2.0.0", "html-webpack-plugin": "^2.8.1", @@ -39,7 +39,6 @@ "marked": "^0.3.5", "raw-loader": "^0.5.1", "react-addons-perf": "^15.0.1", - "react-addons-pure-render-mixin": "^15.0.1", "react-docgen": "^2.4.0", "react-hot-loader": "^1.2.8", "react-motion": "^0.4.2", diff --git a/docs/src/app/components/AppNavDrawer.js b/docs/src/app/components/AppNavDrawer.js index 3b0e71933c7025..4c1b3ae127909a 100644 --- a/docs/src/app/components/AppNavDrawer.js +++ b/docs/src/app/components/AppNavDrawer.js @@ -1,4 +1,4 @@ -import React, {createClass, PropTypes} from 'react'; +import React, {Component, PropTypes} from 'react'; import Drawer from 'material-ui/Drawer'; import {List, ListItem, MakeSelectable} from 'material-ui/List'; import Divider from 'material-ui/Divider'; @@ -10,29 +10,43 @@ import {cyan500} from 'material-ui/styles/colors'; const SelectableList = MakeSelectable(List); -const AppNavDrawer = createClass({ +const styles = { + logo: { + cursor: 'pointer', + fontSize: 24, + color: typography.textFullWhite, + lineHeight: `${spacing.desktopKeylineIncrement}px`, + fontWeight: typography.fontWeightLight, + backgroundColor: cyan500, + paddingLeft: spacing.desktopGutter, + marginBottom: 8, + }, + version: { + paddingLeft: spacing.desktopGutterLess, + fontSize: 16, + }, +}; - propTypes: { +class AppNavDrawer extends Component { + static propTypes = { docked: PropTypes.bool.isRequired, location: PropTypes.object.isRequired, onChangeList: PropTypes.func.isRequired, onRequestChangeNavDrawer: PropTypes.func.isRequired, open: PropTypes.bool.isRequired, style: PropTypes.object, - }, + }; - contextTypes: { + static contextTypes = { muiTheme: PropTypes.object.isRequired, router: PropTypes.object.isRequired, - }, + }; - getInitialState: () => { - return ({ - muiVersions: [], - }); - }, + state = { + muiVersions: [], + }; - componentDidMount: function() { + componentDidMount() { const self = this; const url = '/versions.json'; const request = new XMLHttpRequest(); @@ -48,9 +62,9 @@ const AppNavDrawer = createClass({ request.open('GET', url, true); request.send(); - }, + } - firstNonPreReleaseVersion: function() { + firstNonPreReleaseVersion() { let version; for (let i = 0; i < this.state.muiVersions.length; i++) { version = this.state.muiVersions[i]; @@ -60,50 +74,33 @@ const AppNavDrawer = createClass({ } } return version; - }, + } - handleVersionChange: function(event, index, value) { + handleVersionChange = (event, index, value) => { if (value === this.firstNonPreReleaseVersion()) { window.location = 'http://www.material-ui.com/'; } else { window.location = `http://www.material-ui.com/${value}`; } - }, + }; - currentVersion: function() { + currentVersion() { if (window.location.hostname === 'localhost') return this.state.muiVersions[0]; if (window.location.pathname === '/') { return this.firstNonPreReleaseVersion(); } else { return window.location.pathname.replace(/\//g, ''); } - }, + } - handleRequestChangeLink(event, value) { + handleRequestChangeLink = (event, value) => { window.location = value; - }, + }; - handleTouchTapHeader() { + handleTouchTapHeader = () => { this.context.router.push('/'); this.props.onRequestChangeNavDrawer(false); - }, - - styles: { - logo: { - cursor: 'pointer', - fontSize: 24, - color: typography.textFullWhite, - lineHeight: `${spacing.desktopKeylineIncrement}px`, - fontWeight: typography.fontWeightLight, - backgroundColor: cyan500, - paddingLeft: spacing.desktopGutter, - marginBottom: 8, - }, - version: { - paddingLeft: spacing.desktopGutterLess, - fontSize: 16, - }, - }, + }; render() { const { @@ -123,10 +120,10 @@ const AppNavDrawer = createClass({ onRequestChange={onRequestChangeNavDrawer} containerStyle={{zIndex: zIndex.navDrawer - 100}} > -
+
Material-UI
- Version: + Version: ); - }, -}); + } +} export default AppNavDrawer; diff --git a/docs/src/app/components/CodeExample/CodeBlock.js b/docs/src/app/components/CodeExample/CodeBlock.js index 337c17758bcd21..9331ff3cdbfff6 100644 --- a/docs/src/app/components/CodeExample/CodeBlock.js +++ b/docs/src/app/components/CodeExample/CodeBlock.js @@ -1,6 +1,5 @@ -import React, {createClass, PropTypes} from 'react'; +import React, {Component, PropTypes} from 'react'; import MarkdownElement from '../MarkdownElement'; -import PureRenderMixin from 'react-addons-pure-render-mixin'; import transitions from 'material-ui/styles/transitions'; import CodeBlockTitle from './CodeBlockTitle'; @@ -31,25 +30,23 @@ const styles = { }, }; -const CodeBlock = createClass({ - propTypes: { +class CodeBlock extends Component { + static propTypes = { children: PropTypes.string, description: PropTypes.string, title: PropTypes.string, - }, - mixins: [ - PureRenderMixin, - ], - getInitialState: function() { - return { - expand: false, - }; - }, - handleTouchTap() { + }; + + state = { + expand: false, + }; + + handleTouchTap = () => { this.setState({ expand: !this.state.expand, }); - }, + }; + render() { const text = `\`\`\`js ${this.props.children} @@ -73,7 +70,7 @@ ${this.props.children}
); - }, -}); + } +} export default CodeBlock; diff --git a/docs/src/app/components/ComponentDoc.js b/docs/src/app/components/ComponentDoc.js deleted file mode 100644 index b75c36648b92fa..00000000000000 --- a/docs/src/app/components/ComponentDoc.js +++ /dev/null @@ -1,114 +0,0 @@ -import React, {createClass, PropTypes} from 'react'; -import {ClearFix} from 'material-ui'; -import ComponentInfo from './ComponentInfo'; -import typography from 'styles/typography'; - -const ComponentDoc = createClass({ - - propTypes: { - children: PropTypes.node, - componentInfo: PropTypes.array.isRequired, - desc: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.element, - ]), - name: PropTypes.string.isRequired, - }, - - contextTypes: { - muiTheme: PropTypes.object, - }, - - getStyles() { - const borderColor = this.context.muiTheme.rawTheme.palette.borderColor; - return { - desc: { - borderBottom: `solid 1px ${borderColor}`, - paddingTop: 8, - paddingBottom: 40, - marginBottom: 24, - fontSize: 15, - letterSpacing: '0', - lineHeight: '24px', - color: typography.textDarkBlack, - }, - ol: { - fontSize: 13, - paddingLeft: 48, - }, - componentInfo: { - borderTop: `solid 1px ${borderColor}`, - paddingTop: 24, - marginTop: 24, - }, - componentInfoWhenFirstChild: { - borderTop: 'none', - marginTop: '0', - paddingTop: '0', - }, - headline: { - // headline - fontSize: 24, - lineHeight: '32px', - paddingTop: 16, - marginBottom: 12, - letterSpacing: '0', - fontWeight: typography.fontWeightNormal, - color: typography.textDarkBlack, - }, - }; - }, - - render() { - const { - prepareStyles, - } = this.context.muiTheme; - - const styles = this.getStyles(); - - const componentInfo = this.props.componentInfo.map(function(info, i) { - let infoStyle = styles.componentInfo; - if (i === 0) infoStyle = Object.assign({}, infoStyle, styles.componentInfoWhenFirstChild); - return ( - - ); - }, this); - - let desc = null; - - if (this.props.desc) { - if ((typeof this.props.desc) === 'string') { - desc =

{this.props.desc}

; - } else { - desc =
{this.props.desc}
; - } - } - - let header; - if (this.props.name.length > 0) { - header =

{this.props.name}

; - } - - return ( - - {header} - {this.props.children} - - {desc} - -
- {componentInfo} -
- - - ); - }, - -}); - -export default ComponentDoc; diff --git a/docs/src/app/components/ComponentInfo.js b/docs/src/app/components/ComponentInfo.js deleted file mode 100644 index a388393ed48ccd..00000000000000 --- a/docs/src/app/components/ComponentInfo.js +++ /dev/null @@ -1,156 +0,0 @@ -import React, {createClass, PropTypes} from 'react'; -import {Mixins, Styles} from 'material-ui'; - -const {StyleResizable} = Mixins; -const {typography, spacing} = Styles; - -const ComponentInfo = createClass({ - - propTypes: { - infoArray: PropTypes.array.isRequired, - name: PropTypes.string.isRequired, - style: PropTypes.object, - }, - - contextTypes: { - muiTheme: PropTypes.object, - }, - - mixins: [StyleResizable], - - getStyles() { - const desktopGutter = spacing.desktopGutter; - const borderColor = this.context.muiTheme.rawTheme.palette.borderColor; - const styles = { - root: { - fontSize: 15, - letterSpacing: '0', - fontWeight: typography.fontWeightNormal, - lineHeight: '24px', - paddingTop: 3, - marginBottom: 13, - color: typography.textDarkBlack, - width: '100%', - }, - table: { - borderCollapse: 'collapse', - borderSpacing: '0', - }, - td: { - padding: '16px 0', - verticalAlign: 'top', - }, - name: { - position: 'absolute', - fontWeight: typography.fontWeightMedium, - }, - type: { - color: typography.textLightBlack, - paddingRight: desktopGutter, - }, - header: { - paddingTop: '0', - }, - desc: { - width: '100%', - paddingTop: 48, - borderBottom: `1px solid ${borderColor}`, - }, - p: { - margin: '0', - }, - h3: { - fontSize: 20, - lineHeight: '28px', - paddingTop: 19, - marginBottom: 13, - letterSpacing: '0', - fontWeight: typography.fontWeightMedium, - color: typography.textDarkBlack, - }, - nameWhenMedium: { - position: 'inherit', - paddingRight: desktopGutter, - }, - descWhenMedium: { - paddingTop: 16, - }, - tdWhenLarge: { - padding: '32px 0', - }, - nameWhenLarge: { - minWidth: 128, - }, - descWhenLarge: { - paddingTop: 32, - }, - descWhenLastChild: { - borderBottom: 'none', - }, - }; - - styles.header = Object.assign(styles.root, styles.header); - - if (this.isDeviceSize(StyleResizable.statics.Sizes.MEDIUM)) { - styles.name = Object.assign({}, styles.name, styles.nameWhenMedium); - styles.desc = Object.assign({}, styles.desc, styles.descWhenMedium); - } - - if (this.isDeviceSize(StyleResizable.statics.Sizes.LARGE)) { - styles.td = Object.assign({}, styles.td, styles.tdWhenLarge); - styles.name = Object.assign({}, styles.name, styles.nameWhenLarge); - styles.desc = Object.assign({}, styles.desc, styles.descWhenLarge); - } - - styles.name = Object.assign({}, styles.td, styles.name); - styles.desc = Object.assign({}, styles.td, styles.desc); - styles.header = Object.assign({}, styles.p, styles.header); - - Object.keys(styles).forEach(function(currentKey) { - styles[currentKey].boxSizing = 'border-box'; - }); - - return styles; - }, - - render() { - const { - prepareStyles, - } = this.context.muiTheme; - - const propElements = []; - let typesSpan; - - const styles = this.getStyles(); - this.props.infoArray.forEach(function(info, i) { - if (info.type) typesSpan = {info.type}; - - if (i === this.props.infoArray.length - 1) { - styles.desc = Object.assign({}, styles.desc, styles.descWhenLastChild); - } - - propElements.push( - - {info.name} - -

{typesSpan}{info.header}

-

{info.desc}

- - - ); - }, this); - - return ( -
-

{this.props.name}

- - - {propElements} - -
-
- ); - }, -}); - -export default ComponentInfo; diff --git a/docs/src/app/components/FullWidthSection.js b/docs/src/app/components/FullWidthSection.js index 52b31dc345ff69..bdf065be9c0c14 100644 --- a/docs/src/app/components/FullWidthSection.js +++ b/docs/src/app/components/FullWidthSection.js @@ -1,29 +1,25 @@ -import React, {createClass, PropTypes} from 'react'; +import React, {Component, 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({ +class FullWidthSection extends Component { - propTypes: { + static propTypes = { children: PropTypes.node, contentStyle: PropTypes.object, contentType: PropTypes.string, style: PropTypes.object, useContent: PropTypes.bool, - }, - - mixins: [ - styleResizable, - ], + width: PropTypes.number.isRequired, + }; - getDefaultProps() { - return { - useContent: false, - contentType: 'div', - }; - }, + static defaultProps = { + useContent: false, + contentType: 'div', + }; getStyles() { return { @@ -44,7 +40,7 @@ const FullWidthSection = createClass({ paddingBottom: desktopGutter * 3, }, }; - }, + } render() { const { @@ -52,6 +48,7 @@ const FullWidthSection = createClass({ useContent, contentType, contentStyle, + width, ...other, } = this.props; @@ -75,13 +72,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} ); - }, -}); + } +} -export default FullWidthSection; +export default withWidth()(FullWidthSection); diff --git a/docs/src/app/components/MarkdownElement.js b/docs/src/app/components/MarkdownElement.js index 0a9603cfe8cb86..4665b9e894e0dc 100644 --- a/docs/src/app/components/MarkdownElement.js +++ b/docs/src/app/components/MarkdownElement.js @@ -1,6 +1,5 @@ -import React, {createClass, PropTypes} from 'react'; +import React, {Component, PropTypes} from 'react'; import marked from 'marked'; -import PureRenderMixin from 'react-addons-pure-render-mixin'; require('./mui-github-markdown.css'); @@ -12,19 +11,16 @@ const styles = { }, }; -const MarkdownElement = createClass({ - propTypes: { +class MarkdownElement extends Component { + + static propTypes = { style: PropTypes.object, - text: PropTypes.string, - }, - mixins: [ - PureRenderMixin, - ], - getDefaultProps() { - return { - text: '', - }; - }, + text: PropTypes.string.isRequired, + }; + + static defaultProps = { + text: '', + }; componentWillMount() { marked.setOptions({ @@ -39,7 +35,7 @@ const MarkdownElement = createClass({ return require('highlight.js').highlight(lang, code).value; }, }); - }, + } render() { const { @@ -47,7 +43,7 @@ const MarkdownElement = createClass({ text, } = this.props; -/* eslint-disable */ + /* eslint-disable react/no-danger */ return (
); -/* eslint-enable */ - }, -}); + /* eslint-enable */ + } +} export default MarkdownElement; diff --git a/docs/src/app/components/Master.js b/docs/src/app/components/Master.js index 71d4abb1b43f93..8d3f54721e6db2 100644 --- a/docs/src/app/components/Master.js +++ b/docs/src/app/components/Master.js @@ -1,66 +1,51 @@ -import React, {createClass, PropTypes} from 'react'; +import React, {Component, PropTypes} from 'react'; 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 = ( - -); - -const Master = createClass({ - - propTypes: { +class Master extends Component { + static propTypes = { children: PropTypes.node, location: PropTypes.object, - }, + width: PropTypes.number.isRequired, + }; - contextTypes: { + static contextTypes = { router: PropTypes.object.isRequired, - }, + }; - childContextTypes: { + static childContextTypes = { muiTheme: PropTypes.object, - }, + }; - mixins: [ - styleResizable, - ], - - getInitialState() { - return { - muiTheme: getMuiTheme(), - navDrawerOpen: false, - }; - }, + state = { + navDrawerOpen: false, + }; getChildContext() { return { muiTheme: this.state.muiTheme, }; - }, + } componentWillMount() { this.setState({ - muiTheme: this.state.muiTheme, + muiTheme: getMuiTheme(), }); - }, + } componentWillReceiveProps(nextProps, nextContext) { const newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; this.setState({ muiTheme: newMuiTheme, }); - }, + } getStyles() { const styles = { @@ -98,38 +83,37 @@ 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); } return styles; - }, + } - handleTouchTapLeftIconButton() { + handleTouchTapLeftIconButton = () => { this.setState({ navDrawerOpen: !this.state.navDrawerOpen, }); - }, + }; - handleChangeRequestNavDrawer(open) { + handleChangeRequestNavDrawer = (open) => { this.setState({ navDrawerOpen: open, }); - }, + }; - handleChangeList(event, value) { + handleChangeList = (event, value) => { this.context.router.push(value); this.setState({ navDrawerOpen: false, }); - }, + }; - handleChangeMuiTheme(muiTheme) { + handleChangeMuiTheme = (muiTheme) => { this.setState({ muiTheme: muiTheme, }); - }, + }; render() { const { @@ -156,7 +140,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; @@ -175,7 +159,13 @@ const Master = createClass({ onLeftIconButtonTouchTap={this.handleTouchTapLeftIconButton} title={title} zDepth={0} - iconElementRight={githubButton} + iconElementRight={ + + } style={styles.appBar} showMenuIconButton={showMenuIconButton} /> @@ -220,7 +210,7 @@ const Master = createClass({
); - }, -}); + } +} -export default Master; +export default withWidth()(Master); diff --git a/docs/src/app/components/MobileTearSheet.js b/docs/src/app/components/MobileTearSheet.js index 5bf0793edd9726..faeefbde522acf 100644 --- a/docs/src/app/components/MobileTearSheet.js +++ b/docs/src/app/components/MobileTearSheet.js @@ -1,21 +1,19 @@ -import React, {createClass, PropTypes} from 'react'; +import React, {Component, PropTypes} from 'react'; -const MobileTearSheet = createClass({ +class MobileTearSheet extends Component { - propTypes: { + static propTypes = { children: PropTypes.node, - height: PropTypes.number, - }, + height: PropTypes.number.isRequired, + }; - contextTypes: { - muiTheme: PropTypes.object, - }, + static defaultProps = { + height: 500, + }; - getDefaultProps() { - return { - height: 500, - }; - }, + static contextTypes = { + muiTheme: PropTypes.object.isRequired, + }; render() { const { @@ -51,8 +49,7 @@ const MobileTearSheet = createClass({ ); - }, - -}); + } +} export default MobileTearSheet; diff --git a/docs/src/app/components/PropTypeDescription.js b/docs/src/app/components/PropTypeDescription.js index ec78a71bdc69d0..3b52c6669ba609 100644 --- a/docs/src/app/components/PropTypeDescription.js +++ b/docs/src/app/components/PropTypeDescription.js @@ -1,7 +1,6 @@ -import React, {createClass, PropTypes} from 'react'; +import React, {Component, PropTypes} from 'react'; import {parse} from 'react-docgen'; import {parse as parseDoctrine} from 'doctrine'; -import PureRenderMixin from 'react-addons-pure-render-mixin'; import MarkdownElement from './MarkdownElement'; import recast from 'recast'; @@ -101,19 +100,17 @@ function generateDescription(required, description, type) { return `${deprecated} ${jsDocText}${signature}`; } -const PropTypeDescription = createClass({ - propTypes: { +class PropTypeDescription extends Component { + + static propTypes = { code: PropTypes.string, - header: PropTypes.string, - }, - mixins: [ - PureRenderMixin, - ], - getDefaultProps() { - return { - header: '### Properties', - }; - }, + header: PropTypes.string.isRequired, + }; + + static defaultProps = { + header: '### Properties', + }; + render() { const { code, @@ -165,7 +162,7 @@ const PropTypeDescription = createClass({
{requiredPropFootnote}
); - }, -}); + } +} export default PropTypeDescription; diff --git a/docs/src/app/components/pages/Home.js b/docs/src/app/components/pages/Home.js index 9cb114587d8979..790ee4a0ad6ed2 100644 --- a/docs/src/app/components/pages/Home.js +++ b/docs/src/app/components/pages/Home.js @@ -1,22 +1,22 @@ -import React, {createClass, PropTypes} from 'react'; +import React, {Component, 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({ +class HomePage extends Component { - contextTypes: { - router: PropTypes.object.isRequired, - }, + static propTypes = { + width: PropTypes.number.isRequired, + }; - mixins: [ - styleResizable, - ], + static contextTypes = { + router: PropTypes.object.isRequired, + }; homePageHero() { const styles = { @@ -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); @@ -100,7 +100,7 @@ const HomePage = createClass({ ); - }, + } homePurpose() { const styles = { @@ -138,7 +138,7 @@ const HomePage = createClass({ and making it better in the coming months. ); - }, + } homeFeatures() { const styles = {maxWidth: 906}; @@ -164,7 +164,7 @@ const HomePage = createClass({ /> ); - }, + } homeContribute() { const styles = { @@ -198,11 +198,11 @@ const HomePage = createClass({ /> ); - }, + } - handleTouchTapDemo() { + handleTouchTapDemo = () => { this.context.router.push('/components'); - }, + }; render() { const style = { @@ -217,8 +217,7 @@ const HomePage = createClass({ {this.homeContribute()} ); - }, - -}); + } +} -export default HomePage; +export default withWidth()(HomePage); diff --git a/docs/src/app/components/pages/HomeFeature.js b/docs/src/app/components/pages/HomeFeature.js index f029da56f2b74b..682248d7dfba1e 100644 --- a/docs/src/app/components/pages/HomeFeature.js +++ b/docs/src/app/components/pages/HomeFeature.js @@ -1,36 +1,31 @@ -import React, {createClass, PropTypes} from 'react'; +import React, {Component, 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'; import {grey200} from 'material-ui/styles/colors'; import Paper from 'material-ui/Paper'; -const HomeFeature = createClass({ +class HomeFeature extends Component { - propTypes: { + static propTypes = { firstChild: PropTypes.bool, heading: PropTypes.string, img: PropTypes.string, lastChild: PropTypes.bool, route: PropTypes.string, - }, + width: PropTypes.number.isRequired, + }; - mixins: [styleResizable], + static defaultProps = { + firstChild: false, + lastChild: false, + }; - getDefaultProps() { - return { - firstChild: false, - lastChild: false, - }; - }, - - getInitialState() { - return { - zDepth: 0, - }; - }, + state = { + zDepth: 0, + }; getStyles() { const desktopGutter = spacing.desktopGutter; @@ -76,8 +71,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, @@ -87,19 +81,19 @@ const HomeFeature = createClass({ } return styles; - }, + } - handleMouseEnter() { + handleMouseEnter = () => { this.setState({ zDepth: 4, }); - }, + }; - handleMouseLeave() { + handleMouseLeave = () => { this.setState({ zDepth: 0, }); - }, + }; render() { const styles = this.getStyles(); @@ -120,8 +114,7 @@ const HomeFeature = createClass({ ); - }, - -}); + } +} -export default HomeFeature; +export default withWidth()(HomeFeature); diff --git a/docs/src/app/components/pages/components/AppBar/Page.js b/docs/src/app/components/pages/components/AppBar/Page.js index 7fe7502e2442b4..01100ddf523902 100644 --- a/docs/src/app/components/pages/components/AppBar/Page.js +++ b/docs/src/app/components/pages/components/AppBar/Page.js @@ -12,7 +12,7 @@ import AppBarExampleIconButton from './ExampleIconButton'; import appBarExampleIconButtonCode from '!raw!./ExampleIconButton'; import AppBarExampleIconMenu from './ExampleIconMenu'; import appBarExampleIconMenuCode from '!raw!./ExampleIconMenu'; -import appBarCode from '!raw!material-ui/lib/AppBar/AppBar'; +import appBarCode from '!raw!material-ui/AppBar/AppBar'; const descriptions = { icon: 'A simple example of `AppBar` with an icon on the right. ' + diff --git a/docs/src/app/components/pages/components/AutoComplete/Page.js b/docs/src/app/components/pages/components/AutoComplete/Page.js index 4fe1d66fa7a7fd..2afeec5d0c41c3 100644 --- a/docs/src/app/components/pages/components/AutoComplete/Page.js +++ b/docs/src/app/components/pages/components/AutoComplete/Page.js @@ -6,7 +6,7 @@ import PropTypeDescription from '../../../PropTypeDescription'; import MarkdownElement from '../../../MarkdownElement'; import autoCompleteReadmeText from './README'; -import autoCompleteCode from '!raw!material-ui/lib/AutoComplete/AutoComplete'; +import autoCompleteCode from '!raw!material-ui/AutoComplete/AutoComplete'; import AutoCompleteExampleSimple from './ExampleSimple'; import autoCompleteExampleSimpleCode from '!raw!./ExampleSimple'; import AutoCompleteExampleDataSources from './ExampleDataSources'; diff --git a/docs/src/app/components/pages/components/Avatar/Page.js b/docs/src/app/components/pages/components/Avatar/Page.js index b79ba04b10df7e..2c96e2fce9f1e2 100644 --- a/docs/src/app/components/pages/components/Avatar/Page.js +++ b/docs/src/app/components/pages/components/Avatar/Page.js @@ -8,7 +8,7 @@ import MarkdownElement from '../../../MarkdownElement'; import avatarReadmeText from './README'; import AvatarExampleSimple from './ExampleSimple'; import avatarExampleSimpleCode from '!raw!./ExampleSimple'; -import avatarCode from '!raw!material-ui/lib/Avatar/Avatar'; +import avatarCode from '!raw!material-ui/Avatar/Avatar'; const description = 'Examples of `Avatar` using an image, [Font Icon](/#/components/font-icon), ' + '[SVG Icon](/#/components/svg-icon) and "Letter" (string), with and without custom colors.'; diff --git a/docs/src/app/components/pages/components/Badge/Page.js b/docs/src/app/components/pages/components/Badge/Page.js index 2c2e4353dce0c2..9c53cadf230b2b 100644 --- a/docs/src/app/components/pages/components/Badge/Page.js +++ b/docs/src/app/components/pages/components/Badge/Page.js @@ -10,7 +10,7 @@ import BadgeExampleSimple from './ExampleSimple'; import badgeExampleSimpleCode from '!raw!./ExampleSimple'; import BadgeExampleContent from './ExampleContent'; import badgeExampleContentCode from '!raw!./ExampleContent'; -import badgeCode from '!raw!material-ui/lib/Badge/Badge'; +import badgeCode from '!raw!material-ui/Badge/Badge'; const descriptions = { simple: 'Two examples of badges containing text, using primary and secondary colors. ' + diff --git a/docs/src/app/components/pages/components/Card/Page.js b/docs/src/app/components/pages/components/Card/Page.js index af27af75d7bd51..e467bbc1ae2f36 100644 --- a/docs/src/app/components/pages/components/Card/Page.js +++ b/docs/src/app/components/pages/components/Card/Page.js @@ -13,12 +13,12 @@ import CardExampleWithoutAvatar from './ExampleWithoutAvatar'; import cardExampleControlledCode from '!raw!./ExampleControlled'; import CardExampleControlled from './ExampleControlled'; -import cardCode from '!raw!material-ui/lib/Card/Card'; -import cardActionsCode from '!raw!material-ui/lib/Card/CardActions'; -import cardHeaderCode from '!raw!material-ui/lib/Card/CardHeader'; -import cardMediaCode from '!raw!material-ui/lib/Card/CardMedia'; -import cardTextCode from '!raw!material-ui/lib/Card/CardText'; -import cardTitleCode from '!raw!material-ui/lib/Card/CardTitle'; +import cardCode from '!raw!material-ui/Card/Card'; +import cardActionsCode from '!raw!material-ui/Card/CardActions'; +import cardHeaderCode from '!raw!material-ui/Card/CardHeader'; +import cardMediaCode from '!raw!material-ui/Card/CardMedia'; +import cardTextCode from '!raw!material-ui/Card/CardText'; +import cardTitleCode from '!raw!material-ui/Card/CardTitle'; const descriptions = { avatar: 'A `Card` containing each of the card components: `CardHeader` (with avatar), `CardMedia` (with overlay), ' + diff --git a/docs/src/app/components/pages/components/Checkbox/Page.js b/docs/src/app/components/pages/components/Checkbox/Page.js index 895338ad504bf6..775dbc87bac937 100644 --- a/docs/src/app/components/pages/components/Checkbox/Page.js +++ b/docs/src/app/components/pages/components/Checkbox/Page.js @@ -6,7 +6,7 @@ import PropTypeDescription from '../../../PropTypeDescription'; import MarkdownElement from '../../../MarkdownElement'; import checkboxReadmeText from './README'; -import checkboxCode from '!raw!material-ui/lib/Checkbox/Checkbox'; +import checkboxCode from '!raw!material-ui/Checkbox/Checkbox'; import CheckboxExampleSimple from './ExampleSimple'; import checkboxExampleSimpleCode from '!raw!./ExampleSimple'; diff --git a/docs/src/app/components/pages/components/CircularProgress/Page.js b/docs/src/app/components/pages/components/CircularProgress/Page.js index 2ae34dee0ea3ea..044acf73df7cf0 100644 --- a/docs/src/app/components/pages/components/CircularProgress/Page.js +++ b/docs/src/app/components/pages/components/CircularProgress/Page.js @@ -6,7 +6,7 @@ import PropTypeDescription from '../../../PropTypeDescription'; import MarkdownElement from '../../../MarkdownElement'; import circleProgressReadmeText from './README'; -import circleProgressCode from '!raw!material-ui/lib/CircularProgress/CircularProgress'; +import circleProgressCode from '!raw!material-ui/CircularProgress/CircularProgress'; import CircleProgressExampleSimple from './ExampleSimple'; import circleProgressExampleSimpleCode from '!raw!./ExampleSimple'; import CircleProgressExampleDeterminate from './ExampleDeterminate'; diff --git a/docs/src/app/components/pages/components/DatePicker/Page.js b/docs/src/app/components/pages/components/DatePicker/Page.js index b696f5d13ddafd..51a28f0824e1d9 100644 --- a/docs/src/app/components/pages/components/DatePicker/Page.js +++ b/docs/src/app/components/pages/components/DatePicker/Page.js @@ -18,7 +18,7 @@ import DatePickerExampleDisableDates from './ExampleDisableDates'; import datePickerExampleDisableDatesCode from '!raw!./ExampleDisableDates'; import DatePickerExampleInternational from './ExampleInternational'; import datePickerExampleInternationalCode from '!raw!./ExampleInternational'; -import datePickerCode from '!raw!material-ui/lib/DatePicker/DatePicker'; +import datePickerCode from '!raw!material-ui/DatePicker/DatePicker'; const descriptions = { simple: 'The Date Picker defaults to a portrait dialog. The `mode` property can be set to `landscape`. You can ' + diff --git a/docs/src/app/components/pages/components/Dialog/Page.js b/docs/src/app/components/pages/components/Dialog/Page.js index 32d6844ef80517..94ea2c09ac106c 100644 --- a/docs/src/app/components/pages/components/Dialog/Page.js +++ b/docs/src/app/components/pages/components/Dialog/Page.js @@ -18,7 +18,7 @@ import DialogExampleScrollable from './ExampleScrollable'; import DialogExampleScrollableCode from '!raw!./ExampleScrollable'; import DialogExampleAlert from './ExampleAlert'; import DialogExampleAlertCode from '!raw!./ExampleAlert'; -import dialogCode from '!raw!material-ui/lib/Dialog/Dialog'; +import dialogCode from '!raw!material-ui/Dialog/Dialog'; const DialogPage = () => (
diff --git a/docs/src/app/components/pages/components/Divider/Page.js b/docs/src/app/components/pages/components/Divider/Page.js index 26aec67d81e2c0..95fc5a8062f742 100644 --- a/docs/src/app/components/pages/components/Divider/Page.js +++ b/docs/src/app/components/pages/components/Divider/Page.js @@ -12,7 +12,7 @@ import DividerExampleList from './ExampleList'; import dividerExampleListCode from '!raw!./ExampleList'; import DividerExampleMenu from './ExampleMenu'; import dividerExampleMenuCode from '!raw!./ExampleMenu'; -import dividerCode from '!raw!material-ui/lib/Divider/Divider'; +import dividerCode from '!raw!material-ui/Divider/Divider'; const descriptions = { simple: 'Here, `Divider` is used to separate [TextField](/#/components/text-field) components. ' + diff --git a/docs/src/app/components/pages/components/Drawer/Page.js b/docs/src/app/components/pages/components/Drawer/Page.js index 56220cf1755828..594ddecfdf06fc 100644 --- a/docs/src/app/components/pages/components/Drawer/Page.js +++ b/docs/src/app/components/pages/components/Drawer/Page.js @@ -12,7 +12,7 @@ import DrawerUndockedExample from './ExampleUndocked'; import drawerUndockedExampleCode from '!raw!./ExampleUndocked'; import DrawerOpenSecondaryExample from './ExampleOpenSecondary'; import drawerOpenSecondaryExampleCode from '!raw!./ExampleOpenSecondary'; -import drawerCode from '!raw!material-ui/lib/Drawer/Drawer'; +import drawerCode from '!raw!material-ui/Drawer/Drawer'; const descriptions = { simple: 'A simple controlled `Drawer`. The Drawer is `docked` by default, ' + diff --git a/docs/src/app/components/pages/components/DropDownMenu/Page.js b/docs/src/app/components/pages/components/DropDownMenu/Page.js index 2befddfae825ee..f6f5a6f9bf91b8 100644 --- a/docs/src/app/components/pages/components/DropDownMenu/Page.js +++ b/docs/src/app/components/pages/components/DropDownMenu/Page.js @@ -14,7 +14,7 @@ import DropDownMenuLongMenuExample from './ExampleLongMenu'; import dropDownMenuLongMenuExampleCode from '!raw!./ExampleLongMenu'; import DropDownMenuLabeledExample from './ExampleLabeled'; import dropDownMenuLabeledExampleCode from '!raw!./ExampleLabeled'; -import dropDownMenuCode from '!raw!material-ui/lib/DropDownMenu/DropDownMenu'; +import dropDownMenuCode from '!raw!material-ui/DropDownMenu/DropDownMenu'; const descriptions = { simple: '`DropDownMenu` is implemented as a controlled component, with the current selection set through the ' + diff --git a/docs/src/app/components/pages/components/FlatButton/Page.js b/docs/src/app/components/pages/components/FlatButton/Page.js index 49415393e2724c..d1d9b6f305aa4d 100644 --- a/docs/src/app/components/pages/components/FlatButton/Page.js +++ b/docs/src/app/components/pages/components/FlatButton/Page.js @@ -12,7 +12,7 @@ import flatButtonExampleComplexCode from '!raw!./ExampleComplex'; import FlatButtonExampleComplex from './ExampleComplex'; import flatButtonExampleIconCode from '!raw!./ExampleIcon'; import FlatButtonExampleIcon from './ExampleIcon'; -import flatButtonCode from '!raw!material-ui/lib/FlatButton/FlatButton'; +import flatButtonCode from '!raw!material-ui/FlatButton/FlatButton'; const descriptions = { simple: '`FlatButton` with default color, `primary`, `secondary` and and `disabled` props applied.', diff --git a/docs/src/app/components/pages/components/FloatingActionButton/Page.js b/docs/src/app/components/pages/components/FloatingActionButton/Page.js index 7ac9065aa92c9d..a42a50b6c99d0e 100644 --- a/docs/src/app/components/pages/components/FloatingActionButton/Page.js +++ b/docs/src/app/components/pages/components/FloatingActionButton/Page.js @@ -8,7 +8,7 @@ import MarkdownElement from '../../../MarkdownElement'; import floatingButtonReadmeText from './README'; import floatingButtonExampleSimpleCode from '!raw!./ExampleSimple'; import FloatingButtonExampleSimple from './ExampleSimple'; -import floatingButtonCode from '!raw!material-ui/lib/FloatingActionButton/FloatingActionButton'; +import floatingButtonCode from '!raw!material-ui/FloatingActionButton/FloatingActionButton'; const descriptions = { simple: 'Default size and `mini` FABs, in primary (default), `secondary` and `disabled` colors.', diff --git a/docs/src/app/components/pages/components/FontIcon/Page.js b/docs/src/app/components/pages/components/FontIcon/Page.js index 06de100874f3ce..a389413c100394 100644 --- a/docs/src/app/components/pages/components/FontIcon/Page.js +++ b/docs/src/app/components/pages/components/FontIcon/Page.js @@ -5,7 +5,7 @@ import CodeExample from '../../../CodeExample'; import PropTypeDescription from '../../../PropTypeDescription'; import MarkdownElement from '../../../MarkdownElement'; -import iconCode from '!raw!material-ui/lib/FontIcon/FontIcon'; +import iconCode from '!raw!material-ui/FontIcon/FontIcon'; import iconReadmeText from './README'; import IconExampleSimple from './ExampleSimple'; import iconExampleSimpleCode from '!raw!./ExampleSimple'; diff --git a/docs/src/app/components/pages/components/GridList/Page.js b/docs/src/app/components/pages/components/GridList/Page.js index d2f7b1406465b2..0506a65f712189 100644 --- a/docs/src/app/components/pages/components/GridList/Page.js +++ b/docs/src/app/components/pages/components/GridList/Page.js @@ -10,8 +10,8 @@ import gridListExampleSimpleCode from '!raw!./ExampleSimple'; import GridListExampleSimple from './ExampleSimple'; import gridListExampleComplexCode from '!raw!./ExampleComplex'; import GridListExampleComplex from './ExampleComplex'; -import gridListCode from '!raw!material-ui/lib/GridList/GridList'; -import gridTileCode from '!raw!material-ui/lib/GridList/GridTile'; +import gridListCode from '!raw!material-ui/GridList/GridList'; +import gridTileCode from '!raw!material-ui/GridList/GridTile'; const descriptions = { simple: 'A simple example of a scrollable `GridList` containing a [Subheader](/#/components/subheader).', diff --git a/docs/src/app/components/pages/components/IconButton/Page.js b/docs/src/app/components/pages/components/IconButton/Page.js index 12dcc23a579c79..63e9b7089a469f 100644 --- a/docs/src/app/components/pages/components/IconButton/Page.js +++ b/docs/src/app/components/pages/components/IconButton/Page.js @@ -5,7 +5,7 @@ import CodeExample from '../../../CodeExample'; import PropTypeDescription from '../../../PropTypeDescription'; import MarkdownElement from '../../../MarkdownElement'; -import iconButtonCode from '!raw!material-ui/lib/IconButton/IconButton'; +import iconButtonCode from '!raw!material-ui/IconButton/IconButton'; import iconButtonReadmeText from './README'; import iconButtonExampleSimpleCode from '!raw!./ExampleSimple'; import IconButtonExampleSimple from './ExampleSimple'; diff --git a/docs/src/app/components/pages/components/IconMenu/Page.js b/docs/src/app/components/pages/components/IconMenu/Page.js index d426bd0f0682d7..bb77a43bbc4a5a 100644 --- a/docs/src/app/components/pages/components/IconMenu/Page.js +++ b/docs/src/app/components/pages/components/IconMenu/Page.js @@ -14,7 +14,7 @@ import IconMenuExampleScrollable from './ExampleScrollable'; import iconMenuExampleScrollableCode from '!raw!./ExampleScrollable'; import IconMenuExampleNested from './ExampleNested'; import iconMenuExampleNestedCode from '!raw!./ExampleNested'; -import iconMenuCode from '!raw!material-ui/lib/IconMenu/IconMenu'; +import iconMenuCode from '!raw!material-ui/IconMenu/IconMenu'; const descriptions = { simple: 'Simple Icon Menus demonstrating some of the layouts possible using the `anchorOrigin` and `' + diff --git a/docs/src/app/components/pages/components/LinearProgress/Page.js b/docs/src/app/components/pages/components/LinearProgress/Page.js index ebd71a1f42d8e9..23a9c2df5fa9fb 100644 --- a/docs/src/app/components/pages/components/LinearProgress/Page.js +++ b/docs/src/app/components/pages/components/LinearProgress/Page.js @@ -10,7 +10,7 @@ import LinearProgressExampleSimple from './ExampleSimple'; import linearProgressExampleSimpleCode from '!raw!./ExampleSimple'; import LinearProgressExampleDeterminate from './ExampleDeterminate'; import linearProgressExampleDeterminateCode from '!raw!./ExampleDeterminate'; -import linearProgressCode from '!raw!material-ui/lib/LinearProgress/LinearProgress'; +import linearProgressCode from '!raw!material-ui/LinearProgress/LinearProgress'; const descriptions = { indeterminate: 'By default, the indicator animates continuously.', diff --git a/docs/src/app/components/pages/components/List/Page.js b/docs/src/app/components/pages/components/List/Page.js index 26471da23f2699..154c4545e3efe5 100644 --- a/docs/src/app/components/pages/components/List/Page.js +++ b/docs/src/app/components/pages/components/List/Page.js @@ -24,8 +24,8 @@ import listExampleMessagesCode from '!raw!./ExampleMessages'; import ListExampleMessages from './ExampleMessages'; import listExampleSelectableCode from '!raw!./ExampleSelectable'; import ListExampleSelectable from './ExampleSelectable'; -import listCode from '!raw!material-ui/lib/List/List'; -import listItemCode from '!raw!material-ui/lib/List/ListItem'; +import listCode from '!raw!material-ui/List/List'; +import listItemCode from '!raw!material-ui/List/ListItem'; const descriptions = { simple: 'A simple `List` with left and right [SVG icons](/#/components/svg-icon).', diff --git a/docs/src/app/components/pages/components/Menu/Page.js b/docs/src/app/components/pages/components/Menu/Page.js index 383909146f8113..8978c589b541b4 100644 --- a/docs/src/app/components/pages/components/Menu/Page.js +++ b/docs/src/app/components/pages/components/Menu/Page.js @@ -16,8 +16,8 @@ import MenuExampleSecondary from './ExampleSecondary'; import menuExampleSecondaryCode from '!raw!./ExampleSecondary'; import MenuExampleNested from './ExampleNested'; import menuExampleNestedCode from '!raw!./ExampleNested'; -import menuCode from '!raw!material-ui/lib/Menu/Menu'; -import menuItemCode from '!raw!material-ui/lib/MenuItem/MenuItem'; +import menuCode from '!raw!material-ui/Menu/Menu'; +import menuItemCode from '!raw!material-ui/MenuItem/MenuItem'; const descriptions = { simple: 'Two simple examples. The menu widths adjusts to accommodate the content in keyline increments.', diff --git a/docs/src/app/components/pages/components/Paper/Page.js b/docs/src/app/components/pages/components/Paper/Page.js index 64013299fef050..ec88e7267ec489 100644 --- a/docs/src/app/components/pages/components/Paper/Page.js +++ b/docs/src/app/components/pages/components/Paper/Page.js @@ -12,7 +12,7 @@ import PaperExampleRounded from './ExampleRounded'; import paperExampleRoundedCode from '!raw!./ExampleRounded'; import PaperExampleCircle from './ExampleCircle'; import paperExampleCircleCode from '!raw!./ExampleCircle'; -import paperCode from '!raw!material-ui/lib/Paper/Paper'; +import paperCode from '!raw!material-ui/Paper/Paper'; const descriptions = { simple: 'Paper examples showing the range of `zDepth`.', diff --git a/docs/src/app/components/pages/components/Popover/Page.js b/docs/src/app/components/pages/components/Popover/Page.js index b918bf9101d780..c95a7bb3785ef2 100644 --- a/docs/src/app/components/pages/components/Popover/Page.js +++ b/docs/src/app/components/pages/components/Popover/Page.js @@ -13,7 +13,7 @@ import popoverExampleAnimationCode from '!raw!./ExampleAnimation'; import PopoverExampleConfigurable from './ExampleConfigurable'; import popoverExampleConfigurableCode from '!raw!./ExampleConfigurable'; import popoverNoteText from './NOTE'; -import popoverCode from '!raw!material-ui/lib/Popover/Popover'; +import popoverCode from '!raw!material-ui/Popover/Popover'; const descriptions = { simple: 'A simple example showing a Popover containing a [Menu](http://localhost:3000/#/components/menu). ' + diff --git a/docs/src/app/components/pages/components/RadioButton/Page.js b/docs/src/app/components/pages/components/RadioButton/Page.js index 1fcbc3c969ab20..36add4495d3675 100644 --- a/docs/src/app/components/pages/components/RadioButton/Page.js +++ b/docs/src/app/components/pages/components/RadioButton/Page.js @@ -8,8 +8,8 @@ import MarkdownElement from '../../../MarkdownElement'; import radioButtonReadmeText from './README'; import RadioButtonExampleSimple from './ExampleSimple'; import radioButtonExampleSimpleCode from '!raw!./ExampleSimple'; -import radioButtonCode from '!raw!material-ui/lib/RadioButton/RadioButton'; -import radioButtonGroupCode from '!raw!material-ui/lib/RadioButton/RadioButtonGroup'; +import radioButtonCode from '!raw!material-ui/RadioButton/RadioButton'; +import radioButtonGroupCode from '!raw!material-ui/RadioButton/RadioButtonGroup'; const description = 'The second button is selected by default using the `defaultSelected` property of ' + '`RadioButtonGroup`. The third button is disabled using the `disabled` property of `RadioButton`. The final ' + diff --git a/docs/src/app/components/pages/components/RaisedButton/Page.js b/docs/src/app/components/pages/components/RaisedButton/Page.js index 5f7a19b4d5d5a4..265ab21fc22aec 100644 --- a/docs/src/app/components/pages/components/RaisedButton/Page.js +++ b/docs/src/app/components/pages/components/RaisedButton/Page.js @@ -12,7 +12,7 @@ import raisedButtonExampleComplexCode from '!raw!./ExampleComplex'; import RaisedButtonExampleComplex from './ExampleComplex'; import raisedButtonExampleIconCode from '!raw!./ExampleIcon'; import RaisedButtonExampleIcon from './ExampleIcon'; -import raisedButtonCode from '!raw!material-ui/lib/RaisedButton/RaisedButton'; +import raisedButtonCode from '!raw!material-ui/RaisedButton/RaisedButton'; const descriptions = { simple: '`RaisedButton` with default color, `primary`, `secondary` and and `disabled` props applied.', diff --git a/docs/src/app/components/pages/components/RefreshIndicator/Page.js b/docs/src/app/components/pages/components/RefreshIndicator/Page.js index a8c2d0b21362a4..5aebb2fc81de77 100644 --- a/docs/src/app/components/pages/components/RefreshIndicator/Page.js +++ b/docs/src/app/components/pages/components/RefreshIndicator/Page.js @@ -10,7 +10,7 @@ import RefreshIndicatorExampleReady from './ExampleReady'; import refreshIndicatorExampleReadyCode from '!raw!./ExampleReady'; import RefreshIndicatorExampleLoading from './ExampleLoading'; import refreshIndicatorExampleLoadingCode from '!raw!./ExampleLoading'; -import refreshIndicatorCode from '!raw!material-ui/lib/RefreshIndicator/RefreshIndicator'; +import refreshIndicatorCode from '!raw!material-ui/RefreshIndicator/RefreshIndicator'; const descriptions = { ready: 'The `ready` status can be used in response to a pull-to-refresh action, with the `percentage` tracking ' + diff --git a/docs/src/app/components/pages/components/SelectField/Page.js b/docs/src/app/components/pages/components/SelectField/Page.js index 2a37390d9ea261..9f35cd6797d78e 100644 --- a/docs/src/app/components/pages/components/SelectField/Page.js +++ b/docs/src/app/components/pages/components/SelectField/Page.js @@ -16,7 +16,7 @@ import SelectFieldExampleFloatingLabel from './ExampleFloatingLabel'; import selectFieldExampleFloatingLabelCode from '!raw!./ExampleFloatingLabel'; import SelectFieldExampleError from './ExampleError'; import selectFieldExampleErrorCode from '!raw!./ExampleError'; -import selectFieldCode from '!raw!material-ui/lib/SelectField/SelectField'; +import selectFieldCode from '!raw!material-ui/SelectField/SelectField'; const descriptions = { simple: '`SelectField` is implemented as a controlled component, with the current selection set through the ' + diff --git a/docs/src/app/components/pages/components/Slider/Page.js b/docs/src/app/components/pages/components/Slider/Page.js index 030cc541a74948..a17c57d6b513e8 100644 --- a/docs/src/app/components/pages/components/Slider/Page.js +++ b/docs/src/app/components/pages/components/Slider/Page.js @@ -14,7 +14,7 @@ import SliderExampleStep from './ExampleStep'; import sliderExampleStepCode from '!raw!./ExampleStep'; import SliderExampleControlled from './ExampleControlled'; import sliderExampleControlledCode from '!raw!./ExampleControlled'; -import sliderCode from '!raw!material-ui/lib/Slider/Slider'; +import sliderCode from '!raw!material-ui/Slider/Slider'; const descriptions = { simple: 'The `defaultValue` property sets the initial position of the slider. The slider appearance changes when ' + diff --git a/docs/src/app/components/pages/components/Snackbar/Page.js b/docs/src/app/components/pages/components/Snackbar/Page.js index b11f31cb006978..ea8c9e2fed2c5d 100644 --- a/docs/src/app/components/pages/components/Snackbar/Page.js +++ b/docs/src/app/components/pages/components/Snackbar/Page.js @@ -12,7 +12,7 @@ import SnackbarExampleAction from './ExampleAction'; import SnackbarExampleActionCode from '!raw!./ExampleAction'; import SnackbarExampleTwice from './ExampleTwice'; import SnackbarExampleTwiceCode from '!raw!./ExampleTwice'; -import SnackbarCode from '!raw!material-ui/lib/Snackbar/Snackbar'; +import SnackbarCode from '!raw!material-ui/Snackbar/Snackbar'; const descriptions = { simple: '`Snackbar` is a controlled component, and is displayed when `open` is `true`. Click away from the ' + diff --git a/docs/src/app/components/pages/components/Subheader/Page.js b/docs/src/app/components/pages/components/Subheader/Page.js index 480f7362b138cb..97541ca167978d 100644 --- a/docs/src/app/components/pages/components/Subheader/Page.js +++ b/docs/src/app/components/pages/components/Subheader/Page.js @@ -12,7 +12,7 @@ import listExampleFoldersCode from '!raw!../List/ExampleFolders'; import ListExampleFolders from '../List/ExampleFolders'; import gridListExampleSimpleCode from '!raw!../GridList/ExampleSimple'; import GridListExampleSimple from '../GridList/ExampleSimple'; -import subheaderCode from '!raw!material-ui/lib/Subheader/Subheader'; +import subheaderCode from '!raw!material-ui/Subheader/Subheader'; const descriptions = { simpleList: 'Subheader used in a simple [List](/#/components/list).', diff --git a/docs/src/app/components/pages/components/SvgIcon/Page.js b/docs/src/app/components/pages/components/SvgIcon/Page.js index c60a6e1b6ef726..b022d7d445a030 100644 --- a/docs/src/app/components/pages/components/SvgIcon/Page.js +++ b/docs/src/app/components/pages/components/SvgIcon/Page.js @@ -10,7 +10,7 @@ import IconExampleSimple from './ExampleSimple'; import iconExampleSimpleCode from '!raw!./ExampleSimple'; import IconExampleIcons from './ExampleIcons'; import iconExampleIconsCode from '!raw!./ExampleIcons'; -import iconCode from '!raw!material-ui/lib/SvgIcon/SvgIcon'; +import iconCode from '!raw!material-ui/SvgIcon/SvgIcon'; const descriptions = { custom: 'This example uses a custom svg icon. The third example has a `hoverColor` defined.', diff --git a/docs/src/app/components/pages/components/Table/Page.js b/docs/src/app/components/pages/components/Table/Page.js index 584e91ec676a66..01a59c91cc2849 100644 --- a/docs/src/app/components/pages/components/Table/Page.js +++ b/docs/src/app/components/pages/components/Table/Page.js @@ -11,13 +11,13 @@ import tableExampleSimpleCode from '!raw!./ExampleSimple'; import TableExampleComplex from './ExampleComplex'; import tableExampleComplexCode from '!raw!./ExampleComplex'; -import tableCode from '!raw!material-ui/lib/Table/Table'; -import tableRowCode from '!raw!material-ui/lib/Table/TableRow'; -import tableRowColumnCode from '!raw!material-ui/lib/Table/TableRowColumn'; -import tableHeaderCode from '!raw!material-ui/lib/Table/TableHeader'; -import tableHeaderColumnCode from '!raw!material-ui/lib/Table/TableHeaderColumn'; -import tableBodyCode from '!raw!material-ui/lib/Table/TableBody'; -import tableFooterCode from '!raw!material-ui/lib/Table/TableFooter'; +import tableCode from '!raw!material-ui/Table/Table'; +import tableRowCode from '!raw!material-ui/Table/TableRow'; +import tableRowColumnCode from '!raw!material-ui/Table/TableRowColumn'; +import tableHeaderCode from '!raw!material-ui/Table/TableHeader'; +import tableHeaderColumnCode from '!raw!material-ui/Table/TableHeaderColumn'; +import tableBodyCode from '!raw!material-ui/Table/TableBody'; +import tableFooterCode from '!raw!material-ui/Table/TableFooter'; const descriptions = { simple: 'A simple table demonstrating the hierarchy of the `Table` component and its sub-components.', diff --git a/docs/src/app/components/pages/components/Tabs/Page.js b/docs/src/app/components/pages/components/Tabs/Page.js index f310aaf5a8914e..d3c53bc1874a8d 100644 --- a/docs/src/app/components/pages/components/Tabs/Page.js +++ b/docs/src/app/components/pages/components/Tabs/Page.js @@ -16,8 +16,8 @@ import tabsExampleIconCode from '!raw!./ExampleIcon'; import TabsExampleIcon from './ExampleIcon'; import tabsExampleIconTextCode from '!raw!./ExampleIconText'; import TabsExampleIconText from './ExampleIconText'; -import tabsCode from '!raw!material-ui/lib/Tabs/Tabs'; -import tabCode from '!raw!material-ui/lib/Tabs/Tab'; +import tabsCode from '!raw!material-ui/Tabs/Tabs'; +import tabCode from '!raw!material-ui/Tabs/Tab'; const descriptions = { simple: 'A simple example of Tabs. The third tab demonstrates the `onActive` property of `Tab`.', diff --git a/docs/src/app/components/pages/components/TextField/Page.js b/docs/src/app/components/pages/components/TextField/Page.js index 4a426803e7638c..07557594a8a5fc 100644 --- a/docs/src/app/components/pages/components/TextField/Page.js +++ b/docs/src/app/components/pages/components/TextField/Page.js @@ -16,7 +16,7 @@ import TextFieldExampleDisabled from './ExampleDisabled'; import textFieldExampleDisabledCode from '!raw!./ExampleDisabled'; import TextFieldExampleControlled from './ExampleControlled'; import textFieldExampleControlledCode from '!raw!./ExampleControlled'; -import textFieldCode from '!raw!material-ui/lib/TextField/TextField'; +import textFieldCode from '!raw!material-ui/TextField/TextField'; const descriptions = { simple: 'Examples demonstrating key Text Field features.', diff --git a/docs/src/app/components/pages/components/TimePicker/Page.js b/docs/src/app/components/pages/components/TimePicker/Page.js index 2ffda2acad7a4d..449d2abb0639dd 100644 --- a/docs/src/app/components/pages/components/TimePicker/Page.js +++ b/docs/src/app/components/pages/components/TimePicker/Page.js @@ -12,7 +12,7 @@ import TimePickerExampleComplex from './ExampleComplex'; import timePickerExampleComplexCode from '!raw!./ExampleComplex'; import TimePickerExampleInternational from './ExampleInternational'; import timePickerExampleInternationalCode from '!raw!./ExampleInternational'; -import timePickerCode from '!raw!material-ui/lib/TimePicker/TimePicker'; +import timePickerCode from '!raw!material-ui/TimePicker/TimePicker'; const descriptions = { simple: 'Time Picker supports 12 hour and 24 hour formats. In 12 hour format the AM and PM indicators toggle the ' + diff --git a/docs/src/app/components/pages/components/Toggle/Page.js b/docs/src/app/components/pages/components/Toggle/Page.js index 321366a592ea8e..7830ebb64fd75b 100644 --- a/docs/src/app/components/pages/components/Toggle/Page.js +++ b/docs/src/app/components/pages/components/Toggle/Page.js @@ -8,7 +8,7 @@ import MarkdownElement from '../../../MarkdownElement'; import toggleReadmeText from './README'; import ToggleExampleSimple from './ExampleSimple'; import toggleExampleSimpleCode from '!raw!./ExampleSimple'; -import toggleCode from '!raw!material-ui/lib/Toggle/Toggle'; +import toggleCode from '!raw!material-ui/Toggle/Toggle'; const description = 'The second example is selected by default using the `defaultToggled` property. The third ' + 'example is disabled using the `disabled` property. The final example uses the `labelPosition` property to ' + diff --git a/docs/src/app/components/pages/customization/Colors.js b/docs/src/app/components/pages/customization/Colors.js index 77e9fd5ff8a7e3..afc6206593f6ce 100644 --- a/docs/src/app/components/pages/customization/Colors.js +++ b/docs/src/app/components/pages/customization/Colors.js @@ -1,16 +1,21 @@ -import React, {createClass} from 'react'; +import React, {Component, 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({ +const mainColors = [ + 'Red', 'Pink', 'Purple', 'Deep Purple', 'Indigo', 'Blue', 'Light Blue', + 'Cyan', 'Teal', 'Green', 'Light Green', 'Lime', 'Yellow', 'Amber', 'Orange', + 'Deep Orange', +]; - mixins: [ - styleResizable, - ], +class ColorsPage extends Component { + static propTypes = { + width: PropTypes.number.isRequired, + }; getStyles() { const styles = { @@ -54,16 +59,16 @@ 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); } return styles; - }, + } getColorGroup(styles, color, showAltPalette) { const mainPalette = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]; @@ -88,7 +93,7 @@ const ColorsPage = createClass({ {React.Children.toArray(colors)} ); - }, + } getColorBlock(styles, colorName, colorValue, colorTitle) { const bgColorText = colorName + colorValue; @@ -119,7 +124,7 @@ const ColorsPage = createClass({ {this.getColorName(styles, bgColorText, bgColor)} ); - }, + } getColorName(styles, text, colorValue) { return ( @@ -128,15 +133,11 @@ const ColorsPage = createClass({ {colorValue.toUpperCase()}
); - }, + } render() { const styles = this.getStyles(); - const mainColors = [ - 'Red', 'Pink', 'Purple', 'Deep Purple', 'Indigo', 'Blue', 'Light Blue', - 'Cyan', 'Teal', 'Green', 'Light Green', 'Lime', 'Yellow', 'Amber', 'Orange', 'Deep Orange', - ]; const neutralColors = ['Brown', 'Blue Grey', 'Grey']; const colorGroups = []; const neutralGroups = []; @@ -149,30 +150,28 @@ const ColorsPage = createClass({ neutralGroups.push(this.getColorGroup(styles, color, false)); }, this); - const googleLink = 'https://www.google.com/design/spec/style/color.html#color-ui-color-palette'; - const githubLink = 'https://github.com/callemall/material-ui/blob/master/src/styles/colors.js'; - return (
`Colors - ${previousTitle}`} /> <h2 style={styles.headline}>UI Color Palette</h2> <p> We've created javascript variables for every color used in - the <a href={googleLink}>UI Color Palette</a>. They are stored - in <a href={githubLink}>styles/colors.js</a>. + the <a href="https://www.google.com/design/spec/style/color.html#color-ui-color-palette"> + UI Color Palette + </a>. They are stored + in <a href="https://github.com/callemall/material-ui/blob/master/src/styles/colors.js"> + styles/colors.js + </a>. </p> - <ClearFix> {React.Children.toArray(colorGroups)} - <div> {React.Children.toArray(neutralGroups)} </div> </ClearFix> </div> ); - }, - -}); + } +} -export default ColorsPage; +export default withWidth()(ColorsPage); diff --git a/docs/src/app/components/pages/customization/Themes.js b/docs/src/app/components/pages/customization/Themes.js index 94153ad5fcb836..0a1f833762c01a 100644 --- a/docs/src/app/components/pages/customization/Themes.js +++ b/docs/src/app/components/pages/customization/Themes.js @@ -1,9 +1,9 @@ -import React, {createClass, PropTypes} from 'react'; +import React, {Component, PropTypes} from 'react'; 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'; @@ -39,23 +39,24 @@ You can use the tabs to change the theme. The changes will be applied to the who documentation. `; -const ThemesPage = createClass({ - - propTypes: { +class ThemesPage extends Component { + static propTypes = { muiTheme: PropTypes.object, onChangeMuiTheme: PropTypes.func, - }, + width: PropTypes.number.isRequired, + }; - mixins: [styleResizable], + state = { + dialogOpen: false, + snackbarOpen: false, + drawerOpen: false, + }; - getInitialState() { - return { + componentWillMount() { + this.setState({ valueTabs: this.props.muiTheme.name || 'light', - dialogOpen: false, - snackbarOpen: false, - drawerOpen: false, - }; - }, + }); + } getStyles() { const canvasColor = this.props.muiTheme.baseTheme.palette.canvasColor; @@ -113,7 +114,7 @@ const ThemesPage = createClass({ }, }; - if (this.isDeviceSize(styleResizable.statics.Sizes.MEDIUM)) { + if (this.props.width === MEDIUM) { styles.group.width = '33%'; } @@ -121,7 +122,7 @@ const ThemesPage = createClass({ styles.groupSlider = Object.assign({}, styles.group, styles.groupSlider); return styles; - }, + } getComponentGroup() { const styles = this.getStyles(); @@ -227,7 +228,7 @@ const ThemesPage = createClass({ label="Cancel" keyboardFocus={true} onTouchTap={this.handleRequestCloseDialog} - secondary={true} + primary={true} />, <FlatButton label="Submit" @@ -262,20 +263,20 @@ const ThemesPage = createClass({ onTouchTap={this.handleTouchTapSnackbar} label="View Snackbar" /> - <Snackbar - open={this.state.snackbarOpen} - onRequestClose={this.handleRequestCloseSnackbar} - message="This is a snackbar" - action="Got It!" - onActionTouchTap={this.handleRequestCloseSnackbar} - /> </div> + <Snackbar + open={this.state.snackbarOpen} + onRequestClose={this.handleRequestCloseSnackbar} + message="This is a snackbar" + action="Got It!" + onActionTouchTap={this.handleRequestCloseSnackbar} + /> </div> </ClearFix> ); - }, + } - handleChangeTabs(valueTabs) { + handleChangeTabs = (valueTabs) => { let newMuiTheme = null; if (valueTabs === 'light') { @@ -291,7 +292,7 @@ const ThemesPage = createClass({ }); this.props.onChangeMuiTheme(newMuiTheme); - }, + }; getThemeExamples() { return ( @@ -312,43 +313,43 @@ const ThemesPage = createClass({ {this.getComponentGroup()} </div> ); - }, + } - handleTouchTapDrawer() { + handleTouchTapDrawer = () => { this.setState({ drawerOpen: true, }); - }, + }; - handleRequestChangeDrawer(open) { + handleRequestChangeDrawer = (open) => { this.setState({ drawerOpen: open, }); - }, + }; - handleTouchTapDialog() { + handleTouchTapDialog = () => { this.setState({ dialogOpen: true, }); - }, + }; - handleRequestCloseDialog() { + handleRequestCloseDialog = () => { this.setState({ dialogOpen: false, }); - }, + }; - handleTouchTapSnackbar() { + handleTouchTapSnackbar = () => { this.setState({ snackbarOpen: true, }); - }, + }; - handleRequestCloseSnackbar() { + handleRequestCloseSnackbar = () => { this.setState({ snackbarOpen: false, }); - }, + }; render() { const styles = this.getStyles(); @@ -365,8 +366,7 @@ const ThemesPage = createClass({ </div> </div> ); - }, - -}); + } +} -export default muiThemeable()(ThemesPage); +export default muiThemeable()(withWidth()(ThemesPage)); diff --git a/docs/webpack-dev-server.config.js b/docs/webpack-dev-server.config.js index bc8aeea4047b1f..f03397d8b049fc 100644 --- a/docs/webpack-dev-server.config.js +++ b/docs/webpack-dev-server.config.js @@ -4,23 +4,22 @@ const buildPath = path.resolve(__dirname, 'src/www'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const config = { - //Entry point to the project + // Entry point to the project entry: [ 'webpack/hot/dev-server', 'webpack/hot/only-dev-server', path.join(__dirname, '/src/app/app.js'), ], - //Webpack config options on how to obtain modules + // Webpack config options on how to obtain modules resolve: { - //When requiring, you don't need to add these extensions + // When requiring, you don't need to add these extensions extensions: ['', '.js', '.md', '.txt'], alias: { - //material-ui requires will be searched in src folder, not in node_modules - 'material-ui/lib': path.resolve(__dirname, '../src'), + // material-ui requires will be searched in src folder, not in node_modules 'material-ui': path.resolve(__dirname, '../src'), }, }, - //Configuration for dev server + // Configuration for dev server devServer: { contentBase: 'src/www', devtool: 'eval', @@ -29,27 +28,27 @@ const config = { port: 3000, }, devtool: 'eval', - //Output file config + // Output file config output: { - path: buildPath, //Path of output file - filename: 'app.js', //Name of output file + path: buildPath, // Path of output file + filename: 'app.js', // Name of output file }, plugins: [ - //Used to include index.html in build folder + // Used to include index.html in build folder new HtmlWebpackPlugin({ inject: false, template: path.join(__dirname, '/src/www/index.html'), }), - //Allows for sync with browser while developing (like BorwserSync) + // Allows for sync with browser while developing (like BorwserSync) new webpack.HotModuleReplacementPlugin(), - //Allows error warninggs but does not stop compiling. Will remove when eslint is added + // Allows error warninggs but does not stop compiling. Will remove when eslint is added new webpack.NoErrorsPlugin(), ], externals: { fs: 'js', // To remove once https://github.com/benjamn/recast/pull/238 is released }, module: { - //Allow loading of non-es + // Allow loading of non-es loaders: [ { test: /\.js$/, diff --git a/docs/webpack-production.config.js b/docs/webpack-production.config.js index 9ca5aa4e0cba55..e322b25ade049e 100644 --- a/docs/webpack-production.config.js +++ b/docs/webpack-production.config.js @@ -5,29 +5,28 @@ const HtmlWebpackPlugin = require('html-webpack-plugin'); const TransferWebpackPlugin = require('transfer-webpack-plugin'); const config = { - //Entry point to the project + // Entry point to the project entry: [ path.join(__dirname, '/src/app/app.js'), ], - //Webpack config options on how to obtain modules + // Webpack config options on how to obtain modules resolve: { - //When requiring, you don't need to add these extensions + // When requiring, you don't need to add these extensions extensions: ['', '.js', '.md', '.txt'], alias: { - //material-ui requires will be searched in src folder, not in node_modules - 'material-ui/lib': path.resolve(__dirname, '../src'), + // material-ui requires will be searched in src folder, not in node_modules 'material-ui': path.resolve(__dirname, '../src'), }, }, devtool: 'source-map', - //Configuration for server + // Configuration for server devServer: { contentBase: 'build', }, - //Output file config + // Output file config output: { - path: buildPath, //Path of output file - filename: 'app.js', //Name of output file + path: buildPath, // Path of output file + filename: 'app.js', // Name of output file }, plugins: [ new webpack.optimize.OccurenceOrderPlugin(), @@ -49,9 +48,9 @@ const config = { inject: false, template: path.join(__dirname, '/src/www/index.html'), }), - //Allows error warninggs but does not stop compiling. Will remove when eslint is added + // Allows error warninggs but does not stop compiling. Will remove when eslint is added new webpack.NoErrorsPlugin(), - //Transfer Files + // Transfer Files new TransferWebpackPlugin([ {from: 'www/css', to: 'css'}, {from: 'www/images', to: 'images'}, @@ -61,7 +60,7 @@ const config = { fs: 'fs', // To remove once https://github.com/benjamn/recast/pull/238 is released }, module: { - //Allow loading of non-es5 js files. + // Allow loading of non-es5 js files. loaders: [ { test: /\.js$/, diff --git a/src/DatePicker/DayButton.js b/src/DatePicker/DayButton.js index 767157e6127a44..396683340e6771 100644 --- a/src/DatePicker/DayButton.js +++ b/src/DatePicker/DayButton.js @@ -38,6 +38,7 @@ function getStyles(props, context) { width: 41, padding: '4px 2px', opacity: disabled && '0.6', + lineHeight: 'inherit', }, label: { position: 'relative', diff --git a/src/DatePicker/YearButton.js b/src/DatePicker/YearButton.js index 9cdda429f95578..b748c01fcebd68 100644 --- a/src/DatePicker/YearButton.js +++ b/src/DatePicker/YearButton.js @@ -24,6 +24,7 @@ function getStyles(props, context) { width: 36, fontSize: 14, padding: '8px 2px', + lineHeight: 'inherit', color: year === new Date().getFullYear() && datePicker.color, }, label: { diff --git a/src/Snackbar/Snackbar.js b/src/Snackbar/Snackbar.js index ce853c028900c7..0f7caaa8dcb34c 100644 --- a/src/Snackbar/Snackbar.js +++ b/src/Snackbar/Snackbar.js @@ -1,27 +1,22 @@ -import React, {PropTypes} from 'react'; +import React, {PropTypes, Component} from 'react'; import transitions from '../styles/transitions'; import ClickAwayListener from '../internal/ClickAwayListener'; -import FlatButton from '../FlatButton'; -import StyleResizable from '../utils/styleResizable'; +import SnackbarBody from './SnackbarBody'; function getStyles(props, context, state) { const { muiTheme: { - baseTheme, - snackbar, + baseTheme: { + spacing: { + desktopSubheaderHeight, + }, + }, zIndex, }, } = context; const {open} = state; - const { - desktopGutter, - desktopSubheaderHeight, - } = baseTheme.spacing; - - const isSmall = state.deviceSize === StyleResizable.statics.Sizes.SMALL; - const styles = { root: { position: 'fixed', @@ -31,43 +26,19 @@ function getStyles(props, context, state) { bottom: 0, zIndex: zIndex.snackbar, visibility: open ? 'visible' : 'hidden', - transform: open ? 'translate3d(0, 0, 0)' : `translate3d(0, ${desktopSubheaderHeight}px, 0)`, + transform: open ? + 'translate3d(0, 0, 0)' : + `translate3d(0, ${desktopSubheaderHeight}px, 0)`, transition: `${transitions.easeOut('400ms', 'transform')}, ${ transitions.easeOut('400ms', 'visibility')}`, }, - body: { - backgroundColor: snackbar.backgroundColor, - padding: `0 ${desktopGutter}px`, - height: desktopSubheaderHeight, - lineHeight: `${desktopSubheaderHeight}px`, - borderRadius: isSmall ? 0 : 2, - maxWidth: isSmall ? 'inherit' : 568, - minWidth: isSmall ? 'inherit' : 288, - flexGrow: isSmall ? 1 : 0, - margin: 'auto', - }, - content: { - fontSize: 14, - color: snackbar.textColor, - opacity: open ? 1 : 0, - transition: open ? transitions.easeOut('500ms', 'opacity', '100ms') : transitions.easeOut('400ms', 'opacity'), - }, - action: { - color: snackbar.actionColor, - float: 'right', - marginTop: 6, - marginRight: -16, - marginLeft: desktopGutter, - backgroundColor: 'transparent', - }, }; return styles; } -const Snackbar = React.createClass({ - - propTypes: { +class Snackbar extends Component { + static propTypes = { /** * The label for the action on the snackbar. */ @@ -122,30 +93,26 @@ const Snackbar = React.createClass({ * Override the inline-styles of the root element. */ style: PropTypes.object, - }, + }; - contextTypes: { + static contextTypes = { muiTheme: PropTypes.object.isRequired, - }, - - mixins: [ - StyleResizable, - ], + }; - getInitialState() { - return { + componentWillMount() { + this.setState({ open: this.props.open, message: this.props.message, action: this.props.action, - }; - }, + }); + } componentDidMount() { if (this.state.open) { this.setAutoHideTimer(); this.setTransitionTimer(); } - }, + } componentWillReceiveProps(nextProps) { if (this.state.open && nextProps.open === this.props.open && @@ -171,7 +138,7 @@ const Snackbar = React.createClass({ action: nextProps.action, }); } - }, + } componentDidUpdate(prevProps, prevState) { if (prevState.open !== this.state.open) { @@ -182,23 +149,26 @@ const Snackbar = React.createClass({ clearTimeout(this.timerAutoHideId); } } - }, + } componentWillUnmount() { clearTimeout(this.timerAutoHideId); clearTimeout(this.timerTransitionId); clearTimeout(this.timerOneAtTheTimeId); - }, + } - componentClickAway() { - if (this.timerTransitionId) return; // If transitioning, don't close snackbar + componentClickAway = () => { + if (this.timerTransitionId) { + // If transitioning, don't close the snackbar. + return; + } if (this.props.open !== null && this.props.onRequestClose) { this.props.onRequestClose('clickaway'); } else { this.setState({open: false}); } - }, + }; // Timer that controls delay before snackbar auto hides setAutoHideTimer() { @@ -214,14 +184,14 @@ const Snackbar = React.createClass({ } }, autoHideDuration); } - }, + } // Timer that controls delay before click-away events are captured (based on when animation completes) setTransitionTimer() { this.timerTransitionId = setTimeout(() => { this.timerTransitionId = undefined; }, 400); - }, + } render() { const { @@ -240,28 +210,20 @@ const Snackbar = React.createClass({ const {prepareStyles} = this.context.muiTheme; const styles = getStyles(this.props, this.context, this.state); - const actionButton = action && ( - <FlatButton - style={styles.action} - label={action} - onTouchTap={onActionTouchTap} - /> - ); - return ( <ClickAwayListener onClickAway={open && this.componentClickAway}> <div {...others} style={prepareStyles(Object.assign(styles.root, style))}> - <div style={prepareStyles(Object.assign(styles.body, bodyStyle))}> - <div style={prepareStyles(styles.content)}> - <span>{message}</span> - {actionButton} - </div> - </div> + <SnackbarBody + open={open} + message={message} + action={action} + style={bodyStyle} + onActionTouchTap={onActionTouchTap} + /> </div> </ClickAwayListener> ); - }, - -}); + } +} export default Snackbar; diff --git a/src/Snackbar/Snackbar.spec.js b/src/Snackbar/Snackbar.spec.js index bc424b131365b2..c33b24a3d33fe1 100644 --- a/src/Snackbar/Snackbar.spec.js +++ b/src/Snackbar/Snackbar.spec.js @@ -9,15 +9,29 @@ describe('<Snackbar />', () => { const muiTheme = getMuiTheme(); const shallowWithContext = (node) => shallow(node, {context: {muiTheme}}); - it('renders hidden by default', () => { - const wrapper = shallowWithContext( - <Snackbar open={false} message="Message" autoHideDuration={4000} /> - ); + describe('props: open', () => { + it('should be hidden when open is false', () => { + const wrapper = shallowWithContext( + <Snackbar open={false} message="Message" /> + ); - assert.equal( - wrapper.find('div').at(0).node.props.style.visibility, - 'hidden', - 'visibility should be hidden' - ); + assert.strictEqual( + wrapper.find('div').at(0).node.props.style.visibility, + 'hidden', + 'The element should be hidden.' + ); + }); + + it('should be hidden when open is true', () => { + const wrapper = shallowWithContext( + <Snackbar open={true} message="Message" /> + ); + + assert.strictEqual( + wrapper.find('div').at(0).node.props.style.visibility, + 'visible', + 'The element should be hidden.' + ); + }); }); }); diff --git a/src/Snackbar/SnackbarBody.js b/src/Snackbar/SnackbarBody.js new file mode 100644 index 00000000000000..93937158917ff9 --- /dev/null +++ b/src/Snackbar/SnackbarBody.js @@ -0,0 +1,133 @@ +import React, {PropTypes} from 'react'; +import transitions from '../styles/transitions'; +import withWidth, {SMALL} from '../utils/withWidth'; +import FlatButton from '../FlatButton'; + +function getStyles(props, context) { + const { + open, + width, + } = props; + + const { + muiTheme: { + baseTheme: { + spacing: { + desktopGutter, + desktopSubheaderHeight, + }, + }, + snackbar: { + backgroundColor, + textColor, + actionColor, + }, + }, + } = context; + + const isSmall = width === SMALL; + + const styles = { + root: { + backgroundColor: backgroundColor, + padding: `0 ${desktopGutter}px`, + height: desktopSubheaderHeight, + lineHeight: `${desktopSubheaderHeight}px`, + borderRadius: isSmall ? 0 : 2, + maxWidth: isSmall ? 'inherit' : 568, + minWidth: isSmall ? 'inherit' : 288, + flexGrow: isSmall ? 1 : 0, + margin: 'auto', + }, + content: { + fontSize: 14, + color: textColor, + opacity: open ? 1 : 0, + transition: open ? + transitions.easeOut('500ms', 'opacity', '100ms') : + transitions.easeOut('400ms', 'opacity'), + }, + action: { + color: actionColor, + float: 'right', + marginTop: 6, + marginRight: -16, + marginLeft: desktopGutter, + backgroundColor: 'transparent', + }, + }; + + return styles; +} + +export const SnackbarBody = (props, context) => { + const { + open, // eslint-disable-line no-unused-vars + action, + message, + onActionTouchTap, + style, + ...other, + } = props; + + const {prepareStyles} = context.muiTheme; + const styles = getStyles(props, context); + + const actionButton = action && ( + <FlatButton + style={styles.action} + label={action} + onTouchTap={onActionTouchTap} + /> + ); + + return ( + <div {...other} style={prepareStyles(Object.assign(styles.root, style))}> + <div style={prepareStyles(styles.content)}> + <span>{message}</span> + {actionButton} + </div> + </div> + ); +}; + +SnackbarBody.propTypes = { + /** + * The label for the action on the snackbar. + */ + action: PropTypes.string, + /** + * The message to be displayed. + * + * (Note: If the message is an element or array, and the `Snackbar` may re-render while it is still open, + * ensure that the same object remains as the `message` property if you want to avoid the `Snackbar` hiding and + * showing again) + */ + message: PropTypes.node.isRequired, + /** + * Fired when the action button is touchtapped. + * + * @param {object} event Action button event. + */ + onActionTouchTap: PropTypes.func, + /** + * @ignore + * Controls whether the `Snackbar` is opened or not. + */ + open: PropTypes.bool.isRequired, + /** + * Override the inline-styles of the root element. + */ + style: PropTypes.object, + /** + * @ignore + * Width of the screen. + */ + width: PropTypes.number.isRequired, +}; + +SnackbarBody.contextTypes = { + muiTheme: PropTypes.object.isRequired, +}; + +export default withWidth()(SnackbarBody); diff --git a/src/Snackbar/SnackbarBody.spec.js b/src/Snackbar/SnackbarBody.spec.js new file mode 100644 index 00000000000000..63bdb81d9f97e8 --- /dev/null +++ b/src/Snackbar/SnackbarBody.spec.js @@ -0,0 +1,38 @@ +/* eslint-env mocha */ +import React from 'react'; +import {shallow} from 'enzyme'; +import {assert} from 'chai'; +import {SnackbarBody} from './SnackbarBody'; +import getMuiTheme from '../styles/getMuiTheme'; +import {SMALL} from '../utils/withWidth'; + +describe('<SnackbarBody />', () => { + const muiTheme = getMuiTheme(); + const shallowWithContext = (node) => shallow(node, {context: {muiTheme}}); + + describe('props: open', () => { + it('should be hidden when open is false', () => { + const wrapper = shallowWithContext( + <SnackbarBody open={false} message="Message" width={SMALL} /> + ); + + assert.strictEqual( + wrapper.find('div').at(1).node.props.style.opacity, + 0, + 'The element should be hidden.' + ); + }); + + it('should be visible when open is true', () => { + const wrapper = shallowWithContext( + <SnackbarBody open={true} message="Message" width={SMALL} /> + ); + + assert.strictEqual( + wrapper.find('div').at(1).node.props.style.opacity, + 1, + 'The element should be visible.' + ); + }); + }); +}); diff --git a/src/TextField/TextFieldHint.js b/src/TextField/TextFieldHint.js index 32d55bfa9c1a0d..0942fccecfd0d1 100644 --- a/src/TextField/TextFieldHint.js +++ b/src/TextField/TextFieldHint.js @@ -1,7 +1,46 @@ import React, {PropTypes} from 'react'; import transitions from '../styles/transitions'; -const propTypes = { +function getStyles(props) { + const { + muiTheme: { + textField: { + hintColor, + }, + }, + show, + } = props; + + return { + root: { + position: 'absolute', + opacity: show ? 1 : 0, + color: hintColor, + transition: transitions.easeOut(), + bottom: 12, + }, + }; +} + +const TextFieldHint = (props) => { + const { + muiTheme: { + prepareStyles, + }, + style, + text, + } = props; + + const styles = getStyles(props); + + return ( + <div style={prepareStyles(Object.assign(styles.root, style))}> + {text} + </div> + ); +}; + +TextFieldHint.propTypes = { /** * @ignore * The material-ui theme applied to this component. @@ -21,43 +60,8 @@ const propTypes = { text: PropTypes.node, }; -const defaultProps = { +TextFieldHint.defaultProps = { show: true, }; -const TextFieldHint = (props) => { - const { - muiTheme, - show, - style, - text, - } = props; - - const { - prepareStyles, - textField: { - hintColor, - }, - } = muiTheme; - - const styles = { - root: { - position: 'absolute', - opacity: show ? 1 : 0, - color: hintColor, - transition: transitions.easeOut(), - bottom: 12, - }, - }; - - return ( - <div style={prepareStyles(Object.assign({}, styles.root, style))}> - {text} - </div> - ); -}; - -TextFieldHint.propTypes = propTypes; -TextFieldHint.defaultProps = defaultProps; - export default TextFieldHint; diff --git a/src/TextField/TextFieldLabel.js b/src/TextField/TextFieldLabel.js index 17530ea277fed8..d8be4bb4dedc68 100644 --- a/src/TextField/TextFieldLabel.js +++ b/src/TextField/TextFieldLabel.js @@ -25,15 +25,39 @@ function getStyles(props) { }; } -const propTypes = { - /** - * The css class name of the root element. - */ - className: PropTypes.string, +const TextFieldLabel = (props) => { + const { + muiTheme, + className, + children, + htmlFor, + onTouchTap, + } = props; + + const {prepareStyles} = muiTheme; + const styles = getStyles(props); + + return ( + <label + className={className} + style={prepareStyles(styles.root)} + htmlFor={htmlFor} + onTouchTap={onTouchTap} + > + {children} + </label> + ); +}; + +TextFieldLabel.propTypes = { /** * The label contents. */ children: PropTypes.node, + /** + * The css class name of the root element. + */ + className: PropTypes.string, /** * Disables the label if set to true. */ @@ -65,36 +89,9 @@ const propTypes = { style: PropTypes.object, }; -const defaultProps = { +TextFieldLabel.defaultProps = { disabled: false, shrink: false, }; -const TextFieldLabel = (props) => { - const { - muiTheme, - className, - children, - htmlFor, - onTouchTap, - } = props; - - const {prepareStyles} = muiTheme; - const styles = getStyles(props); - - return ( - <label - className={className} - style={prepareStyles(styles.root)} - htmlFor={htmlFor} - onTouchTap={onTouchTap} - > - {children} - </label> - ); -}; - -TextFieldLabel.propTypes = propTypes; -TextFieldLabel.defaultProps = defaultProps; - export default TextFieldLabel; diff --git a/src/styles/muiThemeable.js b/src/styles/muiThemeable.js index c527fdcfbab458..1d8c5a515b23a7 100644 --- a/src/styles/muiThemeable.js +++ b/src/styles/muiThemeable.js @@ -1,4 +1,4 @@ -import React, {Component, PropTypes} from 'react'; +import React, {PropTypes} from 'react'; import getMuiTheme from './getMuiTheme'; let DEFAULT_THEME; diff --git a/src/styles/themeDecorator.js b/src/styles/themeDecorator.js index 0d279be112971d..fe0d674f2e2bba 100644 --- a/src/styles/themeDecorator.js +++ b/src/styles/themeDecorator.js @@ -1,3 +1,4 @@ +/* eslint-disable react/prefer-es6-class */ import React, {PropTypes} from 'react'; import warning from 'warning'; diff --git a/src/styles/typography.js b/src/styles/typography.js index 03f320b7f49ff7..358bb29ad386f9 100644 --- a/src/styles/typography.js +++ b/src/styles/typography.js @@ -1,11 +1,11 @@ import { -fullBlack, -darkBlack, -lightBlack, -minBlack, -fullWhite, -darkWhite, -lightWhite, + fullBlack, + darkBlack, + lightBlack, + minBlack, + fullWhite, + darkWhite, + lightWhite, } from './colors'; class Typography { diff --git a/src/utils/styleResizable.js b/src/utils/styleResizable.js index fdda85cc42346c..d580ef3d8ac2ac 100644 --- a/src/utils/styleResizable.js +++ b/src/utils/styleResizable.js @@ -1,4 +1,12 @@ import Events from './events'; +import warning from 'warning'; + +let hasWarned; +const warn = () => { + warning(hasWarned, 'The \'material-ui/utils/styleResizable.js\' mixin has been deprecated.' + + ' Please do not use this mixin as it will be removed in an upcoming release.'); + hasWarned = true; +}; const Sizes = { SMALL: 1, @@ -23,6 +31,10 @@ export default { if (!this.manuallyBindResize) this.bindResize(); }, + componentWillMount() { + warn(); + }, + componentWillUnmount() { this.unbindResize(); }, diff --git a/src/utils/withWidth.js b/src/utils/withWidth.js new file mode 100644 index 00000000000000..7e6939dc7dd9a6 --- /dev/null +++ b/src/utils/withWidth.js @@ -0,0 +1,69 @@ +import React, {Component} from 'react'; +import EventListener from 'react-event-listener'; + +export const SMALL = 1; +export const MEDIUM = 2; +export const LARGE = 3; + +export default function withWidth(options = {}) { + const { + resizeInterval = 166, + } = options; + + return (MyComponent) => { + return class WithWidth extends Component { + state = { + /** + * For the server side rendering, + * let's set the width for the slower environment. + */ + width: SMALL, + }; + + componentDidMount() { + this.updateWidth(); + } + + componentWillUnmount() { + clearTimeout(this.deferTimer); + } + + handleResize = () => { + clearTimeout(this.deferTimer); + this.deferTimer = setTimeout(() => { + this.updateWidth(); + }, resizeInterval); + }; + + updateWidth() { + const innerWidth = window.innerWidth; + let width; + + if (innerWidth >= 992) { + width = LARGE; + } else if (innerWidth >= 768) { + width = MEDIUM; + } else { // innerWidth < 768 + width = SMALL; + } + + if (width !== this.state.width) { + this.setState({ + width: width, + }); + } + } + + render() { + return ( + <EventListener elementName="window" onResize={this.handleResize}> + <MyComponent + {...this.props} + width={this.state.width} + /> + </EventListener> + ); + } + }; + }; +}