@momentum-ui/react-collaboration
Version:
Cisco Momentum UI Framework for React Collaboration Applications
74 lines • 4.74 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import React, { useCallback, useEffect, useState } from 'react';
import Popover from '../Popover';
import Tooltip from '../Tooltip/Tooltip';
import { useId } from '@react-aria/utils';
/**
* The TooltipPopoverCombo component.
* @deprecated Use the equivalent from momentum.design (NPM: `@momentum-design/components/dist/react`)
*/
var TooltipPopoverCombo = function (props) {
var _a;
var triggerComponent = props.triggerComponent, tooltipContent = props.tooltipContent, popoverContent = props.popoverContent, otherPopoverProps = props.otherPopoverProps, otherTooltipProps = props.otherTooltipProps;
var _b = useState(), tooltipInstance = _b[0], setTooltipInstance = _b[1];
var _c = useState(false), isPopoverOpen = _c[0], setIsPopoverOpen = _c[1];
var _d = useState(false), isTooltipOpen = _d[0], setIsTooltipOpen = _d[1];
var labelId = useId();
var triggerComponentId = useId((_a = triggerComponent.props) === null || _a === void 0 ? void 0 : _a.id);
// Modified tooltipSetInstance to call both setInstance and updateInstance
var setMergedTooltipInstances = useCallback(function (popoverInstance) {
var _a;
(_a = otherTooltipProps === null || otherTooltipProps === void 0 ? void 0 : otherTooltipProps.setInstance) === null || _a === void 0 ? void 0 : _a.call(otherTooltipProps, popoverInstance);
setTooltipInstance(popoverInstance);
}, [otherTooltipProps]);
var handleOnShowPopover = useCallback(function (instance) {
var _a;
var result = (_a = otherPopoverProps === null || otherPopoverProps === void 0 ? void 0 : otherPopoverProps.onShow) === null || _a === void 0 ? void 0 : _a.call(otherPopoverProps, instance);
if (result !== false)
setIsPopoverOpen(true);
return result;
}, [otherPopoverProps]);
var handleOnHidePopover = useCallback(function (instance) {
var _a;
var result = (_a = otherPopoverProps === null || otherPopoverProps === void 0 ? void 0 : otherPopoverProps.onHide) === null || _a === void 0 ? void 0 : _a.call(otherPopoverProps, instance);
if (result !== false)
setIsPopoverOpen(false);
return result;
}, [otherPopoverProps]);
var handleOnHideTooltip = useCallback(function (instance) {
var _a;
var result = (_a = otherTooltipProps === null || otherTooltipProps === void 0 ? void 0 : otherTooltipProps.onHide) === null || _a === void 0 ? void 0 : _a.call(otherTooltipProps, instance);
if (result !== false)
setIsTooltipOpen(false);
return result;
}, [otherTooltipProps]);
var handleOnShowTooltip = useCallback(function (instance) {
var _a;
var result = (_a = otherTooltipProps === null || otherTooltipProps === void 0 ? void 0 : otherTooltipProps.onShow) === null || _a === void 0 ? void 0 : _a.call(otherTooltipProps, instance);
if (result !== false)
setIsTooltipOpen(true);
return result;
}, [otherTooltipProps]);
// if the tooltip and popover are both open at the same time we close the tooltip to avoid them overlapping
useEffect(function () {
if (isPopoverOpen && isTooltipOpen) {
tooltipInstance === null || tooltipInstance === void 0 ? void 0 : tooltipInstance.hide();
}
}, [isPopoverOpen, isTooltipOpen, tooltipInstance]);
var popoverLabelledById = (otherTooltipProps === null || otherTooltipProps === void 0 ? void 0 : otherTooltipProps.type) === 'description' ? triggerComponentId : labelId;
return (React.createElement(Popover, __assign({ trigger: "click", interactive: true, "aria-labelledby": popoverLabelledById, triggerComponent: React.createElement(Tooltip, __assign({ type: "label", triggerComponent: (otherTooltipProps === null || otherTooltipProps === void 0 ? void 0 : otherTooltipProps.type) === 'description'
? React.cloneElement(triggerComponent, { id: triggerComponentId })
: triggerComponent }, otherTooltipProps, { onHide: handleOnHideTooltip, onShow: handleOnShowTooltip, setInstance: setMergedTooltipInstances, labelOrDescriptionId: labelId }), tooltipContent) }, otherPopoverProps, { onHide: handleOnHidePopover, onShow: handleOnShowPopover }), popoverContent));
};
export default TooltipPopoverCombo;
//# sourceMappingURL=TooltipPopoverCombo.js.map