fix(speed-dial): mouseleave wrapper to prevent early leave

#28

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

@@ -37,7 +37,7 @@ describe('<BubbleListItem />', () => {
 		const wrapper = shallow(
 			<BubbleListItem
 				primaryText="Hello world!"
-				rightAvatar={<Avatar src={'http://lorempixel.com/80/80/people/1'} />}
+				rightAvatar={<Avatar src={'https://picsum.photos/80/80/1'} />}
 			/>,
 			{ context }
 		);
@@ -56,10 +56,7 @@ describe('<BubbleListItem />', () => {
 
 	it('with prop *leftAvatar* renders the avatar image', () => {
 		const wrapper = shallow(
-			<BubbleListItem
-				leftAvatar={<Avatar src={'http://lorempixel.com/80/80/people/1'} />}
-				primaryText="Hello world!"
-			/>,
+			<BubbleListItem leftAvatar={<Avatar src={'https://picsum.photos/80/80/1'} />} primaryText="Hello world!" />,
 			{ context }
 		);
 		expect(typeof wrapper.find('img')).toEqual('object');

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

@@ -1,4 +1,4 @@
-/*eslint complexity: ["error", 7]*/
+/*eslint complexity: ["error", 10]*/
 import React from 'react';
 import PropTypes from 'prop-types';
 import FloatingActionButton from 'material-ui/FloatingActionButton';
@@ -363,6 +363,43 @@ class SpeedDial extends React.Component {
 		);
 	}
 
+	/**
+	 * @returns {Object} merged styles for the `FloatingActionButton`
+	 */
+	getStylesMouseWrapper() {
+		const { positionV, positionH, styleButtonWrap } = this.props;
+		const { isOpen } = this.state;
+		const styles = this.styles;
+		const overwrite = {
+			transition: undefined,
+			width: isOpen ? 320 : 56,
+			height: isOpen ? 340 : 56,
+		};
+		const stylesMouseWrap = Object.assign(
+			{},
+			styles.btnWrap.main,
+			styles.btnWrap[positionV],
+			styles.btnWrap[positionH],
+			styleButtonWrap,
+			overwrite
+		);
+
+		if (typeof stylesMouseWrap.right === 'number') {
+			stylesMouseWrap.right = 0;
+		}
+		if (typeof stylesMouseWrap.left === 'number') {
+			stylesMouseWrap.left = 0;
+		}
+		if (typeof stylesMouseWrap.top === 'number') {
+			stylesMouseWrap.top = 0;
+		}
+		if (typeof stylesMouseWrap.bottom === 'number') {
+			stylesMouseWrap.bottom = 0;
+		}
+
+		return stylesMouseWrap;
+	}
+
 	/**
 	 * @returns {Object} merged styles for the `FloatingActionButton`
 	 */
@@ -694,11 +731,6 @@ class SpeedDial extends React.Component {
 			onClick: handleClick,
 		});
 
-		if (enableMouseActions) {
-			btnProps.onMouseEnter = handleClick;
-			btnProps.onMouseLeave = handleClick;
-		}
-
 		if (isInTransition && classNameInTransition) {
 			classNames.push(classNameInTransition);
 		}
@@ -712,12 +744,19 @@ class SpeedDial extends React.Component {
 				{this.renderCssKeyframes()}
 				{this.renderToolbox()}
 				{this.renderBackdrop()}
-				<div style={this.getStylesContentWrap()}>{this.renderChildren()}</div>
-				<div className={classNameButtonWrap} style={this.getStylesBtn()}>
-					{this.renderPrimaryText()}
-					<FloatingActionButton ref="btn" tabIndex={tabIndex} {...btnProps}>
-						{this.renderIcon()}
-					</FloatingActionButton>
+				<div
+					className="enableMouseActions"
+					onMouseEnter={enableMouseActions ? handleClick : undefined}
+					onMouseLeave={enableMouseActions ? handleClick : undefined}
+					style={enableMouseActions ? Object.assign(this.getStylesMouseWrapper(), {}) : {}}
+				>
+					<div style={this.getStylesContentWrap()}>{this.renderChildren()}</div>
+					<div className={classNameButtonWrap} style={this.getStylesBtn()}>
+						{this.renderPrimaryText()}
+						<FloatingActionButton ref="btn" tabIndex={tabIndex} {...btnProps}>
+							{this.renderIcon()}
+						</FloatingActionButton>
+					</div>
 				</div>
 			</div>
 		);

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

@@ -78,6 +78,17 @@ describe('<SpeedDial />', () => {
 				div
 			);
 		});
+		it('with enableMouseActions top left', () => {
+			const div = document.createElement('div');
+			ReactDOM.render(
+				<MuiThemeProvider>
+					<SpeedDial enableMouseActions positionH="left" positionV="top">
+						<BubbleList />
+					</SpeedDial>
+				</MuiThemeProvider>,
+				div
+			);
+		});
 
 		it('with floatingActionButtonProps', () => {
 			const div = document.createElement('div');

src/examples/example-basic/example-basic.js

@@ -3,25 +3,25 @@ import Avatar from 'material-ui/Avatar';
 import { blue500 } from 'material-ui/styles/colors';
 import IconEdit from 'material-ui/svg-icons/image/edit';
 import { SpeedDial, BubbleList, BubbleListItem } from '../../speed-dial';
+import fakerImage from '../faker-image';
 
-const avatarImgUrl = 'http://lorempixel.com/80/80/people';
 const list = {
 	items: [
 		{
 			primaryText: 'Eric Hoffman',
-			rightAvatar: <Avatar src={`${avatarImgUrl}/1`} />,
+			rightAvatar: <Avatar src={fakerImage(1)} />,
 		},
 		{
 			primaryText: 'Grace Ng',
-			rightAvatar: <Avatar src={`${avatarImgUrl}/3`} />,
+			rightAvatar: <Avatar src={fakerImage(3)} />,
 		},
 		{
 			primaryText: 'Kerem Suer',
-			rightAvatar: <Avatar src={`${avatarImgUrl}/6`} />,
+			rightAvatar: <Avatar src={fakerImage(6)} />,
 		},
 		{
 			primaryText: 'Raquel Parrado',
-			rightAvatar: <Avatar src={`${avatarImgUrl}/7`} />,
+			rightAvatar: <Avatar src={fakerImage(7)} />,
 		},
 		{
 			primaryText: 'Write',

src/examples/example-bubble-list-standalone-1/example-bubble-list-standalone-1.js

@@ -4,16 +4,17 @@ import { blue500 } from 'material-ui/styles/colors';
 import IconEdit from 'material-ui/svg-icons/image/edit';
 import { BubbleList, BubbleListItem } from '../../speed-dial';
 
-const avatarImgUrl = 'http://lorempixel.com/80/80/people';
+import fakerImage from '../faker-image';
+
 const list = {
 	items: [
 		{
 			primaryText: 'Kerem Suer',
-			rightAvatar: <Avatar src={`${avatarImgUrl}/6`} />,
+			rightAvatar: <Avatar src={fakerImage(6)} />,
 		},
 		{
 			primaryText: 'Raquel Parrado',
-			rightAvatar: <Avatar src={`${avatarImgUrl}/7`} />,
+			rightAvatar: <Avatar src={fakerImage(7)} />,
 		},
 		{
 			primaryText: 'Write',

src/examples/example-bubble-list-standalone-2/example-bubble-list-standalone-2.js

@@ -4,16 +4,17 @@ import { blue500 } from 'material-ui/styles/colors';
 import IconEdit from 'material-ui/svg-icons/image/edit';
 import { BubbleList, BubbleListItem } from '../../speed-dial';
 
-const avatarImgUrl = 'http://lorempixel.com/80/80/people';
+import fakerImage from '../faker-image';
+
 const list = {
 	items: [
 		{
 			primaryText: 'Kerem Suer',
-			rightAvatar: <Avatar src={`${avatarImgUrl}/6`} />,
+			rightAvatar: <Avatar src={fakerImage(6)} />,
 		},
 		{
 			primaryText: 'Raquel Parrado',
-			rightAvatar: <Avatar src={`${avatarImgUrl}/7`} />,
+			rightAvatar: <Avatar src={fakerImage(7)} />,
 		},
 		{
 			primaryText: 'Write',

src/examples/example-bug11/example-bug11.js

@@ -5,16 +5,17 @@ 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';
+import fakerImage from '../faker-image';
+
 const list = {
 	items: [
 		{
 			primaryText: 'Kerem Suer',
-			rightAvatar: <Avatar src={`${avatarImgUrl}/6`} />,
+			rightAvatar: <Avatar src={fakerImage(6)} />,
 		},
 		{
 			primaryText: 'Points',
-			rightAvatar: <Avatar src={`${avatarImgUrl}/7`} />,
+			rightAvatar: <Avatar src={fakerImage(7)} />,
 		},
 		{
 			primaryText: 'Write',

src/examples/example-bug6/example-bug6.js

@@ -4,16 +4,17 @@ import { blue500 } from 'material-ui/styles/colors';
 import IconEdit from 'material-ui/svg-icons/image/edit';
 import { SpeedDial, BubbleList, BubbleListItem } from '../../speed-dial';
 
-const avatarImgUrl = 'http://lorempixel.com/80/80/people';
+import fakerImage from '../faker-image';
+
 const list = {
 	items: [
 		{
 			primaryText: 'Kerem Suer',
-			rightAvatar: <Avatar src={`${avatarImgUrl}/6`} />,
+			rightAvatar: <Avatar src={fakerImage(6)} />,
 		},
 		{
 			primaryText: 'Points',
-			rightAvatar: <Avatar src={`${avatarImgUrl}/7`} />,
+			rightAvatar: <Avatar src={fakerImage(7)} />,
 		},
 		{
 			primaryText: 'Write',

src/examples/example-direction/example-direction.js

@@ -4,18 +4,19 @@ import { blue500 } from 'material-ui/styles/colors';
 import IconEdit from 'material-ui/svg-icons/image/edit';
 import { SpeedDial, BubbleList, BubbleListItem } from '../../speed-dial';
 
-const avatarImgUrl = 'http://lorempixel.com/80/80/people';
+import fakerImage from '../faker-image';
+
 const list = {
 	items: [
 		{
 			id: 0,
 			primaryText: 'Kerem Suer',
-			rightAvatar: <Avatar src={`${avatarImgUrl}/6`} />,
+			rightAvatar: <Avatar src={fakerImage(6)} />,
 		},
 		{
 			id: 1,
 			primaryText: 'Raquel Parrado',
-			rightAvatar: <Avatar src={`${avatarImgUrl}/7`} />,
+			rightAvatar: <Avatar src={fakerImage(7)} />,
 		},
 		{
 			id: 2,

src/examples/example-inbox/example-inbox.js

@@ -8,24 +8,25 @@ import IconRemember from 'material-ui/svg-icons/action/touch-app';
 import { SpeedDial, BubbleList, BubbleListItem } from '../../speed-dial';
 import ExampleContent from '../example-content/example-content';
 
-const avatarImgUrl = 'http://lorempixel.com/80/80/people';
+import fakerImage from '../faker-image';
+
 const list = {
 	items: [
 		{
 			primaryText: 'Eric Hoffman',
-			rightAvatar: <Avatar src={`${avatarImgUrl}/1`} />,
+			rightAvatar: <Avatar src={fakerImage(1)} />,
 			onClick() {
 				console.log('click on "Eric Hoffman"');
 			},
 		},
 		{
 			primaryText: 'Grace Ng',
-			rightAvatar: <Avatar src={`${avatarImgUrl}/3`} />,
+			rightAvatar: <Avatar src={fakerImage(3)} />,
 			href: '/#/',
 		},
 		{
 			primaryText: 'Raquel Parrado',
-			rightAvatar: <Avatar src={`${avatarImgUrl}/7`} />,
+			rightAvatar: <Avatar src={fakerImage(7)} />,
 			onClick() {
 				console.log('click on "Raquel Parrado"');
 			},

src/examples/example-inline/example-inline.js

@@ -4,16 +4,17 @@ import { blue500 } from 'material-ui/styles/colors';
 import IconEdit from 'material-ui/svg-icons/image/edit';
 import { SpeedDial, BubbleList, BubbleListItem } from '../../speed-dial';
 
-const avatarImgUrl = 'http://lorempixel.com/80/80/people';
+import fakerImage from '../faker-image';
+
 const list = {
 	items: [
 		{
 			primaryText: 'Kerem Suer',
-			rightAvatar: <Avatar src={`${avatarImgUrl}/6`} />,
+			rightAvatar: <Avatar src={fakerImage(6)} />,
 		},
 		{
 			primaryText: 'Raquel Parrado',
-			rightAvatar: <Avatar src={`${avatarImgUrl}/7`} />,
+			rightAvatar: <Avatar src={fakerImage(7)} />,
 		},
 		{
 			primaryText: 'Write',
@@ -25,11 +26,11 @@ const listLeft = {
 	items: [
 		{
 			primaryText: 'Kerem Suer',
-			leftAvatar: <Avatar src={`${avatarImgUrl}/6`} />,
+			leftAvatar: <Avatar src={fakerImage(6)} />,
 		},
 		{
 			primaryText: 'Raquel Parrado',
-			leftAvatar: <Avatar src={`${avatarImgUrl}/7`} />,
+			leftAvatar: <Avatar src={fakerImage(7)} />,
 		},
 		{
 			primaryText: 'Write',

src/examples/example-list/example-list.js

@@ -6,24 +6,25 @@ import { blue500 } from 'material-ui/styles/colors';
 import IconEdit from 'material-ui/svg-icons/image/edit';
 import { SpeedDial } from '../../speed-dial';
 
-const avatarImgUrl = 'http://lorempixel.com/80/80/people';
+import fakerImage from '../faker-image';
+
 const list = {
 	items: [
 		{
 			primaryText: 'Eric Hoffman',
-			rightAvatar: <Avatar src={`${avatarImgUrl}/1`} />,
+			rightAvatar: <Avatar src={fakerImage(1)} />,
 		},
 		{
 			primaryText: 'Grace Ng',
-			rightAvatar: <Avatar src={`${avatarImgUrl}/3`} />,
+			rightAvatar: <Avatar src={fakerImage(3)} />,
 		},
 		{
 			primaryText: 'Kerem Suer',
-			rightAvatar: <Avatar src={`${avatarImgUrl}/6`} />,
+			rightAvatar: <Avatar src={fakerImage(6)} />,
 		},
 		{
 			primaryText: 'Raquel Parrado',
-			rightAvatar: <Avatar src={`${avatarImgUrl}/7`} />,
+			rightAvatar: <Avatar src={fakerImage(7)} />,
 		},
 		{
 			primaryText: 'Write',

src/examples/example-mouseover/example-mouseover.js

@@ -3,25 +3,29 @@ import Avatar from 'material-ui/Avatar';
 import { blue500 } from 'material-ui/styles/colors';
 import IconEdit from 'material-ui/svg-icons/image/edit';
 import { SpeedDial, BubbleList, BubbleListItem } from '../../speed-dial';
+import fakerImage from '../faker-image';
 
-const avatarImgUrl = 'http://lorempixel.com/80/80/people';
 const list = {
 	items: [
 		{
 			primaryText: 'Eric Hoffman',
-			rightAvatar: <Avatar src={`${avatarImgUrl}/1`} />,
+			rightAvatar: <Avatar src={fakerImage(1)} />,
+			onClick() {
+				// eslint-disable-next-line
+				console.log('click on "Eric Hoffman"');
+			},
 		},
 		{
 			primaryText: 'Grace Ng',
-			rightAvatar: <Avatar src={`${avatarImgUrl}/3`} />,
+			rightAvatar: <Avatar src={fakerImage(3)} />,
 		},
 		{
 			primaryText: 'Kerem Suer',
-			rightAvatar: <Avatar src={`${avatarImgUrl}/6`} />,
+			rightAvatar: <Avatar src={fakerImage(6)} />,
 		},
 		{
 			primaryText: 'Raquel Parrado',
-			rightAvatar: <Avatar src={`${avatarImgUrl}/7`} />,
+			rightAvatar: <Avatar src={fakerImage(7)} />,
 		},
 		{
 			primaryText: 'Write',