chore(react): port close_pane_button

This commit is contained in:
Elian Doran 2025-09-16 23:01:33 +03:00
parent 78e45d095b
commit a4e8e62452
No known key found for this signature in database
4 changed files with 31 additions and 37 deletions

View File

@ -125,7 +125,7 @@ export default class DesktopLayout {
.child(new SpacerWidget(0, 1))
.child(<MovePaneButton direction="left" />)
.child(<MovePaneButton direction="right" />)
.child(new ClosePaneButton())
.child(<ClosePaneButton />)
.child(new CreatePaneButton())
)
.child(<Ribbon />)

View File

@ -1,34 +0,0 @@
import type { EventData } from "../../components/app_context.js";
import { t } from "../../services/i18n.js";
import OnClickButtonWidget from "./onclick_button.js";
export default class ClosePaneButton extends OnClickButtonWidget {
isEnabled() {
return (
super.isEnabled() &&
// main note context should not be closeable
this.noteContext &&
!!this.noteContext.mainNtxId
);
}
async noteContextReorderEvent({ ntxIdsInOrder }: EventData<"noteContextReorder">) {
this.refresh();
}
constructor() {
super();
this.icon("bx-x")
.title(t("close_pane_button.close_this_pane"))
.titlePlacement("bottom")
.onClick((widget, e) => {
// to avoid split pane container detecting click within the pane which would try to activate this
// pane (which is being removed)
e.stopPropagation();
widget.triggerCommand("closeThisNoteSplit", { ntxId: widget.getClosestNtxId() });
})
.class("icon-action");
}
}

View File

@ -0,0 +1,30 @@
import { useState } from "preact/hooks";
import { t } from "../../services/i18n";
import ActionButton from "../react/ActionButton";
import { useNoteContext, useTriliumEvent } from "../react/hooks";
export default function ClosePaneButton() {
const { noteContext, parentComponent } = useNoteContext();
const [ isEnabled, setIsEnabled ] = useState(false);
function refresh() {
setIsEnabled(!!(noteContext && !!noteContext.mainNtxId));
}
useTriliumEvent("noteContextReorder", refresh);
return (
<ActionButton
icon="bx bx-x"
text={t("close_pane_button.close_this_pane")}
className={!isEnabled ? "hidden-ext" : ""}
onClick={(e) => {
// to avoid split pane container detecting click within the pane which would try to activate this
// pane (which is being removed)
e.stopPropagation();
parentComponent?.triggerCommand("closeThisNoteSplit", { ntxId: parentComponent.getClosestNtxId() });
}}
/>
)
}

View File

@ -31,8 +31,6 @@ export default function MovePaneButton({ direction }: MovePaneButtonProps) {
setRefreshCounter(refreshCounter + 1);
});
console.log("Refresh with ", isEnabled());
return (
<ActionButton
icon={direction === "left" ? "bx bx-chevron-left" : "bx bx-chevron-right"}