-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.tsx
38 lines (32 loc) · 1005 Bytes
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import { JSXElement, Match, Switch, children, createEffect, createSignal } from "solid-js";
import { SpoilerChildren, SpoilerHeader, SpoilerWrapper } from "./style";
import { EIconKind, Icon } from "../../ui-kit/icon";
export interface ISpoilerProps {
defaultOpen?: boolean | undefined;
header: JSXElement;
children: JSXElement;
}
export function Spoiler(props: ISpoilerProps) {
const [open, setOpen] = createSignal(props.defaultOpen);
createEffect(() => {
setOpen(props.defaultOpen);
});
const c = children(() => props.children);
const h = children(() => props.header);
const toggle = () => {
setOpen((prev) => !prev);
};
return (
<SpoilerWrapper>
<SpoilerHeader onClick={toggle}>
{h()}
<Icon kind={EIconKind.ChevronUp} size={20} rotation={open() ? 0 : 180} />
</SpoilerHeader>
<Switch>
<Match when={open()}>
<SpoilerChildren>{c()}</SpoilerChildren>
</Match>
</Switch>
</SpoilerWrapper>
);
}