|
1 | | -import { component$, Slot, useContext, $, useOnWindow } from '@builder.io/qwik'; |
| 1 | +import { component$, Slot, useContext, $, useOnWindow, PropsOf } from '@builder.io/qwik'; |
2 | 2 | import { collapsibleContextId } from './collapsible-context-id'; |
3 | 3 |
|
4 | | -export const CollapsibleTrigger = component$((props) => { |
5 | | - const context = useContext(collapsibleContextId); |
6 | | - const contentId = `${context.itemId}-content`; |
| 4 | +export const CollapsibleTrigger = component$<PropsOf<'button'>>( |
| 5 | + ({ onClick$, ...props }) => { |
| 6 | + const context = useContext(collapsibleContextId); |
| 7 | + const contentId = `${context.itemId}-content`; |
7 | 8 |
|
8 | | - const handleClick$ = $(async () => { |
9 | | - setTimeout(() => { |
10 | | - context.isOpenSig.value = !context.isOpenSig.value; |
11 | | - }, 1); |
| 9 | + const handleClick$ = $(async () => { |
| 10 | + setTimeout(() => { |
| 11 | + context.isOpenSig.value = !context.isOpenSig.value; |
| 12 | + }, 1); |
12 | 13 |
|
13 | | - context.initialStateSig.value = false; |
14 | | - }); |
| 14 | + context.initialStateSig.value = false; |
| 15 | + }); |
15 | 16 |
|
16 | | - useOnWindow('resize', context.getContentDimensions$); |
| 17 | + useOnWindow('resize', context.getContentDimensions$); |
17 | 18 |
|
18 | | - return ( |
19 | | - <button |
20 | | - {...props} |
21 | | - ref={context.triggerRef} |
22 | | - data-state={ |
23 | | - context.initialStateSig.value |
24 | | - ? 'initial' |
25 | | - : context.isOpenSig.value |
26 | | - ? 'open' |
27 | | - : 'closed' |
28 | | - } |
29 | | - aria-expanded={context.isOpenSig.value} |
30 | | - aria-controls={context.isOpenSig.value ? contentId : undefined} |
31 | | - onClick$={[context.getContentDimensions$, handleClick$, props.onClick$]} |
32 | | - > |
33 | | - <Slot /> |
34 | | - </button> |
35 | | - ); |
36 | | -}); |
| 19 | + return ( |
| 20 | + <button |
| 21 | + {...props} |
| 22 | + ref={context.triggerRef} |
| 23 | + data-state={ |
| 24 | + context.initialStateSig.value |
| 25 | + ? 'initial' |
| 26 | + : context.isOpenSig.value |
| 27 | + ? 'open' |
| 28 | + : 'closed' |
| 29 | + } |
| 30 | + aria-expanded={context.isOpenSig.value} |
| 31 | + aria-controls={context.isOpenSig.value ? contentId : undefined} |
| 32 | + onClick$={[context.getContentDimensions$, handleClick$, onClick$]} |
| 33 | + > |
| 34 | + <Slot /> |
| 35 | + </button> |
| 36 | + ); |
| 37 | + }, |
| 38 | +); |
0 commit comments