From 5212f0d4718675061ea0d0351735966fc3759e12 Mon Sep 17 00:00:00 2001 From: Louy Date: Sat, 10 Oct 2015 15:33:16 +0300 Subject: [PATCH] Full RTL Support --- docs/src/app/components/app-left-nav.jsx | 40 ++++------ docs/src/app/components/component-doc.jsx | 6 +- docs/src/app/components/component-info.jsx | 16 ++-- docs/src/app/components/master.jsx | 18 +++-- docs/src/app/components/mobile-tear-sheet.jsx | 18 +++-- .../app/components/pages/page-with-nav.jsx | 7 +- src/app-bar.jsx | 24 +++--- src/app-canvas.jsx | 3 +- src/avatar.jsx | 4 +- src/before-after-wrapper.jsx | 36 ++++++++- src/buttons/flat-button-label.jsx | 9 +-- src/card/card-actions.jsx | 34 +++++++- src/card/card-header.jsx | 38 ++++++++- src/card/card-media.jsx | 42 ++++++++-- src/card/card-text.jsx | 32 +++++++- src/card/card-title.jsx | 36 ++++++++- src/circular-progress.jsx | 8 +- src/clearfix.jsx | 34 +++++++- src/date-picker/calendar-toolbar.jsx | 31 +++++++- src/date-picker/calendar.jsx | 45 ++++++++--- src/date-picker/date-display.jsx | 2 +- src/date-picker/date-picker.jsx | 21 ++++- src/date-picker/day-button.jsx | 6 +- src/date-picker/year-button.jsx | 4 +- src/dialog.jsx | 16 ++-- src/drop-down-icon.jsx | 4 +- src/drop-down-menu.jsx | 16 ++-- src/enhanced-button.jsx | 2 +- src/enhanced-switch.jsx | 16 ++-- src/enhanced-textarea.jsx | 29 +++++-- src/floating-action-button.jsx | 10 +-- src/font-icon.jsx | 2 +- src/grid-list/grid-list.jsx | 8 +- src/grid-list/grid-tile.jsx | 23 +++--- src/ink-bar.jsx | 2 +- src/left-nav.jsx | 14 ++-- src/linear-progress.jsx | 19 +++-- src/lists/list-divider.jsx | 2 +- src/lists/list-item.jsx | 10 +-- src/lists/list.jsx | 2 +- src/menu/link-menu-item.jsx | 2 +- src/menu/menu-item.jsx | 12 +-- src/menu/menu.jsx | 2 +- src/menu/subheader-menu-item.jsx | 2 +- src/menus/icon-menu.jsx | 2 +- src/menus/menu-divider.jsx | 2 +- src/menus/menu-item.jsx | 2 +- src/menus/menu.jsx | 4 +- src/mixins/style-propable.js | 11 +++ src/overlay.jsx | 32 +++++++- src/paper.jsx | 2 +- src/radio-button-group.jsx | 37 ++++++++- src/raised-button.jsx | 10 +-- src/refresh-indicator.jsx | 10 +-- src/slider.jsx | 15 ++-- src/snackbar.jsx | 4 +- src/styles/raw-themes/dark-raw-theme.js | 1 + src/styles/raw-themes/light-raw-theme.js | 1 + src/styles/theme-manager.js | 34 ++++++++ src/svg-icon.jsx | 2 +- src/table/table-body.jsx | 33 +++++++- src/table/table-footer.jsx | 4 +- src/table/table-header-column.jsx | 2 +- src/table/table-header.jsx | 2 +- src/table/table-row-column.jsx | 2 +- src/table/table-row.jsx | 2 +- src/table/table.jsx | 6 +- src/tabs/tab.jsx | 2 +- src/tabs/tabs.jsx | 6 +- src/text-field.jsx | 22 +++--- src/time-picker/clock-button.jsx | 6 +- src/time-picker/clock-hours.jsx | 38 ++++++++- src/time-picker/clock-minutes.jsx | 4 +- src/time-picker/clock-number.jsx | 2 +- src/time-picker/clock-pointer.jsx | 4 +- src/time-picker/clock.jsx | 4 +- src/time-picker/time-display.jsx | 10 +-- src/time-picker/time-picker.jsx | 2 +- src/toggle.jsx | 4 +- src/toolbar/toolbar-group.jsx | 2 +- src/toolbar/toolbar-separator.jsx | 2 +- src/toolbar/toolbar-title.jsx | 2 +- src/toolbar/toolbar.jsx | 4 +- src/tooltip.jsx | 6 +- src/transition-groups/scale-in-child.jsx | 32 +++++++- src/transition-groups/scale-in.jsx | 32 +++++++- src/transition-groups/slide-in-child.jsx | 32 +++++++- src/transition-groups/slide-in.jsx | 32 +++++++- src/utils/styles.js | 77 +++++++++++++++++++ 89 files changed, 967 insertions(+), 285 deletions(-) diff --git a/docs/src/app/components/app-left-nav.jsx b/docs/src/app/components/app-left-nav.jsx index b611ecca9310f1..244efcabbeb3c2 100644 --- a/docs/src/app/components/app-left-nav.jsx +++ b/docs/src/app/components/app-left-nav.jsx @@ -1,7 +1,8 @@ let React = require('react'); let Router = require('react-router'); -let { MenuItem, LeftNav, Styles } = require('material-ui'); +let { MenuItem, LeftNav, Mixins, Styles } = require('material-ui'); let { Colors, Spacing, Typography } = Styles; +let { StylePropable } = Mixins; let menuItems = [ { route: 'get-started', text: 'Get Started' }, @@ -14,15 +15,13 @@ let menuItems = [ ]; -class AppLeftNav extends React.Component { - - constructor() { - super(); - this.toggle = this.toggle.bind(this); - this._getSelectedIndex = this._getSelectedIndex.bind(this); - this._onLeftNavChange = this._onLeftNavChange.bind(this); - this._onHeaderClick = this._onHeaderClick.bind(this); - } +let AppLeftNav = React.createClass({ + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object, + router: React.PropTypes.func + }, getStyles() { return { @@ -37,11 +36,11 @@ class AppLeftNav extends React.Component { paddingTop: '0px', marginBottom: '8px' }; - } + }, render() { let header = ( -
+
material ui
); @@ -56,11 +55,11 @@ class AppLeftNav extends React.Component { selectedIndex={this._getSelectedIndex()} onChange={this._onLeftNavChange} /> ); - } + }, toggle() { this.refs.leftNav.toggle(); - } + }, _getSelectedIndex() { let currentItem; @@ -69,21 +68,16 @@ class AppLeftNav extends React.Component { currentItem = menuItems[i]; if (currentItem.route && this.context.router.isActive(currentItem.route)) return i; } - } + }, _onLeftNavChange(e, key, payload) { this.context.router.transitionTo(payload.route); - } + }, _onHeaderClick() { this.context.router.transitionTo('root'); this.refs.leftNav.close(); - } - -} - -AppLeftNav.contextTypes = { - router: React.PropTypes.func -}; + }, +}); module.exports = AppLeftNav; diff --git a/docs/src/app/components/component-doc.jsx b/docs/src/app/components/component-doc.jsx index 187637493ec2c8..6c4468a5b665e7 100644 --- a/docs/src/app/components/component-doc.jsx +++ b/docs/src/app/components/component-doc.jsx @@ -108,15 +108,15 @@ const ComponentDoc = React.createClass({ if (this.props.desc) { if ((typeof this.props.desc) == "string") { - desc =

{this.props.desc}

+ desc =

{this.props.desc}

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

{this.props.name}

+ header =

{this.props.name}

} return ( diff --git a/docs/src/app/components/component-info.jsx b/docs/src/app/components/component-info.jsx index 4be5c3f07c327a..095b90e0677444 100644 --- a/docs/src/app/components/component-info.jsx +++ b/docs/src/app/components/component-info.jsx @@ -147,7 +147,7 @@ const ComponentInfo = React.createClass({ let styles = this.getStyles(); this.props.infoArray.forEach(function(info, i) { - if (info.type) typesSpan = {info.type}; + if (info.type) typesSpan = {info.type}; if (i == this.props.infoArray.length - 1) { styles.desc = this.mergeStyles(styles.desc, styles.descWhenLastChild); @@ -155,19 +155,19 @@ const ComponentInfo = React.createClass({ propElements.push( - {info.name} - -

{typesSpan}{info.header}

-

{info.desc}

+ {info.name} + +

{typesSpan}{info.header}

+

{info.desc}

); }, this); return ( -
-

{this.props.name}

- +
+

{this.props.name}

+
{propElements} diff --git a/docs/src/app/components/master.jsx b/docs/src/app/components/master.jsx index c3cd9a1ce060d7..fcfd83ead9ab5b 100644 --- a/docs/src/app/components/master.jsx +++ b/docs/src/app/components/master.jsx @@ -16,15 +16,21 @@ const { AppBar, Paper} = require('material-ui'); const RouteHandler = Router.RouteHandler; +const { StylePropable } = Mixins; const { Colors, Spacing, Typography } = Styles; const ThemeManager = Styles.ThemeManager; const DefaultRawTheme = Styles.LightRawTheme; const Master = React.createClass({ + mixins: [StylePropable], + getInitialState () { + let muiTheme = ThemeManager.getMuiTheme(DefaultRawTheme); + // To switch to RTL... + // muiTheme = ThemeManager.modifyRawThemeDirection(muiTheme, 'rtl'); return { - muiTheme: ThemeManager.getMuiTheme(DefaultRawTheme), + muiTheme, }; }, @@ -123,9 +129,9 @@ const Master = React.createClass({ -

+

Hand crafted with love by the engineers at Call-Em-All and our - awesome contributors. + awesome contributors.

{githubButton2} @@ -183,8 +189,8 @@ const Master = React.createClass({ style={styles.svgLogoContainer} linkButton={true} href="/#/home"> - - material ui + + material ui ) : null; return( @@ -194,7 +200,7 @@ const Master = React.createClass({ rounded={false} style={styles.root}> {materialIcon} -
+
-
+
+
{this.props.children}
- +
); } diff --git a/docs/src/app/components/pages/page-with-nav.jsx b/docs/src/app/components/pages/page-with-nav.jsx index cdf3a70fa49321..d1ce20bf571489 100644 --- a/docs/src/app/components/pages/page-with-nav.jsx +++ b/docs/src/app/components/pages/page-with-nav.jsx @@ -12,6 +12,7 @@ let PageWithNav = React.createClass({ mixins: [StyleResizable, StylePropable], contextTypes: { + muiTheme: React.PropTypes.object, router: React.PropTypes.func }, @@ -63,11 +64,11 @@ let PageWithNav = React.createClass({ render() { let styles = this.getStyles(); return ( -
-
+
+
-
+
{title} : -
{title}
; +

{title}

: +
{title}
; } if (props.showMenuIconButton) { @@ -159,22 +159,22 @@ const AppBar = React.createClass({ switch (iconElementLeft.type.displayName) { case 'IconButton': iconElementLeft = React.cloneElement(iconElementLeft, { - iconStyle: this.mergeAndPrefix(styles.iconButton.iconStyle), + iconStyle: this.mergeStyles(styles.iconButton.iconStyle), }); break; } menuElementLeft = ( -
+
{iconElementLeft}
); } else { - let child = (props.iconClassNameLeft) ? '' : ; + let child = (props.iconClassNameLeft) ? '' : ; menuElementLeft = ( {child} @@ -190,7 +190,7 @@ const AppBar = React.createClass({ case 'IconMenu': case 'IconButton': iconElementRight = React.cloneElement(iconElementRight, { - iconStyle: this.mergeAndPrefix(styles.iconButton.iconStyle), + iconStyle: this.mergeStyles(styles.iconButton.iconStyle), }); break; @@ -202,7 +202,7 @@ const AppBar = React.createClass({ } menuElementRight = ( -
+
{iconElementRight}
); @@ -210,7 +210,7 @@ const AppBar = React.createClass({ menuElementRight = ( @@ -221,7 +221,7 @@ const AppBar = React.createClass({ {menuElementLeft} {titleElement} diff --git a/src/app-canvas.jsx b/src/app-canvas.jsx index 2e4bc084b1806a..f72346e0c3cd5b 100644 --- a/src/app-canvas.jsx +++ b/src/app-canvas.jsx @@ -40,6 +40,7 @@ const AppCanvas = React.createClass({ height: '100%', backgroundColor: this.state.muiTheme.rawTheme.palette.canvasColor, WebkitFontSmoothing: 'antialiased', + direction: 'ltr', }; let newChildren = React.Children.map(this.props.children, (currentChild) => { @@ -60,7 +61,7 @@ const AppCanvas = React.createClass({ }, this); return ( -
+
{newChildren}
); diff --git a/src/avatar.jsx b/src/avatar.jsx index 9ff730642e5dfc..7288ff5d3d4ec7 100644 --- a/src/avatar.jsx +++ b/src/avatar.jsx @@ -85,7 +85,7 @@ const Avatar = React.createClass({ }); } - return ; + return ; } else { styles.root = this.mergeStyles(styles.root, { backgroundColor: backgroundColor, @@ -104,7 +104,7 @@ const Avatar = React.createClass({ style: this.mergeStyles(styleIcon, icon.props.style), }) : null; - return
+ return
{iconElement} {this.props.children}
; diff --git a/src/before-after-wrapper.jsx b/src/before-after-wrapper.jsx index ad866568fd005c..d7ce1a17ff2321 100644 --- a/src/before-after-wrapper.jsx +++ b/src/before-after-wrapper.jsx @@ -1,6 +1,8 @@ const React = require('react'); const StylePropable = require('./mixins/style-propable'); const AutoPrefix = require('./styles/auto-prefix'); +const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme'); +const ThemeManager = require('./styles/theme-manager'); /** * BeforeAfterWrapper @@ -40,6 +42,10 @@ const BeforeAfterWrapper = React.createClass({ mixins: [StylePropable], + contextTypes: { + muiTheme: React.PropTypes.object, + }, + propTypes: { beforeStyle: React.PropTypes.object, afterStyle: React.PropTypes.object, @@ -56,6 +62,30 @@ const BeforeAfterWrapper = React.createClass({ }; }, + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + 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 { beforeStyle, @@ -74,20 +104,20 @@ const BeforeAfterWrapper = React.createClass({ if (this.props.beforeStyle) beforeElement = React.createElement(this.props.beforeElementType, { - style: this.mergeAndPrefix(beforeStyle, this.props.beforeStyle), + style: this.prepareStyles(beforeStyle, this.props.beforeStyle), key: "::before", }); if (this.props.afterStyle) afterElement = React.createElement(this.props.afterElementType, { - style: this.mergeAndPrefix(afterStyle, this.props.afterStyle), + style: this.prepareStyles(afterStyle, this.props.afterStyle), key: "::after", }); let children = [beforeElement, this.props.children, afterElement]; let props = other; - props.style = this.props.style; + props.style = this.prepareStyles(this.props.style); return React.createElement(this.props.elementType, props, children); }, diff --git a/src/buttons/flat-button-label.jsx b/src/buttons/flat-button-label.jsx index 41160ddf7ca97a..145082b7dc1857 100644 --- a/src/buttons/flat-button-label.jsx +++ b/src/buttons/flat-button-label.jsx @@ -1,14 +1,13 @@ const React = require('react/addons'); const ContextPure = require('../mixins/context-pure'); +const StylePropable = require('../mixins/style-propable'); const Styles = require('../utils/styles'); const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); const ThemeManager = require('../styles/theme-manager'); const FlatButtonLabel = React.createClass({ - mixins: [ - ContextPure, - ], + mixins: [ContextPure, StylePropable], contextTypes: { muiTheme: React.PropTypes.object, @@ -59,13 +58,13 @@ const FlatButtonLabel = React.createClass({ const contextKeys = this.constructor.getRelevantContextKeys(this.state.muiTheme); - const mergedRootStyles = Styles.mergeAndPrefix({ + const mergedRootStyles = this.mergeAndPrefix({ position: 'relative', padding: '0 ' + contextKeys.spacingDesktopGutterLess + 'px', }, style); return ( - {label} + {label} ); }, diff --git a/src/card/card-actions.jsx b/src/card/card-actions.jsx index 2e797cb9fee97d..02be4876104fba 100644 --- a/src/card/card-actions.jsx +++ b/src/card/card-actions.jsx @@ -1,10 +1,40 @@ const React = require('react'); const StylePropable = require('../mixins/style-propable'); +const ThemeManager = require('../styles/theme-manager'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); const CardActions = React.createClass({ mixins: [StylePropable], + contextTypes: { + muiTheme: React.PropTypes.object, + }, + + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + 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}); + }, + getStyles() { return { root: { @@ -29,10 +59,8 @@ const CardActions = React.createClass({ }); }); - let mergedStyles = this.mergeAndPrefix(styles.root, this.props.style); - return ( -
+
{children}
); diff --git a/src/card/card-header.jsx b/src/card/card-header.jsx index a9e21c2ada140d..9d68f8220b6857 100644 --- a/src/card/card-header.jsx +++ b/src/card/card-header.jsx @@ -2,12 +2,42 @@ const React = require('react'); const Styles = require('../styles'); const Avatar = require('../avatar'); const StylePropable = require('../mixins/style-propable'); +const ThemeManager = require('../styles/theme-manager'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); const CardHeader = React.createClass({ mixins: [StylePropable], + contextTypes: { + muiTheme: React.PropTypes.object, + }, + + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + 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}); + }, + propTypes: { title: React.PropTypes.string, titleColor: React.PropTypes.string, @@ -59,10 +89,10 @@ const CardHeader = React.createClass({ render() { let styles = this.getStyles(); - let rootStyle = this.mergeAndPrefix(styles.root, this.props.style); - let textStyle = this.mergeAndPrefix(styles.text, this.props.textStyle); - let titleStyle = this.mergeAndPrefix(styles.title, this.props.titleStyle); - let subtitleStyle = this.mergeAndPrefix(styles.subtitle, this.props.subtitleStyle); + let rootStyle = this.prepareStyles(styles.root, this.props.style); + let textStyle = this.prepareStyles(styles.text, this.props.textStyle); + let titleStyle = this.prepareStyles(styles.title, this.props.titleStyle); + let subtitleStyle = this.prepareStyles(styles.subtitle, this.props.subtitleStyle); let avatar = this.props.avatar; if (React.isValidElement(this.props.avatar)) { diff --git a/src/card/card-media.jsx b/src/card/card-media.jsx index 0196ddd7556853..99f8a7fbd14e60 100644 --- a/src/card/card-media.jsx +++ b/src/card/card-media.jsx @@ -1,12 +1,42 @@ const React = require('react'); const Styles = require('../styles'); const StylePropable = require('../mixins/style-propable'); +const ThemeManager = require('../styles/theme-manager'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); const CardMedia = React.createClass({ mixins:[StylePropable], + contextTypes: { + muiTheme: React.PropTypes.object, + }, + + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + 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}); + }, + propTypes: { overlay: React.PropTypes.node, style: React.PropTypes.object, @@ -53,14 +83,14 @@ const CardMedia = React.createClass({ render() { let styles = this.getStyles(); - let rootStyle = this.mergeAndPrefix(styles.root, this.props.style); - let mediaStyle = this.mergeAndPrefix(styles.media, this.props.mediaStyle); - let overlayContainerStyle = this.mergeAndPrefix(styles.overlayContainer, this.props.overlayContainerStyle); - let overlayContentStyle = this.mergeAndPrefix(styles.overlayContent, this.props.overlayContentStyle); - let overlayStyle = this.mergeAndPrefix(styles.overlay, this.props.overlayStyle); + let rootStyle = this.prepareStyles(styles.root, this.props.style); + let mediaStyle = this.prepareStyles(styles.media, this.props.mediaStyle); + let overlayContainerStyle = this.prepareStyles(styles.overlayContainer, this.props.overlayContainerStyle); + let overlayContentStyle = this.prepareStyles(styles.overlayContent, this.props.overlayContentStyle); + let overlayStyle = this.prepareStyles(styles.overlay, this.props.overlayStyle); let children = React.Children.map(this.props.children, (child) => { - return React.cloneElement(child, {style: this.mergeAndPrefix(styles.mediaChild, child.props.style)}); + return React.cloneElement(child, {style: this.prepareStyles(styles.mediaChild, child.props.style)}); }); let overlayChildren = React.Children.map(this.props.overlay, (child) => { diff --git a/src/card/card-text.jsx b/src/card/card-text.jsx index 68da7fec300a80..021f7e6ac228fe 100644 --- a/src/card/card-text.jsx +++ b/src/card/card-text.jsx @@ -1,12 +1,42 @@ const React = require('react'); const Styles = require('../styles'); const StylePropable = require('../mixins/style-propable'); +const ThemeManager = require('../styles/theme-manager'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); const CardText = React.createClass({ mixins:[StylePropable], + contextTypes: { + muiTheme: React.PropTypes.object, + }, + + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + 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}); + }, + propTypes: { color: React.PropTypes.string, style: React.PropTypes.object, @@ -32,7 +62,7 @@ const CardText = React.createClass({ render() { let styles = this.getStyles(); - let rootStyle = this.mergeAndPrefix(styles.root, this.props.style); + let rootStyle = this.prepareStyles(styles.root, this.props.style); return (
diff --git a/src/card/card-title.jsx b/src/card/card-title.jsx index 098ddafb83a639..b4347a5a4725dc 100644 --- a/src/card/card-title.jsx +++ b/src/card/card-title.jsx @@ -1,12 +1,42 @@ const React = require('react'); const Styles = require('../styles'); const StylePropable = require('../mixins/style-propable'); +const ThemeManager = require('../styles/theme-manager'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); const CardTitle = React.createClass({ mixins:[StylePropable], + contextTypes: { + muiTheme: React.PropTypes.object, + }, + + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + 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}); + }, + propTypes: { title: React.PropTypes.string, titleColor: React.PropTypes.string, @@ -48,9 +78,9 @@ const CardTitle = React.createClass({ render() { let styles = this.getStyles(); - let rootStyle = this.mergeAndPrefix(styles.root, this.props.style); - let titleStyle = this.mergeAndPrefix(styles.title, this.props.titleStyle); - let subtitleStyle = this.mergeAndPrefix(styles.subtitle, this.props.subtitleStyle); + let rootStyle = this.prepareStyles(styles.root, this.props.style); + let titleStyle = this.prepareStyles(styles.title, this.props.titleStyle); + let subtitleStyle = this.prepareStyles(styles.subtitle, this.props.subtitleStyle); return (
diff --git a/src/circular-progress.jsx b/src/circular-progress.jsx index 9abeaf00f07104..4a7dc24760e02c 100644 --- a/src/circular-progress.jsx +++ b/src/circular-progress.jsx @@ -185,10 +185,10 @@ const CircularProgress = React.createClass({ let styles = this.getStyles(size || 1); return ( -
-
- - +
+ +
diff --git a/src/clearfix.jsx b/src/clearfix.jsx index a2f34b49ee78a5..d2dbc6816bd7ee 100644 --- a/src/clearfix.jsx +++ b/src/clearfix.jsx @@ -1,8 +1,40 @@ const React = require('react'); const BeforeAfterWrapper = require('./before-after-wrapper'); +const StylePropable = require('./mixins/style-propable'); +const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme'); +const ThemeManager = require('./styles/theme-manager'); const ClearFix = React.createClass({ + mixins: [StylePropable], + + contextTypes: { + muiTheme: React.PropTypes.object, + }, + + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + 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 { @@ -25,7 +57,7 @@ const ClearFix = React.createClass({ {...other} beforeStyle={before()} afterStyle={after} - style={this.props.style}> + style={style}> {this.props.children} ); diff --git a/src/date-picker/calendar-toolbar.jsx b/src/date-picker/calendar-toolbar.jsx index e039827505c8a9..9a459d453fd31d 100644 --- a/src/date-picker/calendar-toolbar.jsx +++ b/src/date-picker/calendar-toolbar.jsx @@ -6,8 +6,24 @@ const ToolbarGroup = require('../toolbar/toolbar-group'); const NavigationChevronLeft = require('../svg-icons/navigation/chevron-left'); const NavigationChevronRight = require('../svg-icons/navigation/chevron-right'); const SlideInTransitionGroup = require('../transition-groups/slide-in'); +const ThemeManager = require('../styles/theme-manager'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); const CalendarToolbar = React.createClass({ + contextTypes: { + muiTheme: React.PropTypes.object, + }, + + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, propTypes: { displayDate: React.PropTypes.object.isRequired, @@ -25,11 +41,17 @@ const CalendarToolbar = React.createClass({ getInitialState() { return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), transitionDirection: 'up', }; }, - componentWillReceiveProps(nextProps) { + //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}); + let direction; if (nextProps.displayDate !== this.props.displayDate) { @@ -66,6 +88,9 @@ const CalendarToolbar = React.createClass({ let year = this.props.displayDate.getFullYear(); let styles = this._styles(); + const nextButtonIcon = this.state.muiTheme.isRtl ? : ; + const prevButtonIcon = this.state.muiTheme.isRtl ? : ; + return ( - + {nextButtonIcon} @@ -88,7 +113,7 @@ const CalendarToolbar = React.createClass({ style={styles.button} disabled={!this.props.nextMonth} onTouchTap={this._nextMonthTouchTap}> - + {prevButtonIcon} diff --git a/src/date-picker/calendar.jsx b/src/date-picker/calendar.jsx index 8df0ce062464c4..fb3b144742c64a 100644 --- a/src/date-picker/calendar.jsx +++ b/src/date-picker/calendar.jsx @@ -10,12 +10,29 @@ const CalendarToolbar = require('./calendar-toolbar'); const DateDisplay = require('./date-display'); const SlideInTransitionGroup = require('../transition-groups/slide-in'); const ClearFix = require('../clearfix'); +const ThemeManager = require('../styles/theme-manager'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); const Calendar = React.createClass({ mixins: [StylePropable, WindowListenable], + contextTypes: { + muiTheme: React.PropTypes.object, + }, + + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + propTypes: { disableYearSelection: React.PropTypes.bool, initialDate: React.PropTypes.object, @@ -43,6 +60,7 @@ const Calendar = React.createClass({ getInitialState() { return { + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), displayDate: DateTime.getFirstDayOfMonth(this.props.initialDate), displayMonthDay: this.props.shouldShowMonthDayPickerFirst || true, selectedDate: this.props.initialDate, @@ -51,7 +69,12 @@ const Calendar = React.createClass({ }; }, - componentWillReceiveProps(nextProps) { + //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}); + if (nextProps.initialDate !== this.props.initialDate) { let d = nextProps.initialDate || new Date(); this.setState({ @@ -122,6 +145,8 @@ const Calendar = React.createClass({ styles.calendarContainer.display = 'none'; } + const weekTitleDayStyle = this.prepareStyles(styles.weekTitleDay); + return ( @@ -135,7 +160,7 @@ const Calendar = React.createClass({ mode={this.props.mode} weekCount={weekCount} /> -
+
-
  • S
    • -
  • M
    • -
  • T
    • -
  • W
    • -
  • T
    • -
  • F
    • -
  • S
    • +
  • S
    • +
  • M
    • +
  • T
    • +
  • W
    • +
  • T
    • +
  • F
    • +
  • S
    • -
    +
    {this._yearSelector()}
    diff --git a/src/date-picker/date-display.jsx b/src/date-picker/date-display.jsx index 669169e76631fd..53f335aa68f2ee 100644 --- a/src/date-picker/date-display.jsx +++ b/src/date-picker/date-display.jsx @@ -142,7 +142,7 @@ const DateDisplay = React.createClass({ let styles = this.getStyles(); return ( -
    +
    diff --git a/src/date-picker/date-picker.jsx b/src/date-picker/date-picker.jsx index 1be94c03642005..eb1c8466825086 100644 --- a/src/date-picker/date-picker.jsx +++ b/src/date-picker/date-picker.jsx @@ -4,12 +4,29 @@ const WindowListenable = require('../mixins/window-listenable'); const DateTime = require('../utils/date-time'); const DatePickerDialog = require('./date-picker-dialog'); const TextField = require('../text-field'); +const ThemeManager = require('../styles/theme-manager'); +const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); const DatePicker = React.createClass({ mixins: [StylePropable, WindowListenable], + contextTypes: { + muiTheme: React.PropTypes.object, + }, + + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + propTypes: { autoOk: React.PropTypes.bool, defaultDate: React.PropTypes.object, @@ -38,6 +55,7 @@ const DatePicker = React.createClass({ formatDate: DateTime.format, autoOk: false, showYearSelector: false, + style: {}, }; }, @@ -45,6 +63,7 @@ const DatePicker = React.createClass({ return { date: this._isControlled() ? this._getControlledDate() : this.props.defaultDate, dialogDate: new Date(), + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, @@ -79,7 +98,7 @@ const DatePicker = React.createClass({ } = this.props; return ( -
    +
    -
    - {this.props.date.getDate()} +
    + {this.props.date.getDate()} ) : ( - + ); }, diff --git a/src/date-picker/year-button.jsx b/src/date-picker/year-button.jsx index b26dfc963f8a13..6427d06a6b350b 100644 --- a/src/date-picker/year-button.jsx +++ b/src/date-picker/year-button.jsx @@ -115,8 +115,8 @@ const YearButton = React.createClass({ onMouseEnter={this._handleMouseEnter} onMouseLeave={this._handleMouseLeave} onTouchTap={this._handleTouchTap}> -
    - {year} +
    + {year} ); }, diff --git a/src/dialog.jsx b/src/dialog.jsx index d389bd7abe0cac..6322dc377d4512 100644 --- a/src/dialog.jsx +++ b/src/dialog.jsx @@ -76,7 +76,7 @@ const TransitionItem = React.createClass({ ...other, } = this.props; - return
    + return
    {this.props.children}
    ; }, @@ -202,15 +202,15 @@ let Dialog = React.createClass({ if (this.state.open) { - main = this.mergeAndPrefix(main, { + main = this.mergeStyles(main, { left: 0, transition: Transitions.easeOut('0ms', 'left', '0ms'), }); } return { - main: this.mergeAndPrefix(main, this.props.style), - content: this.mergeAndPrefix(content, this.props.contentStyle), + main: this.mergeStyles(main, this.props.style), + content: this.mergeStyles(content, this.props.contentStyle), paper: { background: this.state.muiTheme.rawTheme.palette.canvasColor, }, @@ -227,12 +227,12 @@ let Dialog = React.createClass({ // If the title is a string, wrap in an h3 tag. // If not, just use it as a node. title = Object.prototype.toString.call(this.props.title) === '[object String]' ? -

    {this.props.title}

    : +

    {this.props.title}

    : this.props.title; } return ( -
    +
    {this.state.open && {title} -
    +
    {this.props.children}
    @@ -334,7 +334,7 @@ let Dialog = React.createClass({ } actionContainer = ( -
    +
    {actionObjects}
    ); diff --git a/src/drop-down-icon.jsx b/src/drop-down-icon.jsx index a851a4e7da9fbc..d856c49926e632 100644 --- a/src/drop-down-icon.jsx +++ b/src/drop-down-icon.jsx @@ -108,11 +108,11 @@ const DropDownIcon = React.createClass({ let styles = this.getStyles(); return ( -
    +
    {this.props.iconLigature} + style={this.prepareStyles(iconStyle)}>{this.props.iconLigature} {this.props.children}
    - - -
    + + +
    {displayValue}
    - -
    + +
    - {this.state.open &&
    } + {this.state.open &&
    }
    ); }, diff --git a/src/enhanced-button.jsx b/src/enhanced-button.jsx index a21b1f7a8e89da..78f8691ff188a2 100644 --- a/src/enhanced-button.jsx +++ b/src/enhanced-button.jsx @@ -150,7 +150,7 @@ const EnhancedButton = React.createClass({ ...other, } = this.props; - const mergedStyles = this.mergeAndPrefix({ + const mergedStyles = this.prepareStyles({ border: 10, background: 'none', boxSizing: 'border-box', diff --git a/src/enhanced-switch.jsx b/src/enhanced-switch.jsx index 6edd67fadd34b1..6463bc401b9522 100644 --- a/src/enhanced-switch.jsx +++ b/src/enhanced-switch.jsx @@ -206,8 +206,8 @@ const EnhancedSwitch = React.createClass({ } = this.props; let styles = this.getStyles(); - let wrapStyles = this.mergeAndPrefix(styles.wrap, this.props.iconStyle); - let rippleStyle = this.mergeAndPrefix(styles.ripple, this.props.rippleStyle); + let wrapStyles = this.prepareStyles(styles.wrap, this.props.iconStyle); + let rippleStyle = this.prepareStyles(styles.ripple, this.props.rippleStyle); let rippleColor = this.props.hasOwnProperty('rippleColor') ? this.props.rippleColor : this.getTheme().primary1Color; @@ -218,7 +218,7 @@ const EnhancedSwitch = React.createClass({ let inputId = this.props.id || UniqueId.generate(); - let labelStyle = this.mergeAndPrefix(styles.label, this.props.labelStyle); + let labelStyle = this.prepareStyles(styles.label, this.props.labelStyle); let labelElement = this.props.label ? (
    ) : (
    -
    +
    {ripples}
    ); @@ -297,19 +297,19 @@ const EnhancedSwitch = React.createClass({ // Position is left if not defined or invalid. let elementsInOrder = (labelPositionExist && (this.props.labelPosition.toUpperCase() === "RIGHT")) ? ( - + {switchElement} {labelElement} ) : ( - + {labelElement} {switchElement} ); return ( -
    +
    {inputElement} {elementsInOrder}
    diff --git a/src/enhanced-textarea.jsx b/src/enhanced-textarea.jsx index 3a9a47e3914706..dcd0e61640243f 100644 --- a/src/enhanced-textarea.jsx +++ b/src/enhanced-textarea.jsx @@ -1,6 +1,7 @@ const React = require('react'); const StylePropable = require('./mixins/style-propable'); -const AutoPrefix = require('./styles/auto-prefix'); +const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme'); +const ThemeManager = require('./styles/theme-manager'); const rowsHeight = 24; @@ -28,6 +29,21 @@ const EnhancedTextarea = React.createClass({ mixins: [StylePropable], + contextTypes: { + muiTheme: React.PropTypes.object, + }, + + //for passing default theme context to children + childContextTypes: { + muiTheme: React.PropTypes.object, + }, + + getChildContext () { + return { + muiTheme: this.state.muiTheme, + }; + }, + propTypes: { onChange: React.PropTypes.func, onHeightChange: React.PropTypes.func, @@ -45,6 +61,7 @@ const EnhancedTextarea = React.createClass({ getInitialState() { return { height: this.props.rows * rowsHeight, + muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, @@ -78,10 +95,10 @@ const EnhancedTextarea = React.createClass({ } return ( -
    +