Skip to content

Commit

Permalink
fix(speed-dial): mouseleave wrapper to prevent early leave
Browse files Browse the repository at this point in the history
  • Loading branch information
Simon Mollweide committed Jun 21, 2018
1 parent e649f48 commit 9838021
Show file tree
Hide file tree
Showing 17 changed files with 1,054 additions and 164 deletions.
1,028 changes: 928 additions & 100 deletions package-lock.json

Large diffs are not rendered by default.

7 changes: 2 additions & 5 deletions src/components/bubble-list-item/bubble-list-item.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
);
Expand All @@ -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');
Expand Down
63 changes: 51 additions & 12 deletions src/components/speed-dial/speed-dial.js
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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`
*/
Expand Down Expand Up @@ -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);
}
Expand All @@ -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>
);
Expand Down
11 changes: 11 additions & 0 deletions src/components/speed-dial/speed-dial.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
10 changes: 5 additions & 5 deletions src/examples/example-basic/example-basic.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
7 changes: 4 additions & 3 deletions src/examples/example-bug11/example-bug11.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
7 changes: 4 additions & 3 deletions src/examples/example-bug6/example-bug6.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
7 changes: 4 additions & 3 deletions src/examples/example-direction/example-direction.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
9 changes: 5 additions & 4 deletions src/examples/example-inbox/example-inbox.js
Original file line number Diff line number Diff line change
Expand Up @@ -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"');
},
Expand Down
11 changes: 6 additions & 5 deletions src/examples/example-inline/example-inline.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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',
Expand Down
11 changes: 6 additions & 5 deletions src/examples/example-list/example-list.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
14 changes: 9 additions & 5 deletions src/examples/example-mouseover/example-mouseover.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Loading

0 comments on commit 9838021

Please sign in to comment.