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 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,

View File

@ -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;