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.
170 lines • 10.8 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.CommandSeparator = exports.CommandShortcut = exports.CommandItem = exports.CommandGroup = exports.CommandEmpty = exports.CommandList = exports.CommandInput = exports.CommandDialog = exports.Command = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const React = __importStar(require("react"));
const utils_1 = require("@/components/lib/utils");
const dialog_1 = require("./dialog");
const lucide_react_1 = require("lucide-react");
const CommandContext = React.createContext(undefined);
function useCommand() {
const context = React.useContext(CommandContext);
if (!context) {
throw new Error("useCommand must be used within a Command component");
}
return context;
}
const Command = React.forwardRef(({ className, isLoading: controlledLoading, emptyMessage = "No results found.", ...props }, ref) => {
const [value, setValue] = React.useState("");
const [internalLoading, setInternalLoading] = React.useState(false);
const isLoading = controlledLoading !== undefined ? controlledLoading : internalLoading;
const filter = React.useCallback((items) => {
if (!value)
return items;
return items.filter((item) => typeof item.label === "string"
? item.label.toLowerCase().includes(value.toLowerCase())
: item.value.toLowerCase().includes(value.toLowerCase()));
}, [value]);
return ((0, jsx_runtime_1.jsx)(CommandContext.Provider, { value: {
value,
onValueChange: setValue,
filter,
isLoading,
setIsLoading: setInternalLoading,
emptyMessage,
}, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, utils_1.cn)(`flex h-full w-full flex-col overflow-hidden rounded-md
bg-popover text-popover-foreground`, className), ...props, "cmdk-root": "" }) }));
});
exports.Command = Command;
Command.displayName = "Command";
const CommandDialog = ({ children, open, onOpenChange, className, }) => {
// Prevent form submission causing page refresh
const handleDialogClick = (e) => {
// Prevent any click events from bubbling up to a form
e.stopPropagation();
};
// Handle ESC key to close dialog
React.useEffect(() => {
if (!open)
return;
const handleKeyDown = (e) => {
if (e.key === "Escape") {
e.preventDefault();
if (onOpenChange) {
onOpenChange(false);
}
}
};
document.addEventListener("keydown", handleKeyDown);
return () => {
document.removeEventListener("keydown", handleKeyDown);
};
}, [open, onOpenChange]);
// Add body class to enable blur effect on the entire page
React.useEffect(() => {
if (open) {
document.body.classList.add("command-dialog-open");
}
else {
document.body.classList.remove("command-dialog-open");
}
return () => {
document.body.classList.remove("command-dialog-open");
};
}, [open]);
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [open && ((0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 z-[60] bg-transparent backdrop-blur-md", "aria-hidden": "true" })), (0, jsx_runtime_1.jsx)(dialog_1.Dialog, { open: open, onOpenChange: onOpenChange, children: (0, jsx_runtime_1.jsx)(dialog_1.DialogContent, { className: (0, utils_1.cn)(`overflow-hidden p-0 shadow-2xl border-muted/50 bg-background/95
backdrop-blur-xl max-w-3xl z-[70]`, className), onClick: handleDialogClick, children: (0, jsx_runtime_1.jsx)(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children: children }) }) })] }));
};
exports.CommandDialog = CommandDialog;
const CommandInput = React.forwardRef(({ className, onValueChange, isLoading: controlledLoading, ...props }, ref) => {
const { value, onValueChange: contextOnValueChange, isLoading: contextLoading, } = useCommand();
const isLoading = controlledLoading !== undefined ? controlledLoading : contextLoading;
const handleChange = React.useCallback((e) => {
e.preventDefault(); // Prevent form submission
const newValue = e.target.value;
if (onValueChange) {
onValueChange(newValue);
}
else {
contextOnValueChange(newValue);
}
}, [onValueChange, contextOnValueChange]);
// Prevent form submission on key press
const handleKeyDown = (e) => {
if (e.key === "Enter") {
e.preventDefault();
}
};
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [isLoading ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "mr-2 h-4 w-4 animate-spin opacity-70" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" })), (0, jsx_runtime_1.jsx)("input", { ref: ref, value: props.value !== undefined ? props.value : value, onChange: handleChange, onKeyDown: handleKeyDown, className: (0, utils_1.cn)(`flex h-11 w-full rounded-md bg-transparent py-3 text-sm border-none focus:border-none focus:ring-0 focus:outline-none
active:border-none active:ring-0 active:outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50`, className), placeholder: props.placeholder || "Type to search...", "cmdk-input": "", autoComplete: "off", autoCorrect: "off", spellCheck: "false", "aria-autocomplete": "list", ...props })] }));
});
exports.CommandInput = CommandInput;
CommandInput.displayName = "CommandInput";
const CommandList = React.forwardRef(({ className, isLoading: controlledLoading, ...props }, ref) => {
const { isLoading: contextLoading } = useCommand();
const isLoading = controlledLoading !== undefined ? controlledLoading : contextLoading;
return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, utils_1.cn)("max-h-[300px] overflow-y-auto overflow-x-hidden", className), "data-lenis-prevent": true, ...props, children: [isLoading && props.children && ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center py-6", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) })), !isLoading && props.children] }));
});
exports.CommandList = CommandList;
CommandList.displayName = "CommandList";
const CommandEmpty = React.forwardRef((props, ref) => {
const { emptyMessage } = useCommand();
return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: "py-6 text-center text-sm text-muted-foreground", ...props, children: props.children || emptyMessage || "No results found." }));
});
exports.CommandEmpty = CommandEmpty;
CommandEmpty.displayName = "CommandEmpty";
const CommandGroup = React.forwardRef(({ className, heading, ...props }, ref) => ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, utils_1.cn)("overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground", className), ...props, children: [heading && (0, jsx_runtime_1.jsx)("div", { "cmdk-group-heading": "", children: heading }), props.children] })));
exports.CommandGroup = CommandGroup;
CommandGroup.displayName = "CommandGroup";
const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, utils_1.cn)("-mx-1 h-px bg-background", className), ...props })));
exports.CommandSeparator = CommandSeparator;
CommandSeparator.displayName = "CommandSeparator";
const CommandItem = React.forwardRef(({ className, disabled, onSelect, value, ...props }, ref) => {
const [isSelected, setIsSelected] = React.useState(false);
return ((0, jsx_runtime_1.jsx)("div", { 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 data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50", isSelected && "bg-accent text-accent-foreground", className), "data-disabled": disabled ? "true" : undefined, "data-selected": isSelected ? "true" : undefined, "data-value": value, onMouseEnter: () => setIsSelected(true), onMouseLeave: () => setIsSelected(false), onClick: () => {
if (!disabled && onSelect) {
onSelect();
}
}, ...props }));
});
exports.CommandItem = CommandItem;
CommandItem.displayName = "CommandItem";
const CommandShortcut = ({ 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.CommandShortcut = CommandShortcut;
CommandShortcut.displayName = "CommandShortcut";
//# sourceMappingURL=command.js.map