@redocly/theme
Version:
Shared UI components lib
277 lines (265 loc) • 10.7 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tooltip = void 0;
const react_1 = __importStar(require("react"));
const styled_components_1 = __importStar(require("styled-components"));
const hooks_1 = require("../../core/hooks");
const Portal_1 = require("../../components/Portal/Portal");
function TooltipComponent({ children, isOpen, tip, withArrow = true, placement = 'top', className = 'default', width, dataTestId, disabled = false, arrowPosition = 'center', onClick, }) {
const ref = (0, react_1.useRef)(null);
const { isOpened, handleOpen, handleClose } = (0, hooks_1.useControl)(isOpen);
const [tooltipPosition, setTooltipPosition] = (0, react_1.useState)({ top: 0, left: 0 });
(0, hooks_1.useOutsideClick)(ref, handleClose);
const isControlled = isOpen !== undefined;
const updateTooltipPosition = (0, react_1.useCallback)(() => {
if (isOpened && ref.current) {
const rect = ref.current.getBoundingClientRect();
let top = 0;
let left = 0;
switch (placement) {
case 'top':
top = rect.top;
if (arrowPosition === 'left') {
left = rect.left - 24;
}
else if (arrowPosition === 'right') {
left = rect.right + 24;
}
else {
left = rect.left + rect.width / 2;
}
break;
case 'bottom':
top = rect.bottom;
if (arrowPosition === 'left') {
left = rect.left - 24;
}
else if (arrowPosition === 'right') {
left = rect.right + 24;
}
else {
left = rect.left + rect.width / 2;
}
break;
case 'left':
top = rect.top + rect.height / 2;
left = rect.left;
break;
case 'right':
top = rect.top + rect.height / 2;
left = rect.right;
break;
}
setTooltipPosition({ top, left });
}
}, [isOpened, placement, arrowPosition]);
(0, react_1.useLayoutEffect)(() => {
if (isOpened && ref.current) {
updateTooltipPosition();
const handleScroll = () => updateTooltipPosition();
const handleResize = () => updateTooltipPosition();
window.addEventListener('scroll', handleScroll, true);
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('scroll', handleScroll, true);
window.removeEventListener('resize', handleResize);
};
}
}, [isOpened, placement, updateTooltipPosition]);
(0, react_1.useEffect)(() => {
if (isOpen && !disabled) {
handleOpen();
}
else {
handleClose();
}
}, [isOpen, handleOpen, handleClose, disabled]);
const controllers = !isControlled &&
!disabled && {
onMouseEnter: handleOpen,
onMouseLeave: handleClose,
onClick: (e) => {
onClick === null || onClick === void 0 ? void 0 : onClick(e);
handleClose();
},
onFocus: handleOpen,
onBlur: handleClose,
};
return (react_1.default.createElement(TooltipWrapper, Object.assign({ ref: ref }, controllers, { className: `tooltip-${className}`, "data-component-name": "Tooltip/Tooltip" }),
children,
isOpened && !disabled && (react_1.default.createElement(Portal_1.Portal, null,
react_1.default.createElement(TooltipBody, { "data-testid": dataTestId || (typeof tip === 'string' ? tip : ''), placement: placement, width: width, withArrow: withArrow, arrowPosition: arrowPosition, style: {
position: 'fixed',
top: tooltipPosition.top,
left: tooltipPosition.left,
} }, tip)))));
}
exports.Tooltip = (0, react_1.memo)(TooltipComponent);
const PLACEMENTS = {
top: (0, styled_components_1.css) `
${({ withArrow, arrowPosition }) => withArrow && arrowPosition === 'left'
? (0, styled_components_1.css) `
transform: translate(0, -100%);
margin-top: -10px;
`
: arrowPosition === 'right'
? (0, styled_components_1.css) `
transform: translate(-100%, -100%);
margin-top: -10px;
`
: (0, styled_components_1.css) `
transform: translate(-50%, -100%);
margin-top: -10px;
`}
${({ withArrow, arrowPosition }) => withArrow &&
(0, styled_components_1.css) `
&::after {
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-top-width: 8px;
border-top-style: solid;
border-radius: 2px;
bottom: 0;
${arrowPosition === 'left' && 'left: 16px; transform: translateY(99%);'}
${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, 99%);'}
${arrowPosition === 'right' && 'right: 16px; transform: translateY(99%);'}
}
`}
`,
bottom: (0, styled_components_1.css) `
${({ withArrow, arrowPosition }) => withArrow && arrowPosition === 'left'
? (0, styled_components_1.css) `
transform: translate(0, 10px);
margin-top: 0;
`
: arrowPosition === 'right'
? (0, styled_components_1.css) `
transform: translate(-100%, 10px);
margin-top: 0;
`
: (0, styled_components_1.css) `
transform: translate(-50%, 10px);
margin-top: 0;
`}
${({ withArrow, arrowPosition }) => withArrow &&
(0, styled_components_1.css) `
&::after {
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-bottom-width: 8px;
border-bottom-style: solid;
border-radius: 0 0 2px 2px;
top: 0;
${arrowPosition === 'left' && 'left: 16px; transform: translateY(-99%);'}
${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, -99%);'}
${arrowPosition === 'right' && 'right: 16px; transform: translateY(-99%);'}
}
`}
`,
left: (0, styled_components_1.css) `
transform: translate(-100%, -50%);
margin-left: -10px;
${({ withArrow, arrowPosition }) => withArrow &&
(0, styled_components_1.css) `
&::after {
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-left-width: 8px;
border-left-style: solid;
border-radius: 2px 0 0 2px;
top: 50%;
right: 0;
${arrowPosition === 'top' && 'top: 16px; transform: translateX(99%);'}
${arrowPosition === 'center' && 'top: 50%; transform: translate(99%, -50%);'}
${arrowPosition === 'bottom' && 'bottom: 16px; transform: translateX(99%);'}
}
`}
`,
right: (0, styled_components_1.css) `
transform: translate(0, -50%);
margin-left: 10px;
${({ withArrow, arrowPosition }) => withArrow &&
(0, styled_components_1.css) `
&::after {
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-right-width: 8px;
border-right-style: solid;
border-radius: 0 2px 2px 0;
top: 50%;
left: 0;
${arrowPosition === 'top' && 'top: 16px; transform: translateX(-99%);'}
${arrowPosition === 'center' && 'top: 50%; transform: translate(-99%, -50%);'}
${arrowPosition === 'bottom' && 'bottom: 16px; transform: translateX(-99%);'}
}
`}
`,
};
const TooltipWrapper = styled_components_1.default.div `
position: relative;
display: flex;
`;
const TooltipBody = styled_components_1.default.span `
display: inline-block;
padding: var(--tooltip-padding);
max-width: ${({ width }) => width || 'var(--tooltip-max-width)'};
white-space: normal;
word-break: normal;
overflow-wrap: break-word;
border-radius: var(--border-radius-md);
transition: opacity 0.3s ease-out;
font-size: var(--font-size-base);
line-height: var(--line-height-base);
z-index: var(--z-index-overlay);
&::after {
position: absolute;
content: ' ';
display: inline-block;
width: 0;
height: 0;
border-color: var(--tooltip-arrow-color, var(--tooltip-bg-color));
}
background: var(--tooltip-bg-color);
color: var(--tooltip-text-color);
border: var(--tooltip-border-width, 0) var(--tooltip-border-style, solid)
var(--tooltip-border-color, transparent);
box-shadow: var(--bg-raised-shadow);
width: ${({ width }) => width || 'auto'};
${({ placement }) => (0, styled_components_1.css) `
${PLACEMENTS[placement]};
`}
`;
//# sourceMappingURL=JsTooltip.js.map