feat: implement Collapsible component
parent
8bf1f7fff6
commit
794606072e
@ -0,0 +1,61 @@
|
|||||||
|
import { FlowComponent, JSX, mergeProps } from "solid-js";
|
||||||
|
|
||||||
|
const Collapsible: FlowComponent<
|
||||||
|
{
|
||||||
|
activeTitleColor?: string;
|
||||||
|
onChange?: JSX.EventHandler<HTMLInputElement, Event>;
|
||||||
|
value?: boolean;
|
||||||
|
label: string | JSX.Element;
|
||||||
|
} & JSX.HTMLAttributes<HTMLDivElement>
|
||||||
|
> = (p) => {
|
||||||
|
const props = mergeProps({ activeTitleColor: "text-black" }, p);
|
||||||
|
let inputRef: HTMLInputElement = undefined!;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
tabindex="0"
|
||||||
|
class={
|
||||||
|
"collapse collapse-plus border border-base-300 bg-base-100 " +
|
||||||
|
props.class
|
||||||
|
}
|
||||||
|
onFocus={(evt) => {
|
||||||
|
if (props.value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
evt.currentTarget.blur();
|
||||||
|
inputRef.checked = true;
|
||||||
|
inputRef.dispatchEvent(new InputEvent("change", { bubbles: true }));
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<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;
|
Loading…
Reference in New Issue