Merge pull request #18 from smollweide/develop

v0.4.5

.eslintignore

@@ -2,4 +2,4 @@
 /build/
 /node_modules/
 /public/
-
+/coverage/

.eslintrc.js

@@ -2,9 +2,10 @@ module.exports = {
 	'extends': '@namics/eslint-config/configurations/es6-react.js',
 	'rules': {},
 	'globals': {
+		'__dirname': true,
 		'it': true,
 		'expect': true,
 		'describe': true,
 		'beforeEach': true,
 	}
-};
+};

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-speed-dial",
-	"version": "0.4.4",
+	"version": "0.4.5",
 	"description": "React Component that implements a speed dial using Material-UI.",
 	"email": "simon.mollweide@web.de",
 	"author": "Simon Mollweide <simon.mollweide@web.de>",
@@ -34,7 +34,7 @@
 		"test:coverage": "npm test -- --coverage",
 		"eject": "react-scripts eject",
 		"lint": "npm run lint:js",
-		"lint:js": "node_modules/.bin/eslint src/**/*.jsx src/**/*.js",
+		"lint:js": "node_modules/.bin/eslint .",
 		"prestatic-server": "open http://localhost:9000",
 		"static-server": "pushstate-server build",
 		"prepublish": "npm run clean:publish",
@@ -51,7 +51,7 @@
 		"speed-dial"
 	],
 	"peerDependencies": {
-		"material-ui": "^0.17.0",
+		"material-ui": "^0.17.0 || ^0.18.0",
 		"react": "^15.0.0",
 		"react-dom": "^15.0.0",
 		"react-tap-event-plugin": "^1.0.0 || ^2.0.0"
@@ -72,23 +72,25 @@
 		"babel-preset-es2015": "^6.18.0",
 		"babel-preset-react": "^6.11.1",
 		"coveralls": "^2.11.15",
-		"enzyme": "^2.6.0",
+		"enzyme": "^2.8.2",
 		"eslint": "^3.12.2",
 		"eslint-plugin-import": "^2.2.0",
 		"gh-pages": "^0.12.0",
 		"nms-core-utils": "^1.0.0",
 		"react-addons-test-utils": "^15.4.0",
 		"react-scripts": "0.7.0",
+		"react-test-renderer": "^15.5.4",
 		"rimraf": "^2.5.4",
 		"sinon": "^1.17.6",
 		"webpack": "^1.13.3"
 	},
 	"dependencies": {
 		"babel-runtime": "^6.23.0",
-		"material-ui": "^0.17.0",
-		"react": "^15.4.2",
-		"react-dom": "^15.4.2",
-		"react-router": "^3.0.3",
+		"material-ui": "^0.18.3",
+		"prop-types": "^15.5.10",
+		"react": "^15.5.4",
+		"react-dom": "^15.5.4",
+		"react-router-dom": "^4.1.1",
 		"react-tap-event-plugin": "^2.0.1",
 		"simple-assign": "^0.1.0"
 	}

src/components/bubble-list-item/bubble-list-item.js

@@ -1,5 +1,6 @@
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import propTypes from './bubble-list-item.prop-types';
 import defaultProps from './bubble-list-item.default-props';
 import getStyles from './bubble-list-item.styles';
@@ -218,6 +219,6 @@ BubbleListItem.displayName = 'BubbleListItem';
 BubbleListItem.propTypes = propTypes;
 BubbleListItem.defaultProps = defaultProps;
 BubbleListItem.contextTypes = {
-	muiTheme: React.PropTypes.object.isRequired,
+	muiTheme: PropTypes.object.isRequired,
 };
 export default BubbleListItem;

src/components/bubble-list-item/bubble-list-item.prop-types.js

@@ -1,5 +1,5 @@
 
-import { PropTypes } from 'react';
+import { PropTypes } from 'prop-types';
 
 export default {
 	alignment: PropTypes.string,

src/components/bubble-list-item/bubble-list-item.styles.js

@@ -112,7 +112,7 @@ export default ({ paper, baseTheme }) => {
 				},
 				down: {
 					display: 'none',
-				}
+				},
 			},
 		},
 

src/components/bubble-list/bubble-list.js

