obsidian-plugin/jsmorabito_obsidian-commander
1
0
Fork 0
mirror of https://github.com/jsmorabito/obsidian-commander.git synced 2026-07-22 06:40:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix mobile toolbar icons not responding to clicks

Browse source 
Replace this.forceUpdate() with useState hook in functional components.
In Preact functional components, 'this' is undefined, so this.forceUpdate()
silently threw errors, preventing all callback handlers (remove, reorder,
rename, icon change, mode change) from completing on mobile.
This commit is contained in:
carlesba 2026-03-24 21:59:47 +01:00 committed by Carles Ballester
parent 0bfd4624eb
commit ecc9c06fd9
No known key found for this signature in database
2 changed files with 13 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/ui/components/commandViewerComponent.tsx
View file

@ -1,4 +1,5 @@
import { createContext, Fragment, h } from "preact";
import { useState } from "preact/hooks";
import CommanderPlugin from "src/main";
import CommandComponent from "./commandComponent";
import CommandManagerBase from "src/manager/commands/commandManager";
@ -25,6 +26,8 @@ export default function CommandViewer({
children,
sortable = true,
}: CommandViewerProps): h.JSX.Element {
const [, rerender] = useState(0);
const forceUpdate = (): void => rerender((n) => n + 1);
return (
<Fragment>
<ManagerContext.Provider value={manager}>
@ -48,7 +51,7 @@ export default function CommandViewer({
).didChooseRemove())
) {
await manager.removeCommand(cmd);
this.forceUpdate();
forceUpdate();
}
}}
handleUp={(): void => {
@ -58,7 +61,7 @@ export default function CommandViewer({
idx - 1
);
manager.reorder();
this.forceUpdate();
forceUpdate();
}}
handleDown={(): void => {
arrayMoveMutable(
@ -67,7 +70,7 @@ export default function CommandViewer({
idx + 1
);
manager.reorder();
this.forceUpdate();
forceUpdate();
}}
handleRename={async (
name
@ -75,7 +78,7 @@ export default function CommandViewer({
cmd.name = name;
await plugin.saveSettings();
manager.reorder();
this.forceUpdate();
forceUpdate();
}}
handleNewIcon={async (): Promise<void> => {
const newIcon =
@ -86,7 +89,7 @@ export default function CommandViewer({
cmd.icon = newIcon;
await plugin.saveSettings();
manager.reorder();
this.forceUpdate();
forceUpdate();
}
dispatchEvent(
new Event("cmdr-icon-changed")
@ -111,7 +114,7 @@ export default function CommandViewer({
mode || modes[currentIdx + 1];
await plugin.saveSettings();
manager.reorder();
this.forceUpdate();
forceUpdate();
}}
handleColorChange={async (
color?: string
@ -148,7 +151,7 @@ export default function CommandViewer({
const pair = await chooseNewCommand(plugin);
await manager.addCommand(pair);
manager.reorder();
this.forceUpdate();
forceUpdate();
}}
>
{t("Add command")}

5
src/ui/components/mobileModifyComponent.tsx
View file

@ -1,5 +1,5 @@
import { h } from "preact";
import { useEffect } from "preact/hooks";
import { useEffect, useState } from "preact/hooks";
import t from "src/l10n";
import { ObsidianIcon } from "src/util";
import MobileModifyModal from "../mobileModifyModal";
@ -13,9 +13,10 @@ export default function MobileModifyComponent({
plugin: CommanderPlugin;
modal: MobileModifyModal;
}): h.JSX.Element {
const [, rerender] = useState(0);
useEffect(() => {
const update = (): void => {
this.forceUpdate();
rerender((n) => n + 1);
};
addEventListener("cmdr-icon-changed", update);
return () => removeEventListener("cmdr-icon-changed", update);