Full RTL Support

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 = (
- <div style={this.getStyles()} onTouchTap={this._onHeaderClick}>
+ <div style={this.prepareStyles(this.getStyles())} onTouchTap={this._onHeaderClick}>
  material ui
  </div>
  );
@@ -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;

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 = <p style={styles.desc}>{this.props.desc}</p>
+ desc = <p style={this.prepareStyles(styles.desc)}>{this.props.desc}</p>
  } else {
- desc = <div style={styles.desc}>{this.props.desc}</div>
+ desc = <div style={this.prepareStyles(styles.desc)}>{this.props.desc}</div>
  }
  }
 
  let header;
  if (this.props.name.length > 0) {
- header = <h2 style={styles.headline}>{this.props.name}</h2>
+ header = <h2 style={this.prepareStyles(styles.headline)}>{this.props.name}</h2>
  }
 
  return (

docs/src/app/components/component-info.jsx

@@ -147,27 +147,27 @@ const ComponentInfo = React.createClass({
  let styles = this.getStyles();
  this.props.infoArray.forEach(function(info, i) {
 
- if (info.type) typesSpan = <span style={styles.type}>{info.type}</span>;
+ if (info.type) typesSpan = <span style={this.prepareStyles(styles.type)}>{info.type}</span>;
 
  if (i == this.props.infoArray.length - 1) {
  styles.desc = this.mergeStyles(styles.desc, styles.descWhenLastChild);
  }
 
  propElements.push(
  <tr key={i}>
- <td style={styles.name}>{info.name}</td>
- <td style={styles.desc}>
- <p style={styles.header}>{typesSpan}{info.header}</p>
- <p style={styles.p}>{info.desc}</p>
+ <td style={this.prepareStyles(styles.name)}>{info.name}</td>
+ <td style={this.prepareStyles(styles.desc)}>
+ <p style={this.prepareStyles(styles.header)}>{typesSpan}{info.header}</p>
+ <p style={this.prepareStyles(styles.p)}>{info.desc}</p>
  </td>
  </tr>
  );
  }, this);
 
  return (
- <div style={this.mergeAndPrefix(styles.root, this.props.style)}>
- <h3 style={styles.h3}>{this.props.name}</h3>
- <table style={styles.table}>
+ <div style={this.prepareStyles(styles.root, this.props.style)}>
+ <h3 style={this.prepareStyles(styles.h3)}>{this.props.name}</h3>
+ <table style={this.prepareStyles(styles.table)}>
  <tbody>
  {propElements}
  </tbody>

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({
  <RouteHandler />
  <AppLeftNav ref="leftNav" />
  <FullWidthSection style={styles.footer}>
- <p style={styles.p}>
+ <p style={this.prepareStyles(styles.p)}>
  Hand crafted with love by the engineers at <a style={styles.a} href="http://call-em-all.com">Call-Em-All</a> and our
- awesome <a style={styles.a} href="https://github.com/callemall/material-ui/graphs/contributors">contributors</a>.
+ awesome <a style={this.prepareStyles(styles.a)} href="https://github.com/callemall/material-ui/graphs/contributors">contributors</a>.
  </p>
  {githubButton2}
  </FullWidthSection>
@@ -183,8 +189,8 @@ const Master = React.createClass({
  style={styles.svgLogoContainer}
  linkButton={true}
  href="/#/home">
- <img style={styles.svgLogo} src="images/material-ui-logo.svg"/>
- <span style={styles.span}>material ui</span>
+ <img style={this.prepareStyles(styles.svgLogo)} src="images/material-ui-logo.svg"/>
+ <span style={this.prepareStyles(styles.span)}>material ui</span>
  </EnhancedButton>) : null;
 
  return(
@@ -194,7 +200,7 @@ const Master = React.createClass({
  rounded={false}
  style={styles.root}>
  {materialIcon}
- <div style={styles.container}>
+ <div style={this.prepareStyles(styles.container)}>
  <Tabs
  style={styles.tabs}
  value={this.state.tabIndex}

docs/src/app/components/mobile-tear-sheet.jsx

@@ -1,7 +1,14 @@
-let React = require('react');
+const React = require('react');
+const {Mixins} = require('material-ui');
+const { StylePropable } = Mixins;
 
 
-let MobileTearSheet = React.createClass({
+const MobileTearSheet = React.createClass({
+ mixins: [StylePropable],
+
+ contextTypes : {
+ muiTheme: React.PropTypes.func
+ },
 
  propTypes: {
  height: React.PropTypes.number
@@ -21,7 +28,6 @@ let MobileTearSheet = React.createClass({
  marginBottom: 24,
  marginRight: 24,
  width: 360
-
  },
 
  container: {
@@ -40,11 +46,11 @@ let MobileTearSheet = React.createClass({
  };
 
  return (
- <div style={styles.root}>
- <div style={styles.container}>
+ <div style={this.prepareStyles(styles.root)}>
+ <div style={this.prepareStyles(styles.container)}>
  {this.props.children}
  </div>
- <img style={styles.bottomTear} src="images/bottom-tear.svg" />
+ <img style={this.prepareStyles(styles.bottomTear)} src="images/bottom-tear.svg" />
  </div>
  );
  }

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 (
- <div style={styles.root}>
- <div style={styles.content}>
+ <div style={this.prepareStyles(styles.root)}>
+ <div style={this.prepareStyles(styles.content)}>
  <RouteHandler />
  </div>
- <div style={styles.secondaryNav}>
+ <div style={this.prepareStyles(styles.secondaryNav)}>
  <Menu
  ref="menuItems"
  zDepth={0}

src/app-bar.jsx

@@ -138,7 +138,7 @@ const AppBar = React.createClass({
  let menuElementRight;
  let styles = this.getStyles();
  let title = props.title;
- let iconRightStyle = this.mergeAndPrefix(styles.iconButton.style, {
+ let iconRightStyle = this.mergeStyles(styles.iconButton.style, {
  marginRight: -16,
  marginLeft: 'auto',
  }, props.iconStyleRight);
@@ -148,8 +148,8 @@ const AppBar = React.createClass({
  // If the title is a string, wrap in an h1 tag.
  // If not, just use it as a node.
  titleElement = typeof title === 'string' || title instanceof String ?
- <h1 style={this.mergeAndPrefix(styles.title, styles.mainElement)}>{title}</h1> :
- <div style={this.mergeAndPrefix(styles.mainElement)}>{title}</div>;
+ <h1 style={this.prepareStyles(styles.title, styles.mainElement)}>{title}</h1> :
+ <div style={this.prepareStyles(styles.mainElement)}>{title}</div>;
  }
 
  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 = (
- <div style={styles.iconButton.style}>
+ <div style={this.prepareStyles(styles.iconButton.style)}>
  {iconElementLeft}
  </div>
  );
  } else {
- let child = (props.iconClassNameLeft) ? '' : <NavigationMenu style={this.mergeAndPrefix(styles.iconButton.iconStyle)}/>;
+ let child = (props.iconClassNameLeft) ? '' : <NavigationMenu style={this.mergeStyles(styles.iconButton.iconStyle)}/>;
  menuElementLeft = (
  <IconButton
- style={this.mergeAndPrefix(styles.iconButton.style)}
- iconStyle={this.mergeAndPrefix(styles.iconButton.iconStyle)}
+ style={this.mergeStyles(styles.iconButton.style)}
+ iconStyle={this.mergeStyles(styles.iconButton.iconStyle)}
  iconClassName={props.iconClassNameLeft}
  onTouchTap={this._onLeftIconButtonTouchTap}>
  {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,15 +202,15 @@ const AppBar = React.createClass({
  }
 
  menuElementRight = (
- <div style={iconRightStyle}>
+ <div style={this.prepareStyles(iconRightStyle)}>
  {iconElementRight}
  </div>
  );
  } else if (props.iconClassNameRight) {
  menuElementRight = (
  <IconButton
  style={iconRightStyle}
- iconStyle={this.mergeAndPrefix(styles.iconButton.iconStyle)}
+ iconStyle={this.mergeStyles(styles.iconButton.iconStyle)}
  iconClassName={props.iconClassNameRight}
  onTouchTap={this._onRightIconButtonTouchTap}>
  </IconButton>
@@ -221,7 +221,7 @@ const AppBar = React.createClass({
  <Paper
  rounded={false}
  className={props.className}
- style={this.mergeAndPrefix(styles.root, props.style)}
+ style={this.mergeStyles(styles.root, props.style)}
  zDepth={props.zDepth}>
  {menuElementLeft}
  {titleElement}

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 (
- <div style={styles}>
+ <div style={this.prepareStyles(styles)}>
  {newChildren}
  </div>
  );

src/avatar.jsx

@@ -85,7 +85,7 @@ const Avatar = React.createClass({
  });
  }
 
- return <img {...other} src={src} style={this.mergeAndPrefix(styles.root, style)} />;
+ return <img {...other} src={src} style={this.prepareStyles(styles.root, style)} />;
  } 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 <div {...other} style={this.mergeAndPrefix(styles.root, style)}>
+ return <div {...other} style={this.prepareStyles(styles.root, style)}>
  {iconElement}
  {this.props.children}
  </div>;