feat: add support for HtmlElement props in Collapsible and Accordion components

master
Katja Lutz 2 years ago
parent fe8cf85e2a
commit e088e138ee

@ -1,15 +1,28 @@
import { createSignal, FlowComponent, JSX, mergeProps } from "solid-js";
import {
createSignal,
FlowComponent,
JSX,
mergeProps,
splitProps,
} from "solid-js";
import Collapsible from "./Collapsible";
const createAccordion = (defaultItem: number | null = 0) => {
const [item, setItem] = createSignal(defaultItem);
const AccordionItem: FlowComponent<{
alignCenter?: boolean;
label?: JSX.Element;
item?: number;
activeTitleColor?: string;
}> = (p) => {
const props = mergeProps({ alignCenter: true, item: Math.random() }, p);
const AccordionItem: FlowComponent<
{
alignCenter?: boolean;
label?: JSX.Element;
item?: number;
} & Parameters<typeof Collapsible>[0]
> = (p) => {
const mprops = mergeProps({ alignCenter: true, item: Math.random() }, p);
const [props, rest] = splitProps(mprops, [
"alignCenter",
"item",
"label",
"children",
]);
return (
<Collapsible
@ -25,10 +38,10 @@ const createAccordion = (defaultItem: number | null = 0) => {
{props.label}
</div>
}
activeTitleColor={props.activeTitleColor}
onChange={(evt: any) =>
setItem(evt.currentTarget.checked && props.item)
}
{...rest}
>
{props.children}
</Collapsible>

@ -1,4 +1,4 @@
import { FlowComponent, JSX, mergeProps } from "solid-js";
import { FlowComponent, JSX, mergeProps, onMount, splitProps } from "solid-js";
const Collapsible: FlowComponent<
{
@ -8,7 +8,15 @@ const Collapsible: FlowComponent<
label: string | JSX.Element;
} & JSX.HTMLAttributes<HTMLDivElement>
> = (p) => {
const props = mergeProps({ activeTitleColor: "text-black" }, p);
const mprops = mergeProps({ activeTitleColor: "text-black" }, p);
let [props, rest] = splitProps(mprops, [
"activeTitleColor",
"onChange",
"value",
"label",
"class",
"children",
]);
let inputRef: HTMLInputElement = undefined!;
return (
@ -19,7 +27,7 @@ const Collapsible: FlowComponent<
props.class
}
onFocus={(evt) => {
if (props.value) {
if (inputRef.checked) {
return;
}
@ -27,6 +35,7 @@ const Collapsible: FlowComponent<
inputRef.checked = true;
inputRef.dispatchEvent(new InputEvent("change", { bubbles: true }));
}}
{...rest}
>
<input
ref={inputRef}

Loading…
Cancel
Save