[doc] add example for rtl

src/examples/app/app.js

@@ -18,6 +18,7 @@ import ExampleToolbox from '../example-toolbox/example-toolbox';
 import ExampleToolboxFixed from '../example-toolbox-fixed/example-toolbox-fixed';
 import ExampleBug6 from '../example-bug6/example-bug6';
 import ExampleBug11 from '../example-bug11/example-bug11';
+import ExampleRtl from '../example-rtl/example-rtl';
 
 injectTapEventPlugin();
 
@@ -41,6 +42,7 @@ const App = () => {
 					<Route component={ExampleToolboxFixed} path="/toolbox-fixed" />
 					<Route component={ExampleBug6} path="/bug6" />
 					<Route component={ExampleBug11} path="/bug11" />
+					<Route component={ExampleRtl} path="/rtl" />
 				</Router>
 			</div>
 		</MuiThemeProvider>

src/examples/example-rtl/example-rtl.js

@@ -0,0 +1,105 @@
+import React from 'react';
+import Avatar from 'material-ui/Avatar';
+import { blue500 } from 'material-ui/styles/colors';
+import IconEdit from 'material-ui/svg-icons/image/edit';
+import RaisedButton from 'material-ui/RaisedButton';
+import { SpeedDial, BubbleList, BubbleListItem } from '../../speed-dial';
+
+const avatarImgUrl = 'http://lorempixel.com/80/80/people';
+const list = {
+	items: [
+		{
+			primaryText: 'Kerem Suer',
+			rightAvatar: <Avatar src={`${avatarImgUrl}/6`} />,
+		},
+		{
+			primaryText: 'Points',
+			rightAvatar: <Avatar src={`${avatarImgUrl}/7`} />,
+		},
+		{
+			primaryText: 'Write',
+			rightAvatar: <Avatar backgroundColor={blue500} icon={<IconEdit />} />,
+		},
+	],
+};
+
+/**
+ * Class SpeedDial
+ */
+class ExampleRtl extends React.Component {
+
+	/**
+	 * @param {Object} props - component props
+	 * @returns {void}
+	 */
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			rtl: true,
+		};
+
+		this.handleToogle = this.handleToogle.bind(this);
+	}
+
+	/**
+	 * @returns {void}
+	 */
+	handleToogle() {
+		this.setState({
+			rtl: !this.state.rtl,
+		});
+	}
+
+	/**
+	 * @returns {XML} returns the component
+	 */
+	render() {
+
+		const { rtl } = this.state;
+
+		return (
+			<div>
+				<h1 style={{ textAlign: 'center' }}>
+					{rtl ? 'RTL' : 'LTR'}
+				</h1>
+				<div style={{ textAlign: 'center' }}>
+					<RaisedButton
+						label="Toggle"
+						style={{ margin: 40 }}
+						onClick={this.handleToogle}
+					/>
+				</div>
+				<SpeedDial
+					positionH={rtl ? 'left' : 'right'}
+				>
+					<BubbleList>
+						{list.items.map(({ primaryText, rightAvatar }) => {
+
+							const item = {
+								primaryText,
+							};
+
+							if (rtl) {
+								item.leftAvatar = rightAvatar;
+							} else {
+								item.rightAvatar = rightAvatar;
+							}
+
+							return (
+								<BubbleListItem
+									key={primaryText}
+									{...item}
+								/>
+							);
+						})}
+					</BubbleList>
+				</SpeedDial>
+			</div>
+		);
+	}
+}
+
+ExampleRtl.displayName = 'ExampleRtl';
+
+export default ExampleRtl;

src/examples/home/home.js

@@ -47,6 +47,10 @@ const Home = () => {
 					exampleCode="toolbox-fixed"
 					title="Toolbox fixed"
 				/>
+				<Example
+					exampleCode="rtl"
+					title="RTL"
+				/>
 
 				<h2>Properties</h2>
 				<TableProps componentName="SpeedDial" />