gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-04 05:28:59 +01:00
Code Issues Actions 17 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 { CommandNames } from "../../components/app_context";
interface ButtonProps {
export interface ButtonProps {
name?: string;
/** Reference to the button element. Mostly useful for requesting focus. */
buttonRef?: RefObject<HTMLButtonElement>;

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

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