jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Refactor: Add the possibility to don't use ctrl/cmd

Browse source
This commit is contained in:
igorrCarvalho 2024-05-06 18:37:53 -03:00
commit c2ae5e8831
1 changed files with 59 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

95
src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/EditShortcutButton/index.tsx
View file

@ -25,7 +25,7 @@ export default function EditShortcutButton({
disable?: boolean; disable?: boolean;
}): JSX.Element { }): JSX.Element {
const isMac = navigator.userAgent.toUpperCase().includes("MAC"); const isMac = navigator.userAgent.toUpperCase().includes("MAC");
const [key, setKey] = useState<string>(isMac ? "Cmd" : "Ctrl"); const [key, setKey] = useState<string | null>("");
const setSuccessData = useAlertStore((state) => state.setSuccessData); const setSuccessData = useAlertStore((state) => state.setSuccessData);
const setShortcuts = useShortcutsStore((state) => state.setShortcuts); const setShortcuts = useShortcutsStore((state) => state.setShortcuts);
const unavaliableShortcuts = useShortcutsStore( const unavaliableShortcuts = useShortcutsStore(
@ -48,33 +48,45 @@ export default function EditShortcutButton({
); );
function editCombination(): void { function editCombination(): void {
console.log(canEditCombination(key)); if (key) {
if (canEditCombination(key)) { if (canEditCombination(key)) {
const newCombination = defaultShortcuts.map((s) => { const newCombination = defaultShortcuts.map((s) => {
if (s.name === shortcut[0]) { if (s.name === shortcut[0]) {
return { name: s.name, shortcut: key }; return { name: s.name, shortcut: key };
}
return { name: s.name, shortcut: s.shortcut };
});
const unavailable = unavaliableShortcuts.map((s) => {
if (s.toLowerCase() === defaultCombination.toLowerCase())
return (s = key.toUpperCase());
return s;
});
const fixCombination = key.split(" ");
if (
fixCombination[0].toLowerCase().includes("ctrl") ||
fixCombination[0].toLowerCase().includes("cmd")
) {
fixCombination[0] = "mod";
} }
return { name: s.name, shortcut: s.shortcut }; const shortcutName = shortcut[0].split(" ")[0].toLowerCase();
}); setUniqueShortcut(shortcutName, fixCombination.join("").toLowerCase());
const unavailable = unavaliableShortcuts.map((s) => { console.log(newCombination);
if (s.toLowerCase() === defaultCombination.toLowerCase()) setShortcuts(newCombination, unavailable);
return (s = key.toUpperCase()); setOpen(false);
return s; setSuccessData({
}); title: `${shortcut[0]} shortcut successfully changed`,
const fixCombination = key.split(" "); });
fixCombination[0] = "mod"; setKey(null);
const shortcutName = shortcut[0].split(" ")[0].toLowerCase(); localStorage.setItem(
setUniqueShortcut(shortcutName, fixCombination.join("").toLowerCase()); "langflow-shortcuts",
setShortcuts(newCombination, unavailable); JSON.stringify(newCombination),
setOpen(false); );
setSuccessData({ title: `${shortcut[0]} shortcut successfully changed` }); localStorage.setItem(
setKey(isMac ? "META" : "CTRL"); "langflow-UShortcuts",
localStorage.setItem( JSON.stringify(unavailable),
"langflow-shortcuts", );
JSON.stringify(newCombination), return;
); }
localStorage.setItem("langflow-UShortcuts", JSON.stringify(unavailable));
return;
} }
setErrorData({ setErrorData({
title: "Error saving key combination", title: "Error saving key combination",
@ -83,18 +95,29 @@ export default function EditShortcutButton({
} }
useEffect(() => { useEffect(() => {
if (!open) setKey(isMac ? "Cmd" : "Ctrl"); if (!open) setKey(null);
console.log(key);
}, [open, setOpen, key]); }, [open, setOpen, key]);
function getFixedCombination({
oldKey,
key,
}: {
oldKey: string;
key: string;
}): string {
if (oldKey === null) {
return `${key.length > 0 ? toTitleCase(key) : toTitleCase(key)}`;
}
return `${oldKey.length > 0 ? toTitleCase(oldKey) : oldKey.toUpperCase()} + ${key.length > 0 ? toTitleCase(key) : key.toUpperCase()}`;
}
useEffect(() => { useEffect(() => {
function onKeyDown(e: KeyboardEvent) { function onKeyDown(e: KeyboardEvent) {
e.preventDefault(); e.preventDefault();
if (key.toUpperCase().includes(e.key.toUpperCase())) return; if (key) {
setKey( if (key.toUpperCase().includes(e.key.toUpperCase())) return;
(oldKey) => }
`${oldKey.length > 0 ? toTitleCase(oldKey) : oldKey.toUpperCase()} + ${e.key.length > 0 ? toTitleCase(e.key) : e.key.toUpperCase()}`, setKey((oldKey) => getFixedCombination({ oldKey: oldKey!, key: e.key }));
);
} }
document.addEventListener("keydown", onKeyDown); document.addEventListener("keydown", onKeyDown);
@ -118,7 +141,7 @@ export default function EditShortcutButton({
<BaseModal.Content> <BaseModal.Content>
<div className="align-center flex h-full w-full justify-center gap-4"> <div className="align-center flex h-full w-full justify-center gap-4">
<div className="flex items-center justify-center text-center text-lg font-bold"> <div className="flex items-center justify-center text-center text-lg font-bold">
{key.toUpperCase()} {key && key.toUpperCase()}
</div> </div>
</div> </div>
</BaseModal.Content> </BaseModal.Content>
@ -127,7 +150,7 @@ export default function EditShortcutButton({
<Button <Button
className="mr-5" className="mr-5"
variant={"destructive"} variant={"destructive"}
onClick={() => setKey(isMac ? "META" : "CTRL")} onClick={() => setKey(null)}
> >
Reset Combination Reset Combination
</Button> </Button>