Full RTL Support

mui · Oct 11, 2015 · 5212f0d · 5212f0d
1 parent c2a756f
commit 5212f0d
Show file tree

Hide file tree

Showing 89 changed files with 967 additions and 285 deletions.
diff --git 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 = (
-      <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;
diff --git 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 = <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 (

diff --git a/docs/src/app/components/component-info.jsx b/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>

diff --git 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({
         <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}

diff --git a/docs/src/app/components/mobile-tear-sheet.jsx b/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>
     );
   }

diff --git 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 (
-      <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}

diff --git a/src/app-bar.jsx b/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}

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

diff --git a/src/avatar.jsx b/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>;