-
-
Notifications
You must be signed in to change notification settings - Fork 32.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[SpeedDial] Allow tooltip to always be displayed #12590
Changes from 9 commits
549fb8d
85de5ad
c0724f8
7167178
6c2335f
916dccb
fb70993
1eb1068
589de75
5292527
9d463dc
fe60a87
645a59e
82dffc2
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,110 @@ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { withStyles } from '@material-ui/core/styles'; | ||
import Button from '@material-ui/core/Button'; | ||
import SpeedDial from '@material-ui/lab/SpeedDial'; | ||
import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon'; | ||
import SpeedDialAction from '@material-ui/lab/SpeedDialAction'; | ||
import FileCopyIcon from '@material-ui/icons/FileCopyOutlined'; | ||
import SaveIcon from '@material-ui/icons/Save'; | ||
import PrintIcon from '@material-ui/icons/Print'; | ||
import ShareIcon from '@material-ui/icons/Share'; | ||
import DeleteIcon from '@material-ui/icons/Delete'; | ||
|
||
const styles = theme => ({ | ||
root: { | ||
height: 380, | ||
}, | ||
speedDial: { | ||
position: 'absolute', | ||
bottom: theme.spacing.unit * 2, | ||
right: theme.spacing.unit * 3, | ||
}, | ||
}); | ||
|
||
const actions = [ | ||
{ icon: <FileCopyIcon />, name: 'Copy' }, | ||
{ icon: <SaveIcon />, name: 'Save' }, | ||
{ icon: <PrintIcon />, name: 'Print' }, | ||
{ icon: <ShareIcon />, name: 'Share' }, | ||
{ icon: <DeleteIcon />, name: 'Delete' }, | ||
]; | ||
|
||
class SpeedDialTooltipOpen extends React.Component { | ||
state = { | ||
open: false, | ||
hidden: false, | ||
}; | ||
|
||
handleVisibility = () => { | ||
this.setState(state => ({ | ||
open: false, | ||
hidden: !state.hidden, | ||
})); | ||
}; | ||
|
||
handleClick = () => { | ||
this.setState(state => ({ | ||
open: !state.open, | ||
})); | ||
}; | ||
|
||
handleOpen = () => { | ||
if (!this.state.hidden) { | ||
this.setState({ | ||
open: true, | ||
}); | ||
} | ||
}; | ||
|
||
handleClose = () => { | ||
this.setState({ | ||
open: false, | ||
}); | ||
}; | ||
|
||
render() { | ||
const { classes } = this.props; | ||
const { hidden, open } = this.state; | ||
|
||
let isTouch; | ||
if (typeof document !== 'undefined') { | ||
isTouch = 'ontouchstart' in document.documentElement; | ||
} | ||
|
||
return ( | ||
<div className={classes.root}> | ||
<Button onClick={this.handleVisibility}>Toggle Speed Dial</Button> | ||
<SpeedDial | ||
ariaLabel="SpeedDial example" | ||
className={classes.speedDial} | ||
hidden={hidden} | ||
icon={<SpeedDialIcon />} | ||
onBlur={this.handleClose} | ||
onClick={this.handleClick} | ||
onClose={this.handleClose} | ||
onFocus={isTouch ? undefined : this.handleOpen} | ||
onMouseEnter={isTouch ? undefined : this.handleOpen} | ||
onMouseLeave={this.handleClose} | ||
open={open} | ||
> | ||
{actions.map(action => ( | ||
<SpeedDialAction | ||
key={action.name} | ||
icon={action.icon} | ||
tooltipTitle={action.name} | ||
tooltipOpen | ||
onClick={this.handleClick} | ||
/> | ||
))} | ||
</SpeedDial> | ||
</div> | ||
); | ||
} | ||
} | ||
|
||
SpeedDialTooltipOpen.propTypes = { | ||
classes: PropTypes.object.isRequired, | ||
}; | ||
|
||
export default withStyles(styles)(SpeedDialTooltipOpen); |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -37,13 +37,26 @@ class SpeedDialAction extends React.Component { | |
}; | ||
|
||
handleTooltipClose = () => { | ||
if (this.props.tooltipOpen) return; | ||
this.setState({ tooltipOpen: false }); | ||
}; | ||
|
||
handleTooltipOpen = () => { | ||
if (this.props.tooltipOpen) return; | ||
this.setState({ tooltipOpen: true }); | ||
}; | ||
|
||
componentDidUpdate = prevProps => { | ||
if (!this.props.tooltipOpen || prevProps.open === this.props.open) return; | ||
if (!this.props.open && this.state.tooltipOpen) { | ||
this.setState({ tooltipOpen: false }); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Do you see a way to move this to There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. done |
||
} else if (!this.state.tooltipOpen) { | ||
this.timeout = setTimeout(() => this.setState({ tooltipOpen: true }), this.props.delay + 100); | ||
} | ||
}; | ||
|
||
componentWillUnmount = () => this.timeout && clearTimeout(this.timeout); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Just call |
||
|
||
render() { | ||
const { | ||
ButtonProps, | ||
|
@@ -56,6 +69,7 @@ class SpeedDialAction extends React.Component { | |
open, | ||
tooltipTitle, | ||
tooltipPlacement, | ||
tooltipOpen, | ||
...other | ||
} = this.props; | ||
|
||
|
@@ -125,6 +139,10 @@ SpeedDialAction.propTypes = { | |
* @ignore | ||
*/ | ||
open: PropTypes.bool, | ||
/** | ||
* Make the tooltip always visible, regardless of hover. | ||
*/ | ||
tooltipOpen: PropTypes.bool, | ||
/** | ||
* Placement of the tooltip. | ||
*/ | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@hashwin I was just looking at this and this seems brittle since other methods can still change the state of tooltipOpen. Not sure if we can do anything about this though.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I see your point, but yeah I don't really see another way of handling this without the state and state itself can be changed from anywhere in the component. In fact, we need to manually set the state here for this feature to work: https://github.com/mui-org/material-ui/pull/12590/files#diff-3c8c197bf9114d5f5a42f05daae04497R59
One thing we can maybe do here is to change the method name from
handleTooltipOpen
to something likeonHover
so that it explicitly says that nothing should be done on hover if the proptooltipOpen
is given. Thoughts?