infinity-forge
Version:
97 lines • 6.13 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 __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;
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ZoomOnHover = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = __importStar(require("react"));
var styled_components_1 = __importDefault(require("styled-components"));
var Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n overflow: hidden;\n width: 100%;\n height: 100%;\n cursor: zoom-in;\n"], ["\n position: relative;\n overflow: hidden;\n width: 100%;\n height: 100%;\n cursor: zoom-in;\n"])));
var ZoomContent = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n transition: transform 0.3s ease;\n will-change: transform;\n transform: ", ";\n transform-origin: center center;\n"], ["\n width: 100%;\n height: 100%;\n transition: transform 0.3s ease;\n will-change: transform;\n transform: ", ";\n transform-origin: center center;\n"])), function (_a) {
var isZoomed = _a.isZoomed, zoom = _a.zoom;
return (isZoomed ? "scale(".concat(zoom, ")") : 'scale(1)');
});
var ModalOverlay = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n background: rgba(0, 0, 0, 0.9);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 9999;\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n background: rgba(0, 0, 0, 0.9);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 9999;\n"])));
var ModalImageWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n max-width: 100%;\n max-height: 100%;\n overflow: auto;\n"], ["\n max-width: 100%;\n max-height: 100%;\n overflow: auto;\n"])));
var ZoomOnHover = function (_a) {
var children = _a.children, _b = _a.zoom, zoom = _b === void 0 ? 2 : _b;
var wrapperRef = (0, react_1.useRef)(null);
var contentRef = (0, react_1.useRef)(null);
var _c = (0, react_1.useState)(false), isZoomed = _c[0], setIsZoomed = _c[1];
var _d = (0, react_1.useState)(false), isMobile = _d[0], setIsMobile = _d[1];
var _e = (0, react_1.useState)(false), isModalOpen = _e[0], setIsModalOpen = _e[1];
// Detecta mobile com base na largura da janela
(0, react_1.useEffect)(function () {
var checkMobile = function () {
setIsMobile(window.innerWidth < 1024);
};
checkMobile();
window.addEventListener('resize', checkMobile);
return function () { return window.removeEventListener('resize', checkMobile); };
}, []);
var handleMouseMove = function (e) {
if (!wrapperRef.current || !contentRef.current)
return;
var bounds = wrapperRef.current.getBoundingClientRect();
var x = ((e.clientX - bounds.left) / bounds.width) * 100;
var y = ((e.clientY - bounds.top) / bounds.height) * 100;
contentRef.current.style.transformOrigin = "".concat(x, "% ").concat(y, "%");
setIsZoomed(true);
};
var handleMouseLeave = function () {
setIsZoomed(false);
};
var handleClick = function () {
if (isMobile) {
setIsModalOpen(true);
}
};
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Container, { ref: wrapperRef, onMouseMove: !isMobile ? handleMouseMove : undefined, onMouseLeave: !isMobile ? handleMouseLeave : undefined, onClick: handleClick, children: (0, jsx_runtime_1.jsx)(ZoomContent, { ref: contentRef, zoom: zoom, isZoomed: !isMobile && isZoomed, children: children }) }), isModalOpen && ((0, jsx_runtime_1.jsx)(ModalOverlay, { onClick: function () { return setIsModalOpen(false); }, children: (0, jsx_runtime_1.jsx)(ModalImageWrapper, { children: react_1.default.cloneElement(children, {
style: {
width: '100%',
height: 'auto',
objectFit: 'contain',
},
}) }) }))] }));
};
exports.ZoomOnHover = ZoomOnHover;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
//# sourceMappingURL=index.js.map