1
0
silverbullet/packages/web/components/command_palette.tsx
2022-05-16 15:09:36 +02:00

45 lines
1.2 KiB
TypeScript

import { isMacLike } from "../../common/util";
import { FilterList } from "./filter";
import { faPersonRunning } from "@fortawesome/free-solid-svg-icons";
import { AppCommand } from "../hooks/command";
import { FilterOption } from "@silverbulletmd/common/types";
export function CommandPalette({
commands,
recentCommands,
onTrigger,
}: {
commands: Map<string, AppCommand>;
recentCommands: Map<string, Date>;
onTrigger: (command: AppCommand | undefined) => void;
}) {
let options: FilterOption[] = [];
const isMac = isMacLike();
for (let [name, def] of commands.entries()) {
options.push({
name: name,
hint: isMac && def.command.mac ? def.command.mac : def.command.key,
orderId: recentCommands.has(name)
? -recentCommands.get(name)!.getTime()
: 0,
});
}
return (
<FilterList
label="Run"
placeholder="Command"
options={options}
allowNew={false}
icon={faPersonRunning}
helpText="Start typing the command name to filter results, press <code>Return</code> to run."
onSelect={(opt) => {
if (opt) {
onTrigger(commands.get(opt.name));
} else {
onTrigger(undefined);
}
}}
/>
);
}