lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
153 lines • 10.2 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.ContextMenuRadioGroup = exports.ContextMenuSubTrigger = exports.ContextMenuSubContent = exports.ContextMenuSub = exports.ContextMenuPortal = exports.ContextMenuGroup = exports.ContextMenuShortcut = exports.ContextMenuSeparator = exports.ContextMenuLabel = exports.ContextMenuRadioItem = exports.ContextMenuCheckboxItem = exports.ContextMenuItem = exports.ContextMenuContent = exports.ContextMenuTrigger = exports.ContextMenu = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const React = __importStar(require("react"));
const lucide_react_1 = require("lucide-react");
const utils_1 = require("@/components/lib/utils");
const ContextMenuContext = React.createContext(undefined);
function useContextMenu() {
const context = React.useContext(ContextMenuContext);
if (!context) {
throw new Error("useContextMenu must be used within a ContextMenu");
}
return context;
}
const ContextMenu = ({ children }) => {
const [open, setOpen] = React.useState(false);
const [position, setPosition] = React.useState({ x: 0, y: 0 });
const [subMenuOpen, setSubMenuOpen] = React.useState({});
const [activeItem, setActiveItem] = React.useState(null);
return ((0, jsx_runtime_1.jsx)(ContextMenuContext.Provider, { value: {
open,
setOpen,
position,
setPosition,
subMenuOpen,
setSubMenuOpen,
activeItem,
setActiveItem,
}, children: children }));
};
exports.ContextMenu = ContextMenu;
const ContextMenuTrigger = React.forwardRef(({ children, ...props }, ref) => {
const { setOpen, setPosition } = useContextMenu();
const handleContextMenu = (e) => {
e.preventDefault();
setPosition({ x: e.clientX, y: e.clientY });
setOpen(true);
};
return ((0, jsx_runtime_1.jsx)("div", { ref: ref, onContextMenu: handleContextMenu, ...props, children: children }));
});
exports.ContextMenuTrigger = ContextMenuTrigger;
ContextMenuTrigger.displayName = "ContextMenuTrigger";
const ContextMenuPortal = ({ children }) => {
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
};
exports.ContextMenuPortal = ContextMenuPortal;
const framer_motion_1 = require("framer-motion");
const ContextMenuContent = React.forwardRef(({ className, children, ...props }, ref) => {
const { open, position, setOpen } = useContextMenu();
const contentRef = React.useRef(null);
React.useEffect(() => {
if (open) {
const handleOutsideClick = (e) => {
if (contentRef.current && !contentRef.current.contains(e.target)) {
setOpen(false);
}
};
document.addEventListener("mousedown", handleOutsideClick);
return () => {
document.removeEventListener("mousedown", handleOutsideClick);
};
}
}, [open, setOpen]);
return ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: open && ((0, jsx_runtime_1.jsx)(ContextMenuPortal, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { ref: (node) => {
if (typeof ref === "function")
ref(node);
else if (ref)
ref.current = node;
contentRef.current = node;
}, initial: { opacity: 0, scale: 0.3, transformOrigin: "top left" }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.3 }, transition: {
type: "spring",
damping: 20,
stiffness: 300,
opacity: { duration: 0.15 }
}, style: {
position: "fixed",
top: `${position.y}px`,
left: `${position.x}px`,
zIndex: 9999
}, className: (0, utils_1.cn)("z-50 min-w-[10rem] overflow-hidden rounded-xl border bg-background/95 backdrop-blur-xl p-1 text-popover-foreground shadow-2xl animate-in fade-in zoom-in-95 data-[side=bottom]:slide-in-from-top-2", className), ...props, children: children }) })) }));
});
exports.ContextMenuContent = ContextMenuContent;
ContextMenuContent.displayName = "ContextMenuContent";
const ContextMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => {
return ((0, jsx_runtime_1.jsx)("button", { ref: ref, className: (0, utils_1.cn)("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className), ...props }));
});
exports.ContextMenuItem = ContextMenuItem;
ContextMenuItem.displayName = "ContextMenuItem";
// Simplified implementation of other context menu components
const ContextMenuCheckboxItem = ({ children, checked, className, ...props }) => ((0, jsx_runtime_1.jsxs)("button", { className: (0, utils_1.cn)("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [(0, jsx_runtime_1.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: checked && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "h-4 w-4" }) }), children] }));
exports.ContextMenuCheckboxItem = ContextMenuCheckboxItem;
const ContextMenuRadioItem = ({ children, className, ...props }) => ((0, jsx_runtime_1.jsxs)("button", { className: (0, utils_1.cn)("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [(0, jsx_runtime_1.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Circle, { className: "h-2 w-2 fill-current" }) }), children] }));
exports.ContextMenuRadioItem = ContextMenuRadioItem;
const ContextMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, utils_1.cn)("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "pl-8", className), ...props })));
exports.ContextMenuLabel = ContextMenuLabel;
ContextMenuLabel.displayName = "ContextMenuLabel";
const ContextMenuSeparator = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, utils_1.cn)("-mx-1 my-1 h-px bg-background", className), ...props })));
exports.ContextMenuSeparator = ContextMenuSeparator;
ContextMenuSeparator.displayName = "ContextMenuSeparator";
const ContextMenuShortcut = ({ className, ...props }) => {
return ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)("ml-auto text-xs tracking-widest text-muted-foreground", className), ...props }));
};
exports.ContextMenuShortcut = ContextMenuShortcut;
// Simplified implementations for remaining context menu components
const ContextMenuGroup = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)("div", { ...props, children: children }));
exports.ContextMenuGroup = ContextMenuGroup;
const ContextMenuSub = ({ children }) => {
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
};
exports.ContextMenuSub = ContextMenuSub;
const ContextMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => ((0, jsx_runtime_1.jsxs)("button", { ref: ref, className: (0, utils_1.cn)("flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground", inset && "pl-8", className), ...props, children: [children, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "ml-auto h-4 w-4" })] })));
exports.ContextMenuSubTrigger = ContextMenuSubTrigger;
ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";
const ContextMenuSubContent = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, utils_1.cn)("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md", className), ...props })));
exports.ContextMenuSubContent = ContextMenuSubContent;
ContextMenuSubContent.displayName = "ContextMenuSubContent";
const ContextMenuRadioGroup = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)("div", { ...props, children: children }));
exports.ContextMenuRadioGroup = ContextMenuRadioGroup;
//# sourceMappingURL=context-menu.js.map