oskar-ui
Version:
React component library
104 lines (103 loc) • 7.49 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
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 { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";
import styled, { css, keyframes } from "styled-components";
import WebFont from "webfontloader";
WebFont.load({
google: {
families: ["Noto Sans KR", "sans-serif"],
},
});
export function Tooltip(_a) {
var children = _a.children, message = _a.message, _b = _a.position, position = _b === void 0 ? "bottom" : _b, _c = _a.trigger, trigger = _c === void 0 ? "hover" : _c, _d = _a.theme, theme = _d === void 0 ? "primary" : _d, _e = _a.size, size = _e === void 0 ? "md" : _e;
var _f = useState(), child = _f[0], setChild = _f[1];
var _g = useState(false), visible = _g[0], setVisible = _g[1];
var targetRef = useRef();
useEffect(function () {
if (trigger === "click") {
setChild(React.cloneElement(children, {
ref: targetRef,
}));
var handleClickOutside_1 = function (e) {
e.stopPropagation();
setVisible(targetRef.current.contains(e.target));
};
document.addEventListener("click", handleClickOutside_1);
return function () {
document.removeEventListener("click", handleClickOutside_1);
};
}
else {
var onMouseOver_1 = function () {
var _a, _b;
setVisible(true);
(_b = (_a = children.props).onMouseOver) === null || _b === void 0 ? void 0 : _b.call(_a);
};
var onMouseLeave_1 = function () {
var _a, _b;
setVisible(false);
(_b = (_a = children.props).onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a);
};
setChild(React.cloneElement(children, {
ref: targetRef,
onMouseOver: function () { return onMouseOver_1(); },
onMouseLeave: function () { return onMouseLeave_1(); },
}));
}
}, [trigger]);
return (_jsxs(_Fragment, { children: [child, visible &&
ReactDOM.createPortal(_jsx(MessageWrapper, __assign({ position: position, theme: theme, size: size, targetRect: targetRef.current.getBoundingClientRect(), className: "OuiTooltip" }, { children: message })), document.body)] }));
}
export default Tooltip;
var getPosition = function (position, targetRect) {
var padding = 12;
switch (position) {
case "bottom":
default:
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n transform: translate(\n calc(", "px - 50%),\n ", "px\n );\n "], ["\n transform: translate(\n calc(", "px - 50%),\n ", "px\n );\n "])), targetRect.width / 2, targetRect.height + padding);
case "top":
return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n transform: translate(\n calc(", "px - 50%),\n calc(-100% - ", "px)\n );\n "], ["\n transform: translate(\n calc(", "px - 50%),\n calc(-100% - ", "px)\n );\n "])), targetRect.width / 2, padding);
case "left":
return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n transform: translate(\n calc(-100% - ", "px),\n calc(", "px - 50%)\n );\n "], ["\n transform: translate(\n calc(-100% - ", "px),\n calc(", "px - 50%)\n );\n "])), padding, targetRect.height / 2);
case "right":
return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n transform: translate(\n ", "px,\n calc(", "px - 50%)\n );\n "], ["\n transform: translate(\n ", "px,\n calc(", "px - 50%)\n );\n "])), targetRect.width + padding, targetRect.height / 2);
}
};
var getTheme = function (theme) {
switch (theme) {
case "primary":
default:
return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: #f2f2f2;\n color: #424242;\n "], ["\n background-color: #f2f2f2;\n color: #424242;\n "])));
case "secondary":
return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: rgba(0, 0, 0, 0.6);\n color: #f2f2f2;\n "], ["\n background-color: rgba(0, 0, 0, 0.6);\n color: #f2f2f2;\n "])));
}
};
var getSize = function (size) {
switch (size) {
case "sm":
return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n font-size: 12px;\n "], ["\n font-size: 12px;\n "])));
case "md":
default:
return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-size: 16px;\n "], ["\n font-size: 16px;\n "])));
case "lg":
return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n font-size: 22px;\n "], ["\n font-size: 22px;\n "])));
}
};
var fadeIn = keyframes(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n from{\n opacity: 0;\n }\n to{\n opacity: 1;\n }\n"], ["\n from{\n opacity: 0;\n }\n to{\n opacity: 1;\n }\n"])));
var MessageWrapper = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n padding: 16px;\n position: absolute;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n white-space: nowrap;\n font-family: \"Noto Sans KR\";\n cursor: default;\n animation: ", " 0.15s linear;\n z-index: 100;\n top: ", ";\n left: ", ";\n ", ";\n ", ";\n ", ";\n"], ["\n padding: 16px;\n position: absolute;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n white-space: nowrap;\n font-family: \"Noto Sans KR\";\n cursor: default;\n animation: ", " 0.15s linear;\n z-index: 100;\n top: ", ";\n left: ", ";\n ", ";\n ", ";\n ", ";\n"])), fadeIn, function (props) { return "".concat(props.targetRect.top + window.scrollY, "px"); }, function (props) { return "".concat(props.targetRect.left + window.scrollX, "px"); }, function (props) { return getPosition(props.position, props.targetRect); }, function (props) { return getTheme(props.theme); }, function (props) { return getSize(props.size); });
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;