chore(react/type_widget): pass error information

This commit is contained in:
Elian Doran 2025-09-20 12:41:39 +03:00
parent 2f4e13b1bb
commit 695e8489ad
No known key found for this signature in database
4 changed files with 19 additions and 14 deletions

View File

@ -3,11 +3,12 @@ import { ComponentChildren } from "preact";
interface AdmonitionProps {
type: "warning" | "note" | "caution";
children: ComponentChildren;
className?: string;
}
export default function Admonition({ type, children }: AdmonitionProps) {
export default function Admonition({ type, children, className }: AdmonitionProps) {
return (
<div className={`admonition ${type}`} role="alert">
<div className={`admonition ${type} ${className}`} role="alert">
{children}
</div>
)

View File

@ -1,8 +1,13 @@
import { isMobile } from "../../../services/utils";
import { useNoteLabel, useNoteLabelBoolean, useTriliumOption } from "../../react/hooks";
import Admonition from "../../react/Admonition";
import { useNoteLabelBoolean, useTriliumOption } from "../../react/hooks";
import { TypeWidgetProps } from "../type_widget";
import "./SplitEditor.css";
interface SplitEditorProps extends TypeWidgetProps {
error?: string | null;
}
/**
* Abstract `TypeWidget` which contains a preview and editor pane, each displayed on half of the available screen.
*
@ -12,19 +17,21 @@ import "./SplitEditor.css";
* - Can display errors to the user via {@link setError}.
* - Horizontal or vertical orientation for the editor/preview split, adjustable via the switch split orientation button floating button.
*/
export default function SplitEditor({ note }: TypeWidgetProps) {
export default function SplitEditor({ note, error }: SplitEditorProps) {
const splitEditorOrientation = useSplitOrientation();
const [ readOnly ] = useNoteLabelBoolean(note, "readOnly");
const editor = (!readOnly &&
<div className="note-detail-split-editor-col">
<div className="note-detail-split-editor">Detail goes here.</div>
<div className="admonition caution note-detail-error-container hidden-ext">Errors go here.</div>
{error && <Admonition type="caution" className="note-detail-error-container">
{error}
</Admonition>}
</div>
);
const preview = (
<div className="note-detail-split-preview-col">
<div className={`note-detail-split-preview-col ${error ? "on-error" : ""}`}>
<div className="note-detail-split-preview">Preview goes here</div>
<div className="btn-group btn-group-sm map-type-switcher content-floating-buttons preview-buttons bottom-right" role="group">Buttons go here</div>
</div>

View File

@ -3,6 +3,9 @@ import SplitEditor from "./SplitEditor";
export default function SvgSplitEditor(props: TypeWidgetProps) {
return (
<SplitEditor {...props} />
<SplitEditor
error="Hi there"
{...props}
/>
)
}

View File

@ -143,12 +143,6 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
return [];
}
setError(message: string | null | undefined) {
this.$errorContainer.toggleClass("hidden-ext", !message);
this.$preview.toggleClass("on-error", !!message);
this.$errorContainer.text(message ?? "");
}
getData() {
return this.editorTypeWidget.getData();
}