gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-07 15:09:01 +01:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

refactor(react/ribbon): dedicated component for file upload

Browse Source
This commit is contained in:
Elian Doran 2025-08-22 20:25:15 +03:00
parent 978d829150
commit 21683db0b8
No known key found for this signature in database
3 changed files with 29 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/src/widgets/react/Button.tsx
View File

@ -4,7 +4,7 @@ import { useRef, useMemo } from "preact/hooks";
import { memo } from "preact/compat"; import { memo } from "preact/compat";
import { CommandNames } from "../../components/app_context"; import { CommandNames } from "../../components/app_context";
interface ButtonProps { export interface ButtonProps {
name?: string; name?: string;
/** Reference to the button element. Mostly useful for requesting focus. */ /** Reference to the button element. Mostly useful for requesting focus. */
buttonRef?: RefObject<HTMLButtonElement>; buttonRef?: RefObject<HTMLButtonElement>;

25
apps/client/src/widgets/react/FormFileUpload.tsx
View File

@ -1,4 +1,6 @@
import { Ref } from "preact"; import { Ref } from "preact";
import Button, { ButtonProps } from "./Button";
import { useRef } from "preact/hooks";
interface FormFileUploadProps { interface FormFileUploadProps {
name?: string; name?: string;
@ -21,3 +23,26 @@ export default function FormFileUpload({ inputRef, name, onChange, multiple, hid
</label> </label>
) )
} }
/**
* Combination of a button with a hidden file upload field.
*
* @param param the change listener for the file upload and the properties for the button.
*/
export function FormFileUploadButton({ onChange, ...buttonProps }: Omit<ButtonProps, "onClick"> & Pick<FormFileUploadProps, "onChange">) {
const inputRef = useRef<HTMLInputElement>(null);
return (
<>
<Button
{...buttonProps}
onClick={() => inputRef.current?.click()}
/>
<FormFileUpload
inputRef={inputRef}
hidden
onChange={onChange}
/>
</>
)
}

11
apps/client/src/widgets/ribbon/FilePropertiesTab.tsx
View File

@ -1,7 +1,7 @@
import { useEffect, useRef, useState } from "preact/hooks"; import { useEffect, useRef, useState } from "preact/hooks";
import { t } from "../../services/i18n"; import { t } from "../../services/i18n";
import { formatSize } from "../../services/utils"; import { formatSize } from "../../services/utils";
import FormFileUpload from "../react/FormFileUpload"; import FormFileUpload, { FormFileUploadButton } from "../react/FormFileUpload";
import { useNoteLabel, useTriliumEventBeta } from "../react/hooks"; import { useNoteLabel, useTriliumEventBeta } from "../react/hooks";
import { TabContext } from "./ribbon-interface"; import { TabContext } from "./ribbon-interface";
import FBlob from "../../entities/fblob"; import FBlob from "../../entities/fblob";
@ -15,7 +15,6 @@ export default function FilePropertiesTab({ note }: TabContext) {
const [ originalFileName ] = useNoteLabel(note, "originalFileName"); const [ originalFileName ] = useNoteLabel(note, "originalFileName");
const [ blob, setBlob ] = useState<FBlob | null>(); const [ blob, setBlob ] = useState<FBlob | null>();
const canAccessProtectedNote = !note?.isProtected || protected_session_holder.isProtectedSessionAvailable(); const canAccessProtectedNote = !note?.isProtected || protected_session_holder.isProtectedSessionAvailable();
const inputRef = useRef<HTMLInputElement>(null);
function refresh() { function refresh() {
note?.getBlob().then(setBlob); note?.getBlob().then(setBlob);
@ -63,16 +62,10 @@ export default function FilePropertiesTab({ note }: TabContext) {
onClick={() => openNoteExternally(note.noteId, note.mime)} onClick={() => openNoteExternally(note.noteId, note.mime)}
/> />
<Button <FormFileUploadButton
icon="bx bx-folder-open" icon="bx bx-folder-open"
text={t("file_properties.upload_new_revision")} text={t("file_properties.upload_new_revision")}
disabled={!canAccessProtectedNote} disabled={!canAccessProtectedNote}
onClick={() => inputRef.current?.click()}
/>
<FormFileUpload
inputRef={inputRef}
hidden
onChange={(fileToUpload) => { onChange={(fileToUpload) => {
if (!fileToUpload) { if (!fileToUpload) {
return; return;