chore(client/jsx): fix errors in API

This commit is contained in:
Elian Doran 2025-12-21 13:19:42 +02:00
parent 4da5cb43fc
commit 444c0c6107
No known key found for this signature in database
2 changed files with 15 additions and 16 deletions

View File

@ -9,9 +9,9 @@ import Collapsible from "../widgets/react/Collapsible";
import Dropdown from "../widgets/react/Dropdown";
import FormCheckbox from "../widgets/react/FormCheckbox";
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 * as formListItems from "../widgets/react/FormList";
import { FormDropdownDivider, FormDropdownSubmenu,FormListItem } from "../widgets/react/FormList";
import FormRadioGroup from "../widgets/react/FormRadioGroup";
import FormText from "../widgets/react/FormText";
import FormTextArea from "../widgets/react/FormTextArea";
@ -76,9 +76,9 @@ export const preactAPI = Object.freeze({
Dropdown,
FormCheckbox,
FormDropdownList,
...formFileUpload,
FormFileUploadButton, FormFileUploadActionButton,
FormGroup,
...formListItems,
FormListItem, FormDropdownDivider, FormDropdownSubmenu,
FormRadioGroup,
FormText,
FormTextArea,

View File

@ -1,8 +1,9 @@
import { Tooltip } from "bootstrap";
import { useEffect, useRef, useMemo, useCallback } from "preact/hooks";
import { escapeQuotes } from "../../services/utils";
import { ComponentChildren } from "preact";
import { CSSProperties, memo } from "preact/compat";
import { useCallback,useEffect, useMemo, useRef } from "preact/hooks";
import { escapeQuotes } from "../../services/utils";
import { useUniqueName } from "./hooks";
interface FormCheckboxProps {
@ -18,30 +19,30 @@ interface FormCheckboxProps {
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 id = useUniqueName(name);
useEffect(() => {
if (!hint || !labelRef.current) return;
const tooltipInstance = Tooltip.getOrCreateInstance(labelRef.current, {
html: true,
template: '<div class="tooltip tooltip-top" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
});
return () => tooltipInstance?.dispose();
}, [hint]); // Proper dependency
const labelStyle = useMemo(() =>
const labelStyle = useMemo(() =>
hint ? { textDecoration: "underline dotted var(--main-text-color)" } : undefined,
[hint]
[hint]
);
const handleChange = useCallback((e: Event) => {
onChange((e.target as HTMLInputElement).checked);
}, [onChange]);
const titleText = useMemo(() => hint ? escapeQuotes(hint) : undefined, [hint]);
return (
@ -65,6 +66,4 @@ const FormCheckbox = memo(({ name, disabled, label, currentValue, onChange, hint
</label>
</div>
);
});
export default FormCheckbox;
}