Skip to content
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

[Tooltip] Convert to function component #15291

Merged
merged 12 commits into from
Apr 15, 2019
31 changes: 16 additions & 15 deletions packages/material-ui/src/Tooltip/Tooltip.js
Original file line number Diff line number Diff line change
Expand Up @@ -115,21 +115,22 @@ function Tooltip(props) {
const handleRef = useForkRef(children.ref, handleOwnRef);

React.useEffect(() => {
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
if (childNode) {
warning(
!childNode.disabled ||
(childNode.disabled && isControlled) ||
(childNode.disabled && title === '') ||
childNode.tagName.toLowerCase() !== 'button',
[
'Material-UI: you are providing a disabled `button` child to the Tooltip component.',
'A disabled element does not fire events.',
"Tooltip needs to listen to the child element's events to display the title.",
'',
'Place a `div` container on top of the element.',
].join('\n'),
);
}
warning(
!(
Copy link
Member

@oliviertassinari oliviertassinari Apr 14, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯 That's is, maybe we can write our own warning method that uses warn internally but reverse the condition logic. It's more intuitive. Maybe we don't need a different if branch. What we need is a direct condition logic, not a reversed one.

childNode &&
childNode.disabled &&
!isControlled &&
title !== '' &&
childNode.tagName.toLowerCase() === 'button'
),
[
'Material-UI: you are providing a disabled `button` child to the Tooltip component.',
'A disabled element does not fire events.',
"Tooltip needs to listen to the child element's events to display the title.",
'',
'Place a `div` container on top of the element.',
].join('\n'),
);
}, [isControlled, title, childNode]);

React.useEffect(() => {
Expand Down