@@ -1,5 +1,6 @@
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import getStyles from './bubble-list.styles';
 
 /**
@@ -115,20 +116,20 @@ class BubbleList extends React.Component {
 
 BubbleList.displayName = 'BubbleList';
 BubbleList.propTypes = {
-	alignment: React.PropTypes.string,
-	children: React.PropTypes.any,
-	className: React.PropTypes.string,
-	direction: React.PropTypes.string,
-	isInTransition: React.PropTypes.bool,
-	isOpen: React.PropTypes.bool,
-	positionV: React.PropTypes.string,
+	alignment: PropTypes.string,
+	children: PropTypes.any,
+	className: PropTypes.string,
+	direction: PropTypes.string,
+	isInTransition: PropTypes.bool,
+	isOpen: PropTypes.bool,
+	positionV: PropTypes.string,
 };
 BubbleList.defaultProps = {
 	isOpen: false,
 	isInTransition: false,
 };
 BubbleList.contextTypes = {
-	muiTheme: React.PropTypes.object.isRequired,
+	muiTheme: PropTypes.object.isRequired,
 };
 
 export default BubbleList;

src/components/speed-dial/speed-dial.js

@@ -1,5 +1,6 @@
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import FloatingActionButton from 'material-ui/FloatingActionButton';
 import { cyan500 } from 'material-ui/styles/colors';
 
@@ -775,7 +776,7 @@ SpeedDial.displayName = 'SpeedDial';
 SpeedDial.propTypes = propTypes;
 SpeedDial.defaultProps = defaultProps;
 SpeedDial.contextTypes = {
-	muiTheme: React.PropTypes.object.isRequired,
+	muiTheme: PropTypes.object.isRequired,
 };
 
 export default SpeedDial;

src/components/speed-dial/speed-dial.prop-types.js

@@ -1,5 +1,5 @@
 
-import { PropTypes } from 'react';
+import { PropTypes } from 'prop-types';
 
 export default {
 	children: PropTypes.any,

src/examples/app/app.js

@@ -1,6 +1,6 @@
 
 import React from 'react';
-import { Router, Route, hashHistory } from 'react-router';
+import { HashRouter, Route } from 'react-router-dom';
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 import injectTapEventPlugin from 'react-tap-event-plugin';
 
@@ -18,15 +18,20 @@ 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();
 
 const App = () => {
 	return (
 		<MuiThemeProvider>
-			<div className="app">
-				<Router history={hashHistory}>
-					<Route component={Home} path="/" />
+			<HashRouter>
+				<div className="app">
+					<Route
+						exact
+						component={Home}
+						path="/"
+					/>
 					<Route component={ExampleBasic} path="/basic" />
 					<Route component={ExampleTopLeft} path="/top-left" />
 					<Route component={ExampleInline} path="/inline" />
@@ -41,12 +46,14 @@ const App = () => {
 					<Route component={ExampleToolboxFixed} path="/toolbox-fixed" />
 					<Route component={ExampleBug6} path="/bug6" />
 					<Route component={ExampleBug11} path="/bug11" />
-				</Router>
-			</div>
+					<Route component={ExampleRtl} path="/rtl" />
+				</div>
+			</HashRouter>
 		</MuiThemeProvider>
 	);
 };
 
+
 App.displayName = 'App';
 App.propTypes = {};
 App.defaultProps = {};

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/example-toolbox-fixed/example-toolbox-fixed.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { blue500, white } from 'material-ui/styles/colors';
 import IconShare from 'material-ui/svg-icons/social/share';
 import IconMail from 'material-ui/svg-icons/communication/email';
@@ -44,7 +45,7 @@ const Toolbox = ({ onClickCloseToolbox }) => (
 	</div>
 );
 Toolbox.propTypes = {
-	onClickCloseToolbox: React.PropTypes.func,
+	onClickCloseToolbox: PropTypes.func,
 };
 
 const ExampleToolbox = () => {

src/examples/example-toolbox/example-toolbox.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { grey800, grey200, teal300, cyan900 } from 'material-ui/styles/colors';
 import IconPlay from 'material-ui/svg-icons/av/play-arrow';
 import IconPause from 'material-ui/svg-icons/av/pause';
@@ -90,7 +91,7 @@ const Toolbox = ({ onClickCloseToolbox }) => (
 	</div>
 );
 Toolbox.propTypes = {
-	onClickCloseToolbox: React.PropTypes.func,
+	onClickCloseToolbox: PropTypes.func,
 };
 
 /**

src/examples/example/example.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Card, CardHeader, CardText } from 'material-ui/Card';
 
 import './example.css';
@@ -34,9 +35,9 @@ const Example = ({ exampleCode, title, subtitle }) => {
 
 Example.displayName = 'Example';
 Example.propTypes = {
-	exampleCode: React.PropTypes.string.isRequired,
-	title: React.PropTypes.string.isRequired,
-	subtitle: React.PropTypes.string,
+	exampleCode: PropTypes.string.isRequired,
+	title: PropTypes.string.isRequired,
+	subtitle: PropTypes.string,
 };
 Example.defaultProps = {};
 

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" />

src/examples/table-props/table-props.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import './table-props.css';
 
 const props = {
@@ -300,7 +301,7 @@ const TableProps = ({ componentName }) => {
 
 TableProps.displayName = 'TableProps';
 TableProps.propTypes = {
-	componentName: React.PropTypes.string,
+	componentName: PropTypes.string,
 };
 TableProps.defaultProps = {
 	componentName: 'SpeedDial',