You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
1.7 KiB
TypeScript
71 lines
1.7 KiB
TypeScript
import { FlowComponent, JSX, mergeProps, onMount, splitProps } from "solid-js";
|
|
|
|
const Collapsible: FlowComponent<
|
|
{
|
|
activeTitleColor?: string;
|
|
onChange?: JSX.EventHandler<HTMLInputElement, Event>;
|
|
value?: boolean;
|
|
label: string | JSX.Element;
|
|
} & JSX.HTMLAttributes<HTMLDivElement>
|
|
> = (p) => {
|
|
const mprops = mergeProps({ activeTitleColor: "text-black" }, p);
|
|
let [props, rest] = splitProps(mprops, [
|
|
"activeTitleColor",
|
|
"onChange",
|
|
"value",
|
|
"label",
|
|
"class",
|
|
"children",
|
|
]);
|
|
let inputRef: HTMLInputElement = undefined!;
|
|
|
|
return (
|
|
<div
|
|
tabindex="0"
|
|
class={
|
|
"collapse collapse-plus border border-base-300 bg-base-100 " +
|
|
props.class
|
|
}
|
|
onFocus={(evt) => {
|
|
if (inputRef.checked) {
|
|
return;
|
|
}
|
|
|
|
evt.currentTarget.blur();
|
|
inputRef.checked = true;
|
|
inputRef.dispatchEvent(new InputEvent("change", { bubbles: true }));
|
|
}}
|
|
{...rest}
|
|
>
|
|
<input
|
|
ref={inputRef}
|
|
type="checkbox"
|
|
aria-label="Open"
|
|
checked={props.value}
|
|
onChange={(evt) => {
|
|
evt.currentTarget.blur();
|
|
if (props.onChange) {
|
|
props.onChange.call(this, evt);
|
|
}
|
|
}}
|
|
/>
|
|
<div
|
|
classList={{
|
|
"collapse-title transition-colors duration-200 text-xl font-medium":
|
|
true,
|
|
[props.activeTitleColor]: props.value,
|
|
}}
|
|
>
|
|
{props.label}
|
|
</div>
|
|
<div class="collapse-content">
|
|
<div classList={{ "py-1": true, invisible: !props.value }}>
|
|
{props.children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Collapsible;
|