From 4ac28cc9888502c65c801214dda52e771a10b16a Mon Sep 17 00:00:00 2001 From: BobertForever Date: Tue, 8 Dec 2015 15:46:35 -0600 Subject: [PATCH] Move a few components to es6 with mixin decorator --- package.json | 1 + src/app-bar.jsx | 71 +++++++++++++++++++++++----------------------- src/app-canvas.jsx | 46 ++++++++++++++---------------- src/avatar.jsx | 57 ++++++++++++++++++------------------- 4 files changed, 85 insertions(+), 90 deletions(-) diff --git a/package.json b/package.json index 6f8d88f615c6b5..edb494204feecb 100644 --- a/package.json +++ b/package.json @@ -53,6 +53,7 @@ "babelify": "^6.1.3", "browserify-istanbul": "^0.2.1", "chai": "^3.2.0", + "core-decorators": "^0.9.1", "eslint": "^1.8.0", "eslint-loader": "^1.0.0", "eslint-plugin-react": "^3.2.2", diff --git a/src/app-bar.jsx b/src/app-bar.jsx index 23dc53ecbaaa53..4e376a40a49013 100644 --- a/src/app-bar.jsx +++ b/src/app-bar.jsx @@ -7,27 +7,34 @@ import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; import ThemeManager from './styles/theme-manager'; import Paper from './paper'; import PropTypes from './utils/prop-types'; +import {autobind, mixin} from 'core-decorators'; -const AppBar = React.createClass({ +@mixin(StylePropable) +export default class AppBar extends React.Component { + constructor(props, context) { + super(props, context); - mixins: [StylePropable], + this.state = { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + }; + } - contextTypes: { + //for passing default theme context to children + static childContextTypes = { muiTheme: React.PropTypes.object, - }, + } - //for passing default theme context to children - childContextTypes: { + static contextTypes = { muiTheme: React.PropTypes.object, - }, + } - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, + static defaultProps = { + showMenuIconButton: true, + title: '', + zDepth: 1, + } - propTypes: { + static propTypes = { /** * Can be used to render a tab inside an app bar for instance. */ @@ -107,28 +114,20 @@ const AppBar = React.createClass({ * The shadow of the app bar is also dependent on this property. */ zDepth: PropTypes.zDepth, - }, + } - getInitialState() { + getChildContext() { return { - muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + muiTheme: this.state.muiTheme, }; - }, + } //to update theme inside state whenever a new theme is passed down //from the parent / owner using context componentWillReceiveProps(nextProps, nextContext) { let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; this.setState({muiTheme: newMuiTheme}); - }, - - getDefaultProps() { - return { - showMenuIconButton: true, - title: '', - zDepth: 1, - }; - }, + } componentDidMount() { if (process.env.NODE_ENV !== 'production') { @@ -146,7 +145,7 @@ const AppBar = React.createClass({ ); } } - }, + } getStyles() { let spacing = this.state.muiTheme.rawTheme.spacing; @@ -199,7 +198,7 @@ const AppBar = React.createClass({ }; return styles; - }, + } render() { let { @@ -314,26 +313,26 @@ const AppBar = React.createClass({ {children} ); - }, + } + @autobind _onLeftIconButtonTouchTap(event) { if (this.props.onLeftIconButtonTouchTap) { this.props.onLeftIconButtonTouchTap(event); } - }, + } + @autobind _onRightIconButtonTouchTap(event) { if (this.props.onRightIconButtonTouchTap) { this.props.onRightIconButtonTouchTap(event); } - }, + } + @autobind _onTitleTouchTap(event) { if (this.props.onTitleTouchTap) { this.props.onTitleTouchTap(event); } - }, - -}); - -export default AppBar; + } +} diff --git a/src/app-canvas.jsx b/src/app-canvas.jsx index 370ce35142566e..ed1b1cb44510da 100644 --- a/src/app-canvas.jsx +++ b/src/app-canvas.jsx @@ -2,42 +2,43 @@ import React from 'react'; import StylePropable from './mixins/style-propable'; import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; import ThemeManager from './styles/theme-manager'; +import {mixin} from 'core-decorators'; -const AppCanvas = React.createClass({ +@mixin(StylePropable) +export default class AppCanvas extends React.Component { + constructor(props, context) { + super(props, context); - mixins: [StylePropable], + this.state = { + muiTheme: context.muiTheme ? context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + }; + } - contextTypes: { + //for passing default theme context to children + static childContextTypes = { muiTheme: React.PropTypes.object, - }, - - propTypes: { - children: React.PropTypes.node, - }, + } - //for passing default theme context to children - childContextTypes: { + static contextTypes = { muiTheme: React.PropTypes.object, - }, + } + + static propTypes = { + children: React.PropTypes.node, + } getChildContext() { return { muiTheme: this.state.muiTheme, }; - }, - - getInitialState() { - return { - muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), - }; - }, + } //to update theme inside state whenever a new theme is passed down //from the parent / owner using context componentWillReceiveProps(nextProps, nextContext) { let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; this.setState({muiTheme: newMuiTheme}); - }, + } render() { let styles = { @@ -69,8 +70,5 @@ const AppCanvas = React.createClass({ {newChildren} ); - }, - -}); - -export default AppCanvas; + } +} diff --git a/src/avatar.jsx b/src/avatar.jsx index cab5f903b8b2dd..30e183cd9d1e3e 100644 --- a/src/avatar.jsx +++ b/src/avatar.jsx @@ -3,27 +3,34 @@ import StylePropable from './mixins/style-propable'; import Colors from './styles/colors'; import DefaultRawTheme from './styles/raw-themes/light-raw-theme'; import ThemeManager from './styles/theme-manager'; +import {mixin} from 'core-decorators'; -const Avatar = React.createClass({ +@mixin(StylePropable) +export default class Avatar extends React.Component { + constructor(props, context) { + super(props, context); - mixins: [StylePropable], + this.state = { + muiTheme: context.muiTheme ? context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + }; + } - contextTypes: { + //for passing default theme context to children + static childContextTypes = { muiTheme: React.PropTypes.object, - }, + } - //for passing default theme context to children - childContextTypes: { + static contextTypes = { muiTheme: React.PropTypes.object, - }, + } - getChildContext() { - return { - muiTheme: this.state.muiTheme, - }; - }, + static defaultProps = { + backgroundColor: Colors.grey400, + color: Colors.white, + size: 40, + } - propTypes: { + static propTypes = { /** * The backgroundColor of the avatar. Does not apply to image avatars. */ @@ -63,28 +70,20 @@ const Avatar = React.createClass({ * Override the inline-styles of the root element. */ style: React.PropTypes.object, - }, + } - getInitialState() { + getChildContext() { return { - muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), + muiTheme: this.state.muiTheme, }; - }, + } //to update theme inside state whenever a new theme is passed down //from the parent / owner using context componentWillReceiveProps(nextProps, nextContext) { let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; this.setState({muiTheme: newMuiTheme}); - }, - - getDefaultProps() { - return { - backgroundColor: Colors.grey400, - color: Colors.white, - size: 40, - }; - }, + } render() { let { @@ -156,7 +155,5 @@ const Avatar = React.createClass({ ); } - }, -}); - -export default Avatar; + } +}