refactor(layout): extract file actions to separate file

This commit is contained in:
Elian Doran 2025-12-14 22:16:54 +02:00
parent 8ba2357d91
commit 3c52ceb4e6
No known key found for this signature in database
2 changed files with 48 additions and 32 deletions

View File

@ -20,12 +20,11 @@ import CreatePaneButton from "../buttons/create_pane_button";
import MovePaneButton from "../buttons/move_pane_button";
import ActionButton from "../react/ActionButton";
import Dropdown from "../react/Dropdown";
import { FormFileUploadActionButton } from "../react/FormFileUpload";
import { FormDropdownDivider, FormDropdownSubmenu, FormListHeader, FormListItem, FormListToggleableItem } from "../react/FormList";
import { useIsNoteReadOnly, useNoteContext, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useTriliumOption } from "../react/hooks";
import { ParentComponent } from "../react/react_utils";
import { NoteTypeDropdownContent, useNoteBookmarkState, useShareState } from "./BasicPropertiesTab";
import { buildUploadNewFileRevisionListener } from "./FilePropertiesTab";
import NoteActionsCustom from "./NoteActionsCustom";
const isNewLayout = isExperimentalFeatureEnabled("new-layout");
@ -33,7 +32,7 @@ export default function NoteActions() {
const { note, noteContext } = useNoteContext();
return (
<div className="ribbon-button-container" style={{ contain: "none" }}>
{note && <FileActions note={note} />}
{note && <NoteActionsCustom note={note} />}
<MovePaneButton direction="left" />
<MovePaneButton direction="right" />
<ClosePaneButton />
@ -279,32 +278,3 @@ function ConvertToAttachment({ note }: { note: FNote }) {
>{t("note_actions.convert_into_attachment")}</FormListItem>
);
}
function FileActions({ note }: { note: FNote }) {
const canAccessProtectedNote = !note?.isProtected || protected_session_holder.isProtectedSessionAvailable();
return (note.type === "file" &&
<>
<FormFileUploadActionButton
icon="bx bx-folder-open"
text={t("file_properties.upload_new_revision")}
disabled={!canAccessProtectedNote}
onChange={buildUploadNewFileRevisionListener(note)}
/>
<ActionButton
icon="bx bx-link-external"
text={t("file_properties.open")}
disabled={note.isProtected}
onClick={() => openNoteExternally(note.noteId, note.mime)}
/>
<ActionButton
icon="bx bx-download"
text={t("file_properties.download")}
disabled={!canAccessProtectedNote}
onClick={() => downloadFileNote(note.noteId)}
/>
</>
);
}

View File

@ -0,0 +1,46 @@
import FNote from "../../entities/fnote";
import { t } from "../../services/i18n";
import { downloadFileNote, openNoteExternally } from "../../services/open";
import protected_session_holder from "../../services/protected_session_holder";
import ActionButton from "../react/ActionButton";
import { FormFileUploadActionButton } from "../react/FormFileUpload";
import { buildUploadNewFileRevisionListener } from "./FilePropertiesTab";
/**
* Part of {@link NoteActions} on the new layout, but are rendered with a slight spacing
* from the rest of the note items and the buttons differ based on the note type.
*/
export default function NoteActionsCustom({ note }: { note: FNote }) {
return (
<FileActions note={note} />
);
}
function FileActions({ note }: { note: FNote }) {
const canAccessProtectedNote = !note?.isProtected || protected_session_holder.isProtectedSessionAvailable();
return (note.type === "file" &&
<>
<FormFileUploadActionButton
icon="bx bx-folder-open"
text={t("file_properties.upload_new_revision")}
disabled={!canAccessProtectedNote}
onChange={buildUploadNewFileRevisionListener(note)}
/>
<ActionButton
icon="bx bx-link-external"
text={t("file_properties.open")}
disabled={note.isProtected}
onClick={() => openNoteExternally(note.noteId, note.mime)}
/>
<ActionButton
icon="bx bx-download"
text={t("file_properties.download")}
disabled={!canAccessProtectedNote}
onClick={() => downloadFileNote(note.noteId)}
/>
</>
);
}