mirror of
https://github.com/zadam/trilium.git
synced 2025-11-11 17:08:58 +01:00
chore(react/type_widget): pass error information
This commit is contained in:
parent
2f4e13b1bb
commit
695e8489ad
@ -3,12 +3,13 @@ import { ComponentChildren } from "preact";
|
|||||||
interface AdmonitionProps {
|
interface AdmonitionProps {
|
||||||
type: "warning" | "note" | "caution";
|
type: "warning" | "note" | "caution";
|
||||||
children: ComponentChildren;
|
children: ComponentChildren;
|
||||||
|
className?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Admonition({ type, children }: AdmonitionProps) {
|
export default function Admonition({ type, children, className }: AdmonitionProps) {
|
||||||
return (
|
return (
|
||||||
<div className={`admonition ${type}`} role="alert">
|
<div className={`admonition ${type} ${className}`} role="alert">
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,8 +1,13 @@
|
|||||||
import { isMobile } from "../../../services/utils";
|
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 { TypeWidgetProps } from "../type_widget";
|
||||||
import "./SplitEditor.css";
|
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.
|
* 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}.
|
* - 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.
|
* - 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 splitEditorOrientation = useSplitOrientation();
|
||||||
const [ readOnly ] = useNoteLabelBoolean(note, "readOnly");
|
const [ readOnly ] = useNoteLabelBoolean(note, "readOnly");
|
||||||
|
|
||||||
const editor = (!readOnly &&
|
const editor = (!readOnly &&
|
||||||
<div className="note-detail-split-editor-col">
|
<div className="note-detail-split-editor-col">
|
||||||
<div className="note-detail-split-editor">Detail goes here.</div>
|
<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>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
const preview = (
|
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="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 className="btn-group btn-group-sm map-type-switcher content-floating-buttons preview-buttons bottom-right" role="group">Buttons go here</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -3,6 +3,9 @@ import SplitEditor from "./SplitEditor";
|
|||||||
|
|
||||||
export default function SvgSplitEditor(props: TypeWidgetProps) {
|
export default function SvgSplitEditor(props: TypeWidgetProps) {
|
||||||
return (
|
return (
|
||||||
<SplitEditor {...props} />
|
<SplitEditor
|
||||||
|
error="Hi there"
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -143,12 +143,6 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
|
|||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
|
|
||||||
setError(message: string | null | undefined) {
|
|
||||||
this.$errorContainer.toggleClass("hidden-ext", !message);
|
|
||||||
this.$preview.toggleClass("on-error", !!message);
|
|
||||||
this.$errorContainer.text(message ?? "");
|
|
||||||
}
|
|
||||||
|
|
||||||
getData() {
|
getData() {
|
||||||
return this.editorTypeWidget.getData();
|
return this.editorTypeWidget.getData();
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user