Compare commits
2
Commits
add-cmdk
...
30e8b82d13
| Author | SHA1 | Date | |
|---|---|---|---|
 somayeh
|
30e8b82d13 | ||
|
somayeh
|
1623b686f2 |
+5
-134
@@ -1,140 +1,11 @@
|
|||||||
import { useState, useEffect } from "react";
|
import { MantineProvider } from "@mantine/core";
|
||||||
import { MantineProvider, Tabs, Button } from "@mantine/core";
|
import CmdkTestDemo from "./CmdkTestDemo";
|
||||||
import {
|
|
||||||
HotkeysProvider,
|
|
||||||
useHotkeys,
|
|
||||||
useHotkeysContext,
|
|
||||||
} from "react-hotkeys-hook";
|
|
||||||
import { Command } from "cmdk";
|
|
||||||
import "@mantine/core/styles.css";
|
import "@mantine/core/styles.css";
|
||||||
|
|
||||||
function TabContent({ title, scopeName }: any) {
|
|
||||||
const [text, setText] = useState(`${title} panel `);
|
|
||||||
const [used, setUsed] = useState(false);
|
|
||||||
|
|
||||||
useHotkeys(
|
|
||||||
"ctrl+b",
|
|
||||||
() => {
|
|
||||||
if (used) return;
|
|
||||||
setText((prev) => prev + `${title} `);
|
|
||||||
setUsed(true);
|
|
||||||
},
|
|
||||||
{
|
|
||||||
scopes: [scopeName],
|
|
||||||
preventDefault: true,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
return <>{text}</>;
|
|
||||||
}
|
|
||||||
|
|
||||||
function TabsPage() {
|
|
||||||
const { enableScope, disableScope } = useHotkeysContext();
|
|
||||||
const [activeTab, setActiveTab] = useState("1");
|
|
||||||
const [opened, setOpened] = useState(false);
|
|
||||||
|
|
||||||
const actions = [
|
|
||||||
{ id: "1", label: "First", description: "First panel" },
|
|
||||||
{ id: "2", label: "Second", description: "Second panel" },
|
|
||||||
{ id: "3", label: "Third", description: "Third panel" },
|
|
||||||
];
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const currentScope = `tab${activeTab}`;
|
|
||||||
enableScope(currentScope);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
disableScope(currentScope);
|
|
||||||
};
|
|
||||||
}, [activeTab, enableScope, disableScope]);
|
|
||||||
|
|
||||||
useHotkeys("ctrl+1", () => setActiveTab("1"), { preventDefault: true });
|
|
||||||
useHotkeys("ctrl+2", () => setActiveTab("2"), { preventDefault: true });
|
|
||||||
useHotkeys("ctrl+3", () => setActiveTab("3"), { preventDefault: true });
|
|
||||||
|
|
||||||
useHotkeys(
|
|
||||||
"ctrl+k",
|
|
||||||
(e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
setOpened((prev) => !prev);
|
|
||||||
},
|
|
||||||
{ enableOnFormTags: true },
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleSelectTab = (tabId: string) => {
|
|
||||||
setActiveTab(tabId);
|
|
||||||
setOpened(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Button onClick={() => setOpened(true)} variant="default" mb="md">
|
|
||||||
Open Command Menu (Ctrl + K)
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<Command.Dialog
|
|
||||||
open={opened}
|
|
||||||
onOpenChange={() => setOpened(false)}
|
|
||||||
label="Global Command Menu"
|
|
||||||
>
|
|
||||||
<Command.Input placeholder="Search Tab ..." autoFocus />
|
|
||||||
|
|
||||||
<Command.List>
|
|
||||||
<Command.Empty>No results found.</Command.Empty>
|
|
||||||
|
|
||||||
<Command.Group>
|
|
||||||
{actions.map((action) => (
|
|
||||||
<Command.Item
|
|
||||||
key={action.id}
|
|
||||||
onSelect={() => handleSelectTab(action.id)}
|
|
||||||
style={{
|
|
||||||
fontWeight: activeTab === action.id ? "bold" : "normal",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<div>{action.label}</div>
|
|
||||||
<small style={{ color: "var(--mantine-color-dimmed)" }}>
|
|
||||||
{action.description}
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
</Command.Item>
|
|
||||||
))}
|
|
||||||
</Command.Group>
|
|
||||||
</Command.List>
|
|
||||||
</Command.Dialog>
|
|
||||||
|
|
||||||
<Tabs
|
|
||||||
value={activeTab}
|
|
||||||
onChange={(value) => value && setActiveTab(value)}
|
|
||||||
>
|
|
||||||
<Tabs.List>
|
|
||||||
<Tabs.Tab value="1">First</Tabs.Tab>
|
|
||||||
<Tabs.Tab value="2">Second</Tabs.Tab>
|
|
||||||
<Tabs.Tab value="3">Third</Tabs.Tab>
|
|
||||||
</Tabs.List>
|
|
||||||
|
|
||||||
<Tabs.Panel value="1">
|
|
||||||
<TabContent title="First" scopeName="tab1" />
|
|
||||||
</Tabs.Panel>
|
|
||||||
|
|
||||||
<Tabs.Panel value="2">
|
|
||||||
<TabContent title="Second" scopeName="tab2" />
|
|
||||||
</Tabs.Panel>
|
|
||||||
|
|
||||||
<Tabs.Panel value="3">
|
|
||||||
<TabContent title="Third" scopeName="tab3" />
|
|
||||||
</Tabs.Panel>
|
|
||||||
</Tabs>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
return (
|
return (
|
||||||
<HotkeysProvider initiallyActiveScopes={["tab1"]}>
|
<MantineProvider>
|
||||||
<MantineProvider>
|
<CmdkTestDemo />
|
||||||
<TabsPage />
|
</MantineProvider>
|
||||||
</MantineProvider>
|
|
||||||
</HotkeysProvider>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,83 @@
|
|||||||
|
import { Button } from "@mantine/core";
|
||||||
|
import { Command } from "cmdk";
|
||||||
|
import { useMemo, useState } from "react";
|
||||||
|
interface Product {
|
||||||
|
id: number;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
price: number;
|
||||||
|
category: string;
|
||||||
|
brand: string;
|
||||||
|
}
|
||||||
|
function generate5kMockProducts(): Product[] {
|
||||||
|
const categories = [
|
||||||
|
"Electronics",
|
||||||
|
"Fashion",
|
||||||
|
"Home & Living",
|
||||||
|
"Beauty & Care",
|
||||||
|
"Sports & Outdoors",
|
||||||
|
"Automotive",
|
||||||
|
];
|
||||||
|
const brands = ["Sony", "Samsung", "Apple", "Nike", "Adidas", "IKEA"];
|
||||||
|
|
||||||
|
return Array.from({ length: 5000 }, (_, index) => {
|
||||||
|
const id = index + 1;
|
||||||
|
const category = categories[index % categories.length];
|
||||||
|
const brand = brands[index % brands.length];
|
||||||
|
|
||||||
|
return {
|
||||||
|
id,
|
||||||
|
title: `${brand} High-End Item #${id}`,
|
||||||
|
description: `Premium ${category.toLowerCase()} product manufactured by ${brand}. High availability in stock.`,
|
||||||
|
price: Math.floor(Math.random() * 900) + 10,
|
||||||
|
category,
|
||||||
|
brand,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const MOCK_PRODUCTS = generate5kMockProducts();
|
||||||
|
export default function CmdkTestDemo() {
|
||||||
|
const [opened, setOpened] = useState(false);
|
||||||
|
const actions = useMemo(() => {
|
||||||
|
return MOCK_PRODUCTS.map((product) => ({
|
||||||
|
id: String(product.id),
|
||||||
|
label: product.title,
|
||||||
|
description: `${product.brand} • ${product.category} - $${product.price}`,
|
||||||
|
}));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Button onClick={() => setOpened(true)} variant="default" mb="md">
|
||||||
|
Open Command Menu (Ctrl + K)
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Command.Dialog
|
||||||
|
open={opened}
|
||||||
|
onOpenChange={() => setOpened(false)}
|
||||||
|
label="Global Command Menu"
|
||||||
|
>
|
||||||
|
<Command.Input placeholder="Search Tab ..." autoFocus />
|
||||||
|
|
||||||
|
<Command.List>
|
||||||
|
<Command.Empty>No results found.</Command.Empty>
|
||||||
|
<Command.Group>
|
||||||
|
{actions.slice(0, 50).map((action) => (
|
||||||
|
<Command.Item
|
||||||
|
key={action.id}
|
||||||
|
value={`${action.label} ${action.description}`}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div>{action.label}</div>
|
||||||
|
<small style={{ color: "var(--mantine-color-dimmed)" }}>
|
||||||
|
{action.description}
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</Command.Item>
|
||||||
|
))}
|
||||||
|
</Command.Group>
|
||||||
|
</Command.List>
|
||||||
|
</Command.Dialog>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user