mirror of
https://github.com/ryanamay/inkdrop-command-palette.git
synced 2024-09-20 01:40:34 +00:00
added ability to exit using ESC
This commit is contained in:
parent
ed9c586156
commit
f9ca7dc5a1
5 changed files with 28 additions and 19 deletions
3
lib/commands/core.js
Normal file
3
lib/commands/core.js
Normal file
|
@ -0,0 +1,3 @@
|
|||
"use babel";
|
||||
|
||||
export default [];
|
|
@ -12,18 +12,6 @@ export default Option = (props) => {
|
|||
// hide modal after executing
|
||||
}
|
||||
|
||||
function checkfocus() {
|
||||
if (document.activeElement.id === "cpInput") {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
const isHighlighted = {
|
||||
backgroundColor: idx === 0 ? "var(--highlight-background)" : "",
|
||||
};
|
||||
|
||||
return (
|
||||
<a className="option flex-row" onClick={execute} href="#">
|
||||
<p className="nomargin">
|
||||
|
|
|
@ -5,12 +5,10 @@ import Option from "./command.js";
|
|||
import Commands from "../commands/application.js";
|
||||
import { logger, useModal } from "inkdrop";
|
||||
import useArrowKeyNavigation from "../navigation/hook.js";
|
||||
import { ipcRenderer } from "electron";
|
||||
|
||||
const CommandPalette = (props) => {
|
||||
const modal = useModal();
|
||||
const { Dialog } = inkdrop.components.classes;
|
||||
const parentRef = useArrowKeyNavigation({ selectors: "a,input" });
|
||||
|
||||
const inputRef = useRef(null);
|
||||
const [searchQuery, setSearchQuery] = React.useState("");
|
||||
|
@ -23,6 +21,7 @@ const CommandPalette = (props) => {
|
|||
const sub = inkdrop.commands.add(document.body, {
|
||||
"commandpalette:toggle": toggle,
|
||||
});
|
||||
console.log("useeffect triggered");
|
||||
return () => sub.dispose();
|
||||
}, [toggle]);
|
||||
|
||||
|
@ -58,10 +57,15 @@ const CommandPalette = (props) => {
|
|||
{...modal.state}
|
||||
onBackdropClick={modal.close}
|
||||
className="commandpalette flex-col"
|
||||
ref={parentRef}
|
||||
>
|
||||
<Dialog.Content className="commandpalette">
|
||||
<div className="commandpalettewrapper flex-col" ref={parentRef}>
|
||||
<div
|
||||
className="commandpalettewrapper flex-col"
|
||||
ref={useArrowKeyNavigation({
|
||||
selectors: "a,input",
|
||||
modal: modal.close,
|
||||
})}
|
||||
>
|
||||
<div className="flex-col contents">
|
||||
<div className="ui small input">
|
||||
<input
|
||||
|
|
|
@ -7,6 +7,7 @@ function handleEnter({ event, currentIndex, availableElements }) {
|
|||
} else {
|
||||
clickElement = availableElements[currentIndex];
|
||||
}
|
||||
if (clickElement === undefined) return;
|
||||
clickElement.click();
|
||||
event.preventDefault();
|
||||
}
|
||||
|
@ -40,12 +41,13 @@ function handleArrowKey({ event, currentIndex, availableElements }) {
|
|||
export default function handleEvents({
|
||||
event,
|
||||
parentNode,
|
||||
modal,
|
||||
selectors = "a,button,input",
|
||||
}) {
|
||||
if (!parentNode) return;
|
||||
|
||||
const key = event.key;
|
||||
if (!["ArrowUp", "ArrowDown", "Enter"].includes(key)) {
|
||||
if (!["ArrowUp", "ArrowDown", "Enter", "Escape"].includes(key)) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
@ -68,5 +70,12 @@ export default function handleEvents({
|
|||
if (key === "Enter") {
|
||||
handleEnter({ event, currentIndex, availableElements });
|
||||
}
|
||||
|
||||
if (key === "Escape") {
|
||||
modal();
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
handleArrowKey({ event, currentIndex, availableElements });
|
||||
}
|
||||
|
|
|
@ -9,12 +9,17 @@ import { useRef, useEffect } from "react";
|
|||
* @returns a useRef, which can be applied to a component
|
||||
*/
|
||||
export default function useArrowKeyNavigation(props) {
|
||||
const { selectors } = props || {};
|
||||
const { selectors, modal } = props || {};
|
||||
const parentNode = useRef();
|
||||
|
||||
useEffect(() => {
|
||||
const eventHandler = (event) => {
|
||||
handleEvents({ event, parentNode: parentNode.current, selectors });
|
||||
handleEvents({
|
||||
event,
|
||||
parentNode: parentNode.current,
|
||||
selectors,
|
||||
modal: modal,
|
||||
});
|
||||
};
|
||||
document.addEventListener("keydown", eventHandler);
|
||||
return () => document.removeEventListener("keydown", eventHandler);
|
||||
|
|
Loading…
Reference in a new issue