mirror of
https://github.com/zadam/trilium.git
synced 2026-01-06 14:44:25 +01:00
chore(client/jsx): fix errors in API
This commit is contained in:
parent
4da5cb43fc
commit
444c0c6107
@ -9,9 +9,9 @@ import Collapsible from "../widgets/react/Collapsible";
|
|||||||
import Dropdown from "../widgets/react/Dropdown";
|
import Dropdown from "../widgets/react/Dropdown";
|
||||||
import FormCheckbox from "../widgets/react/FormCheckbox";
|
import FormCheckbox from "../widgets/react/FormCheckbox";
|
||||||
import FormDropdownList from "../widgets/react/FormDropdownList";
|
import FormDropdownList from "../widgets/react/FormDropdownList";
|
||||||
import * as formFileUpload from "../widgets/react/FormFileUpload";
|
import { FormFileUploadActionButton,FormFileUploadButton } from "../widgets/react/FormFileUpload";
|
||||||
import FormGroup from "../widgets/react/FormGroup";
|
import FormGroup from "../widgets/react/FormGroup";
|
||||||
import * as formListItems from "../widgets/react/FormList";
|
import { FormDropdownDivider, FormDropdownSubmenu,FormListItem } from "../widgets/react/FormList";
|
||||||
import FormRadioGroup from "../widgets/react/FormRadioGroup";
|
import FormRadioGroup from "../widgets/react/FormRadioGroup";
|
||||||
import FormText from "../widgets/react/FormText";
|
import FormText from "../widgets/react/FormText";
|
||||||
import FormTextArea from "../widgets/react/FormTextArea";
|
import FormTextArea from "../widgets/react/FormTextArea";
|
||||||
@ -76,9 +76,9 @@ export const preactAPI = Object.freeze({
|
|||||||
Dropdown,
|
Dropdown,
|
||||||
FormCheckbox,
|
FormCheckbox,
|
||||||
FormDropdownList,
|
FormDropdownList,
|
||||||
...formFileUpload,
|
FormFileUploadButton, FormFileUploadActionButton,
|
||||||
FormGroup,
|
FormGroup,
|
||||||
...formListItems,
|
FormListItem, FormDropdownDivider, FormDropdownSubmenu,
|
||||||
FormRadioGroup,
|
FormRadioGroup,
|
||||||
FormText,
|
FormText,
|
||||||
FormTextArea,
|
FormTextArea,
|
||||||
|
|||||||
@ -1,8 +1,9 @@
|
|||||||
import { Tooltip } from "bootstrap";
|
import { Tooltip } from "bootstrap";
|
||||||
import { useEffect, useRef, useMemo, useCallback } from "preact/hooks";
|
|
||||||
import { escapeQuotes } from "../../services/utils";
|
|
||||||
import { ComponentChildren } from "preact";
|
import { ComponentChildren } from "preact";
|
||||||
import { CSSProperties, memo } from "preact/compat";
|
import { CSSProperties, memo } from "preact/compat";
|
||||||
|
import { useCallback,useEffect, useMemo, useRef } from "preact/hooks";
|
||||||
|
|
||||||
|
import { escapeQuotes } from "../../services/utils";
|
||||||
import { useUniqueName } from "./hooks";
|
import { useUniqueName } from "./hooks";
|
||||||
|
|
||||||
interface FormCheckboxProps {
|
interface FormCheckboxProps {
|
||||||
@ -18,30 +19,30 @@ interface FormCheckboxProps {
|
|||||||
containerStyle?: CSSProperties;
|
containerStyle?: CSSProperties;
|
||||||
}
|
}
|
||||||
|
|
||||||
const FormCheckbox = memo(({ name, disabled, label, currentValue, onChange, hint, containerStyle }: FormCheckboxProps) => {
|
export default function FormCheckbox({ name, disabled, label, currentValue, onChange, hint, containerStyle }: FormCheckboxProps) {
|
||||||
const labelRef = useRef<HTMLLabelElement>(null);
|
const labelRef = useRef<HTMLLabelElement>(null);
|
||||||
const id = useUniqueName(name);
|
const id = useUniqueName(name);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!hint || !labelRef.current) return;
|
if (!hint || !labelRef.current) return;
|
||||||
|
|
||||||
const tooltipInstance = Tooltip.getOrCreateInstance(labelRef.current, {
|
const tooltipInstance = Tooltip.getOrCreateInstance(labelRef.current, {
|
||||||
html: true,
|
html: true,
|
||||||
template: '<div class="tooltip tooltip-top" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
|
template: '<div class="tooltip tooltip-top" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
|
||||||
});
|
});
|
||||||
|
|
||||||
return () => tooltipInstance?.dispose();
|
return () => tooltipInstance?.dispose();
|
||||||
}, [hint]); // Proper dependency
|
}, [hint]); // Proper dependency
|
||||||
|
|
||||||
const labelStyle = useMemo(() =>
|
const labelStyle = useMemo(() =>
|
||||||
hint ? { textDecoration: "underline dotted var(--main-text-color)" } : undefined,
|
hint ? { textDecoration: "underline dotted var(--main-text-color)" } : undefined,
|
||||||
[hint]
|
[hint]
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleChange = useCallback((e: Event) => {
|
const handleChange = useCallback((e: Event) => {
|
||||||
onChange((e.target as HTMLInputElement).checked);
|
onChange((e.target as HTMLInputElement).checked);
|
||||||
}, [onChange]);
|
}, [onChange]);
|
||||||
|
|
||||||
const titleText = useMemo(() => hint ? escapeQuotes(hint) : undefined, [hint]);
|
const titleText = useMemo(() => hint ? escapeQuotes(hint) : undefined, [hint]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -65,6 +66,4 @@ const FormCheckbox = memo(({ name, disabled, label, currentValue, onChange, hint
|
|||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
});
|
}
|
||||||
|
|
||||||
export default FormCheckbox;
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user