|
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