Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-12 00:05:50 +01:00
Code Issues Packages Projects Releases Activity

feat(react/dialogs): port prompt

Browse Source
This commit is contained in:
Elian Doran
2025-08-05 19:06:47 +03:00
parent b3c81ce5f2
commit bde4545afc
12 changed files with 117 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/client/src/widgets/react/FormGroup.tsx
View File

@@ -1,6 +1,7 @@
import { ComponentChildren } from "preact";
import { ComponentChildren, RefObject } from "preact";
interface FormGroupProps {
labelRef?: RefObject<HTMLLabelElement>;
label: string;
title?: string;
className?: string;
@@ -8,10 +9,10 @@ interface FormGroupProps {
description?: string;
}
export default function FormGroup({ label, title, className, children, description }: FormGroupProps) {
export default function FormGroup({ label, title, className, children, description, labelRef }: FormGroupProps) {
return (
<div className={`form-group ${className}`} title={title}>
<label style={{ width: "100%" }}>
<label style={{ width: "100%" }} ref={labelRef}>
{label}
{children}
</label>

8
apps/client/src/widgets/react/FormTextBox.tsx
View File

@@ -1,4 +1,4 @@
import { HTMLInputTypeAttribute } from "preact/compat";
import { HTMLInputTypeAttribute, RefObject } from "preact/compat";
interface FormTextBoxProps {
id?: string;
@@ -8,13 +8,15 @@ interface FormTextBoxProps {
className?: string;
autoComplete?: string;
onChange?(newValue: string): void;
inputRef?: RefObject<HTMLInputElement>;
}
export default function FormTextBox({ id, type, name, className, currentValue, onChange, autoComplete }: FormTextBoxProps) {
export default function FormTextBox({ id, type, name, className, currentValue, onChange, autoComplete, inputRef }: FormTextBoxProps) {
return (
<input
ref={inputRef}
type={type ?? "text"}
className={`form-control ${className}`}
className={`form-control ${className ?? ""}`}
id={id}
name={name}
value={currentValue}

18
apps/client/src/widgets/react/Modal.tsx
View File

@@ -1,7 +1,7 @@
import { useEffect, useRef } from "preact/hooks";
import { t } from "../../services/i18n";
import { ComponentChildren } from "preact";
import type { CSSProperties } from "preact/compat";
import type { CSSProperties, RefObject } from "preact/compat";
interface ModalProps {
className: string;
@@ -29,10 +29,20 @@ interface ModalProps {
/** Called when the modal is hidden, either via close button, backdrop click or submit. */
onHidden?: () => void;
helpPageId?: string;
/**
* Gives access to the underlying modal element. This is useful for manipulating the modal directly
* or for attaching event listeners.
*/
modalRef?: RefObject<HTMLDivElement>;
/**
* Gives access to the underlying form element of the modal. This is only set if `onSubmit` is provided.
*/
formRef?: RefObject<HTMLFormElement>;
}
export default function Modal({ children, className, size, title, footer, footerAlignment, onShown, onSubmit, helpPageId, maxWidth, zIndex, scrollable, onHidden: onHidden }: ModalProps) {
const modalRef = useRef<HTMLDivElement>(null);
export default function Modal({ children, className, size, title, footer, footerAlignment, onShown, onSubmit, helpPageId, maxWidth, zIndex, scrollable, onHidden: onHidden, modalRef: _modalRef, formRef: _formRef }: ModalProps) {
const modalRef = _modalRef ?? useRef<HTMLDivElement>(null);
const formRef = _formRef ?? useRef<HTMLFormElement>(null);
if (onShown || onHidden) {
useEffect(() => {
@@ -84,7 +94,7 @@ export default function Modal({ children, className, size, title, footer, footer
</div>
{onSubmit ? (
<form onSubmit={(e) => {
<form ref={formRef} onSubmit={(e) => {
e.preventDefault();
onSubmit();
}}>