@etsoo/materialui
Version:
TypeScript Material-UI Implementation
50 lines (49 loc) • 2.1 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TooltipClick = TooltipClick;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@etsoo/react");
const ClickAwayListener_1 = __importDefault(require("@mui/material/ClickAwayListener"));
const Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
const react_2 = __importDefault(require("react"));
/**
* Tooltip with click visibility
* @param props Props
* @returns Component
*/
function TooltipClick(props) {
// Destruct
// leaveDelay set to 5 seconds to hide the tooltip automatically
const { children, disableHoverListener = true, leaveDelay = 5000, onClose, title, ...rest } = props;
// State
const [localTitle, setTitle] = react_2.default.useState(title);
const [open, setOpen] = react_2.default.useState(false);
const delayed = leaveDelay > 0
? (0, react_1.useDelayedExecutor)(() => setOpen(false), leaveDelay)
: undefined;
// Callback for open the tooltip
const openTooltip = (newTitle) => {
setOpen(true);
if (newTitle)
setTitle(newTitle);
delayed?.call();
};
react_2.default.useEffect(() => {
return () => {
delayed?.clear();
};
}, []);
// Layout
return ((0, jsx_runtime_1.jsx)(ClickAwayListener_1.default, { onClickAway: () => setOpen(false), children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, { slotProps: {
popper: {
disablePortal: true
}
}, onClose: (event) => {
setOpen(false);
if (onClose)
onClose(event);
}, title: localTitle, open: open, disableFocusListener: true, disableTouchListener: true, disableHoverListener: disableHoverListener, onMouseOver: disableHoverListener ? undefined : () => setOpen(true), ...rest, children: children(openTooltip) }) }));
}