@enclavemoney/enclave-wallet-sdk
Version:
A simple enclave wallet SDK for React applications
133 lines (132 loc) • 6.91 kB
JavaScript
"use strict";
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);
};
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 (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tooltip = void 0;
var react_1 = __importStar(require("react"));
var Tooltip = function (_a) {
var content = _a.content, children = _a.children, _b = _a.position, position = _b === void 0 ? "top" : _b, _c = _a.delay, delay = _c === void 0 ? 200 : _c, _d = _a.className, className = _d === void 0 ? "" : _d, _e = _a.style, style = _e === void 0 ? {} : _e;
var _f = (0, react_1.useState)(false), isVisible = _f[0], setIsVisible = _f[1];
var _g = (0, react_1.useState)(false), showTooltip = _g[0], setShowTooltip = _g[1];
var timeoutRef = (0, react_1.useRef)(null);
var tooltipRef = (0, react_1.useRef)(null);
var triggerRef = (0, react_1.useRef)(null);
var handleMouseEnter = function () {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
}
timeoutRef.current = setTimeout(function () {
setShowTooltip(true);
// Small delay for entrance animation
setTimeout(function () { return setIsVisible(true); }, 10);
}, delay);
};
var handleMouseLeave = function () {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
}
setIsVisible(false);
// Hide after animation completes
setTimeout(function () { return setShowTooltip(false); }, 150);
};
var getTooltipPosition = function () {
var baseStyles = {
position: "absolute",
zIndex: 10000,
pointerEvents: "none",
transform: isVisible ? "scale(1)" : "scale(0.95)",
opacity: isVisible ? 1 : 0,
transition: "all 0.15s cubic-bezier(0.16, 1, 0.3, 1)",
};
switch (position) {
case "top":
return __assign(__assign({}, baseStyles), { bottom: "100%", left: "50%", transform: "translateX(-50%) scale(".concat(isVisible ? 1 : 0.95, ")"), marginBottom: 8 });
case "bottom":
return __assign(__assign({}, baseStyles), { top: "100%", left: "50%", transform: "translateX(-50%) scale(".concat(isVisible ? 1 : 0.95, ")"), marginTop: 8 });
case "left":
return __assign(__assign({}, baseStyles), { right: "100%", top: "50%", transform: "translateY(-50%) scale(".concat(isVisible ? 1 : 0.95, ")"), marginRight: 8 });
case "right":
return __assign(__assign({}, baseStyles), { left: "100%", top: "50%", transform: "translateY(-50%) scale(".concat(isVisible ? 1 : 0.95, ")"), marginLeft: 8 });
default:
return baseStyles;
}
};
var getArrowStyles = function () {
var arrowSize = 6;
var baseArrowStyles = {
position: "absolute",
width: 0,
height: 0,
borderStyle: "solid",
};
switch (position) {
case "top":
return __assign(__assign({}, baseArrowStyles), { top: "100%", left: "50%", marginLeft: -arrowSize, borderWidth: "".concat(arrowSize, "px ").concat(arrowSize, "px 0 ").concat(arrowSize, "px"), borderColor: "#1a1a1a transparent transparent transparent" });
case "bottom":
return __assign(__assign({}, baseArrowStyles), { bottom: "100%", left: "50%", marginLeft: -arrowSize, borderWidth: "0 ".concat(arrowSize, "px ").concat(arrowSize, "px ").concat(arrowSize, "px"), borderColor: "transparent transparent #1a1a1a transparent" });
case "left":
return __assign(__assign({}, baseArrowStyles), { left: "100%", top: "50%", marginTop: -arrowSize, borderWidth: "".concat(arrowSize, "px 0 ").concat(arrowSize, "px ").concat(arrowSize, "px"), borderColor: "transparent transparent transparent #1a1a1a" });
case "right":
return __assign(__assign({}, baseArrowStyles), { right: "100%", top: "50%", marginTop: -arrowSize, borderWidth: "".concat(arrowSize, "px ").concat(arrowSize, "px ").concat(arrowSize, "px 0"), borderColor: "transparent #1a1a1a transparent transparent" });
default:
return baseArrowStyles;
}
};
(0, react_1.useEffect)(function () {
return function () {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
}
};
}, []);
return (react_1.default.createElement("div", { ref: triggerRef, style: __assign({ position: "relative", display: "inline-block" }, style), className: className, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
children,
showTooltip && (react_1.default.createElement("div", { ref: tooltipRef, style: getTooltipPosition() },
react_1.default.createElement("div", { style: {
background: "#1a1a1a",
color: "#ffffff",
padding: "6px 10px",
borderRadius: 6,
fontSize: 12,
fontWeight: 500,
fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
whiteSpace: "nowrap",
boxShadow: "0 8px 25px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1)",
border: "1px solid rgba(255, 255, 255, 0.1)",
} }, content),
react_1.default.createElement("div", { style: getArrowStyles() })))));
};
exports.Tooltip = Tooltip;
exports.default = exports.Tooltip;