gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-04 13:39:01 +01:00
Code Issues Actions 20 Packages Projects Releases Wiki Activity

feat(react/settings): react to external changes

Browse Source
This commit is contained in:
Elian Doran 2025-08-18 20:41:33 +03:00
parent b97a5ef888
commit 3837466cb3
No known key found for this signature in database
2 changed files with 49 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
apps/client/src/widgets/react/FormTextBox.tsx
View File

@ -4,10 +4,11 @@ interface FormTextBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "
id?: string; id?: string;
currentValue?: string; currentValue?: string;
onChange?(newValue: string, validity: ValidityState): void; onChange?(newValue: string, validity: ValidityState): void;
onBlur?(newValue: string): void;
inputRef?: RefObject<HTMLInputElement>; inputRef?: RefObject<HTMLInputElement>;
} }
export default function FormTextBox({ inputRef, className, type, currentValue, onChange, ...rest}: FormTextBoxProps) { export default function FormTextBox({ inputRef, className, type, currentValue, onChange, onBlur,...rest}: FormTextBoxProps) {
if (type === "number" && currentValue) { if (type === "number" && currentValue) {
const { min, max } = rest; const { min, max } = rest;
const currentValueNum = parseInt(currentValue, 10); const currentValueNum = parseInt(currentValue, 10);
@ -24,10 +25,14 @@ export default function FormTextBox({ inputRef, className, type, currentValue, o
className={`form-control ${className ?? ""}`} className={`form-control ${className ?? ""}`}
type={type ?? "text"} type={type ?? "text"}
value={currentValue} value={currentValue}
onInput={e => { onInput={onChange && (e => {
const target = e.currentTarget; const target = e.currentTarget;
onChange?.(target.value, target.validity); onChange?.(target.value, target.validity);
}} })}
onBlur={onBlur && (e => {
const target = e.currentTarget;
onBlur(target.value);
})}
{...rest} {...rest}
/> />
); );

43
apps/client/src/widgets/type_widgets/options/shortcuts.tsx
View File

@ -11,7 +11,7 @@ import { useCallback, useEffect, useState } from "preact/hooks";
import server from "../../../services/server"; import server from "../../../services/server";
import options from "../../../services/options"; import options from "../../../services/options";
import dialog from "../../../services/dialog"; import dialog from "../../../services/dialog";
import { useTriliumOptions } from "../../react/hooks"; import useTriliumEvent from "../../react/hooks";
export default function ShortcutSettings() { export default function ShortcutSettings() {
const [ keyboardShortcuts, setKeyboardShortcuts ] = useState<KeyboardShortcut[]>([]); const [ keyboardShortcuts, setKeyboardShortcuts ] = useState<KeyboardShortcut[]>([]);
@ -21,6 +21,36 @@ export default function ShortcutSettings() {
server.get<KeyboardShortcut[]>("keyboard-actions").then(setKeyboardShortcuts); server.get<KeyboardShortcut[]>("keyboard-actions").then(setKeyboardShortcuts);
}, []) }, [])
useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
const optionNames = loadResults.getOptionNames();
if (!optionNames || !optionNames.length) {
return;
}
let updatedShortcuts: KeyboardShortcut[] = null;
for (const optionName of optionNames) {
if (!(optionName.startsWith("keyboardShortcuts"))) {
continue;
}
const newValue = options.get(optionName);
const actionName = getActionNameFromOptionName(optionName);
const correspondingShortcut = keyboardShortcuts.find(s => "actionName" in s && s.actionName === actionName);
if (correspondingShortcut && "effectiveShortcuts" in correspondingShortcut) {
correspondingShortcut.effectiveShortcuts = JSON.parse(newValue);
if (!updatedShortcuts) {
updatedShortcuts = Array.from(keyboardShortcuts);
}
}
}
if (updatedShortcuts) {
setKeyboardShortcuts(updatedShortcuts);
}
});
const resetShortcuts = useCallback(async () => { const resetShortcuts = useCallback(async () => {
if (!(await dialog.confirm(t("shortcuts.confirm_reset")))) { if (!(await dialog.confirm(t("shortcuts.confirm_reset")))) {
return; return;
@ -128,7 +158,8 @@ function ShortcutEditor({ keyboardShortcut: action }: { keyboardShortcut: Action
return ( return (
<FormTextBox <FormTextBox
currentValue={originalShortcut} onChange={(newShortcut) => { currentValue={originalShortcut}
onBlur={(newShortcut) => {
const { actionName } = action; const { actionName } = action;
const optionName = getOptionName(actionName); const optionName = getOptionName(actionName);
const newShortcuts = newShortcut const newShortcuts = newShortcut
@ -142,6 +173,12 @@ function ShortcutEditor({ keyboardShortcut: action }: { keyboardShortcut: Action
) )
} }
const PREFIX = "keyboardShortcuts";
function getOptionName(actionName: string) { function getOptionName(actionName: string) {
return `keyboardShortcuts${actionName.substr(0, 1).toUpperCase()}${actionName.substr(1)}` as OptionNames; return `${PREFIX}${actionName.substr(0, 1).toUpperCase()}${actionName.substr(1)}` as OptionNames;
}
function getActionNameFromOptionName(optionName: string) {
return optionName.at(PREFIX.length)?.toLowerCase() + optionName.substring(PREFIX.length + 1);
} }