fix(mobile/custom_note_actions): missing file upload

This commit is contained in:
Elian Doran 2026-02-02 18:02:47 +02:00
parent 8a92370042
commit 6a313b99e4
No known key found for this signature in database
3 changed files with 35 additions and 9 deletions

View File

@ -3,8 +3,9 @@ import { useEffect, useRef } from "preact/hooks";
import ActionButton, { ActionButtonProps } from "./ActionButton";
import Button, { ButtonProps } from "./Button";
import { FormListItem, FormListItemOpts } from "./FormList";
interface FormFileUploadProps {
export interface FormFileUploadProps {
name?: string;
onChange: (files: FileList | null) => void;
multiple?: boolean;
@ -75,3 +76,25 @@ export function FormFileUploadActionButton({ onChange, ...buttonProps }: Omit<Ac
</>
);
}
/**
* Similar to {@link FormFileUploadButton}, but uses an {@link FormListItem} instead of a normal {@link Button}.
* @param param the change listener for the file upload and the properties for the button.
*/
export function FormFileUploadFormListItem({ onChange, children, ...buttonProps }: Omit<FormListItemOpts, "onClick"> & Pick<FormFileUploadProps, "onChange">) {
const inputRef = useRef<HTMLInputElement>(null);
return (
<>
<FormListItem
{...buttonProps}
onClick={() => inputRef.current?.click()}
>{children}</FormListItem>
<FormFileUpload
inputRef={inputRef}
hidden
onChange={onChange}
/>
</>
);
}

View File

@ -78,7 +78,7 @@ export interface FormListBadge {
text: string;
}
interface FormListItemOpts {
export interface FormListItemOpts {
children: ComponentChildren;
icon?: string;
value?: string;

View File

@ -13,6 +13,7 @@ import { isMobile, openInAppHelpFromUrl } from "../../services/utils";
import { ViewTypeOptions } from "../collections/interface";
import { buildSaveSqlToNoteHandler } from "../FloatingButtonsDefinitions";
import ActionButton, { ActionButtonProps } from "../react/ActionButton";
import { FormFileUploadActionButton, FormFileUploadFormListItem, FormFileUploadProps } from "../react/FormFileUpload";
import { FormListItem } from "../react/FormList";
import { useNoteLabel, useNoteLabelBoolean, useNoteProperty, useTriliumEvent, useTriliumEvents, useTriliumOption } from "../react/hooks";
import { ParentComponent } from "../react/react_utils";
@ -265,13 +266,15 @@ const cachedIsMobile = isMobile();
function NoteAction({ text, ...props }: Pick<ActionButtonProps, "text" | "icon" | "disabled" | "triggerCommand"> & {
onClick?: ((e: MouseEvent) => void) | undefined;
}) {
if (cachedIsMobile) {
return <FormListItem {...props}>{text}</FormListItem>;
}
return <ActionButton text={text} {...props} />;
return (cachedIsMobile
? <FormListItem {...props}>{text}</FormListItem>
: <ActionButton text={text} {...props} />
);
}
function NoteActionWithFileUpload() {
return "Not implemented.";
function NoteActionWithFileUpload({ text, ...props }: Pick<ActionButtonProps, "text" | "icon" | "disabled" | "triggerCommand"> & Pick<FormFileUploadProps, "onChange">) {
return (cachedIsMobile
? <FormFileUploadFormListItem {...props}>{text}</FormFileUploadFormListItem>
: <FormFileUploadActionButton text={text} {...props} />
);
}