Skip to content

Commit 2249dd4

Browse files
BlankeosBlankeos
authored
Merge pull request #3 from Blankeos/feat/better-use-disclosure
feat: Added use-disclosure-data.
2 parents 04f027b + a5fe747 commit 2249dd4

File tree

19 files changed

+489
-8
lines changed

19 files changed

+489
-8
lines changed

‎.changeset/khaki-zoos-refuse.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'bagon-hooks': patch
3+
---
4+
5+
feat: Added use-timeout.

‎.changeset/nine-houses-judge.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'bagon-hooks': patch
3+
---
4+
5+
feat: Added use-disclosure-data (an alternative to use-disclosure for data-driven disclosures).

‎.changeset/poor-rules-perform.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'bagon-hooks': patch
3+
---
4+
5+
feat: Improvements for use-disclosure (set so it can be used in onOpenChange).

‎.changeset/wise-dancers-run.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'bagon-hooks': patch
3+
---
4+
5+
Added use-interval.

‎README.md‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ Based on the [@mantine/hooks](https://github.com/mantinedev/mantine/tree/master/
6262
- [x] ~~use-debounced-state~~ use-debounced-signal
6363
- [x] use-debounced-value
6464
- [x] use-did-update
65-
- [ ] use-disclosure
65+
- [x] use-disclosure (✨ Improved, slightly better than mantine thanks to `set` for passing to stuff like `onOpenChange`)
6666
- [x] use-document-title
6767
- [x] use-document-visibility
6868
- [ ] use-event-listener
@@ -83,7 +83,7 @@ Based on the [@mantine/hooks](https://github.com/mantinedev/mantine/tree/master/
8383
- [x] use-in-viewport
8484
- [x] use-input-state
8585
- [x] use-intersection (Added, but note that there is [`createIntersectionObserver`](https://primitives.solidjs.community/package/intersection-observer/) in the official solid-primitives as well)
86-
- [ ] use-interval
86+
- [x] use-interval
8787
- [x] ~~use-is-first-render~~ (Every component function in SolidJS runs only once! Every component is first render only 🙂)
8888
- [x] ~~use-isomorphic-effect~~ (Solid's [`createEffect`](https://docs.solidjs.com/reference/basic-reactivity/create-effect) is technically already isomorphic because it doesn't error on SSR. Also, it also only runs on client-side.)
8989
- [ ] use-list-state
@@ -116,7 +116,7 @@ Based on the [@mantine/hooks](https://github.com/mantinedev/mantine/tree/master/
116116
- [ ] use-throttled-callback
117117
- [ ] use-throttled-state
118118
- [ ] use-throttled-value
119-
- [ ] use-timeout
119+
- [x] use-timeout
120120
- [x] use-toggle
121121
- [ ] use-uncontrolled
122122
- [ ] use-validated-state
@@ -127,7 +127,8 @@ Based on the [@mantine/hooks](https://github.com/mantinedev/mantine/tree/master/
127127

128128
### New in Bagon Hooks
129129

130-
- [x] use-keyboard
130+
- [x] use-keyboard (✨ Runs even on single keys as opposed useHotkeys that only runs on combinations, so more general usecases)
131+
- [x] use-disclosure-data (✨ Improved, an alternative to use-disclosure for data-driven disclosures. I use it)
131132

132133
### Others
133134

‎dev/components/examples/use-disclosure-data/use-disclosure-data.code.mdx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
```tsx
2+
import { useDisclosureData } from 'bagon-hooks';
3+
4+
import { For, Show } from 'solid-js';
5+
6+
export function UseDisclosureDataExample() {
7+
const items = [
8+
{ id: '1', title: 'Item 1' },
9+
{ id: '2', title: 'Item 2' },
10+
];
11+
12+
// If you have multiple modals,
13+
// I recommend prefixing `data`, `open`, `handlers` with the same name.
14+
// i.e. editModalData, editModalOpen, editModalHandlers
15+
const [data, open, handlers] = useDisclosureData<(typeof items)[number]>(null);
16+
17+
return (
18+
<div class="flex h-full w-full items-center justify-center gap-x-1 rounded-md border p-3 py-10 text-center text-sm">
19+
<ul class="flex flex-col gap-2">
20+
<For each={items}>
21+
{item => (
22+
<li>
23+
<button
24+
onClick={() => {
25+
handlers.open(item);
26+
}}
27+
class="rounded bg-blue-500 px-4 py-2 text-white"
28+
>
29+
Open Dialog for {item.title}
30+
</button>
31+
</li>
32+
)}
33+
</For>
34+
</ul>
35+
36+
<Show when={open()}>
37+
<div class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
38+
<div class="rounded-lg bg-white p-6 shadow-lg">
39+
<h2 class="mb-4 text-lg font-bold">{data()?.title || 'Dialog Title'}</h2>
40+
<p class="mb-4">This is an example dialog using useDisclosure and data: {data()?.id}</p>
41+
<button onClick={handlers.close} class="rounded bg-gray-500 px-4 py-2 text-white">
42+
Close
43+
</button>
44+
</div>
45+
</div>
46+
</Show>
47+
</div>
48+
);
49+
}
50+
```

‎dev/components/examples/use-disclosure-data/use-disclosure-data.example.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { useDisclosureData } from 'src';
2+
3+
import { For, Show } from 'solid-js';
4+
import { useMDXComponents } from 'solid-jsx';
5+
import { ExampleBase } from '../example-base';
6+
import Code from './use-disclosure-data.code.mdx';
7+
8+
export function UseDisclosureDataExample() {
9+
const items = [
10+
{ id: '1', title: 'Item 1' },
11+
{ id: '2', title: 'Item 2' },
12+
];
13+
14+
// If you have multiple modals,
15+
// I recommend prefixing `data`, `open`, `handlers` with the same name.
16+
// i.e. editModalData, editModalOpen, editModalHandlers
17+
const [data, open, handlers] = useDisclosureData<(typeof items)[number]>(null);
18+
19+
// @ts-ignore
20+
const components: any = useMDXComponents();
21+
return (
22+
<ExampleBase
23+
title="useDisclosureData"
24+
description="For complex usecases where we only need to pass data to the disclosure. I.e. Edit Modals, Confirm Alerts with details about the item clicked, etc."
25+
code={<Code components={components} />}
26+
>
27+
<div class="flex h-full w-full items-center justify-center gap-x-1 rounded-md border p-3 py-10 text-center text-sm">
28+
<ul class="flex flex-col gap-2">
29+
<For each={items}>
30+
{item => (
31+
<li>
32+
<button
33+
onClick={() => {
34+
handlers.open(item);
35+
}}
36+
class="rounded bg-blue-500 px-4 py-2 text-white"
37+
>
38+
Open Dialog for {item.title}
39+
</button>
40+
</li>
41+
)}
42+
</For>
43+
</ul>
44+
45+
<Show when={open()}>
46+
<div class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
47+
<div class="rounded-lg bg-white p-6 shadow-lg">
48+
<h2 class="mb-4 text-lg font-bold">{data()?.title || 'Dialog Title'}</h2>
49+
<p class="mb-4">
50+
This is an example dialog using useDisclosure and data: {data()?.id}
51+
</p>
52+
<button onClick={handlers.close} class="rounded bg-gray-500 px-4 py-2 text-white">
53+
Close
54+
</button>
55+
</div>
56+
</div>
57+
</Show>
58+
</div>
59+
</ExampleBase>
60+
);
61+
}

‎dev/components/examples/use-interval/use-interval.code.mdx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
```tsx
2+
import { useInterval } from 'bagon-hooks';
3+
4+
import { createSignal } from 'solid-js';
5+
6+
export function UseIntervalExample() {
7+
const [seconds, setSeconds] = createSignal(0);
8+
9+
const interval = useInterval(
10+
() => {
11+
setSeconds(s => s + 1);
12+
},
13+
1000,
14+
{ autoInvoke: true },
15+
);
16+
17+
return (
18+
<div class="flex h-full w-full flex-col items-center justify-center gap-x-3 gap-y-3 rounded-md border p-3 py-10 text-center">
19+
<p class="text-xl font-medium">Page loaded {seconds()} seconds ago.</p>
20+
<button
21+
class={`rounded-md ${
22+
!interval.active() ? 'bg-primary' : 'bg-red-500'
23+
} px-3 py-1.5 text-white transition active:scale-95`}
24+
onClick={interval.toggle}
25+
>
26+
{interval.active() ? 'Stop' : 'Start'} counting
27+
</button>
28+
</div>
29+
);
30+
}
31+
```

‎dev/components/examples/use-interval/use-interval.example.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { useInterval } from 'src';
2+
import { ExampleBase } from '../example-base';
3+
import Code from './use-interval.code.mdx';
4+
5+
import { createSignal } from 'solid-js';
6+
import { useMDXComponents } from 'solid-jsx';
7+
8+
export function UseIntervalExample() {
9+
const [seconds, setSeconds] = createSignal(0);
10+
11+
const interval = useInterval(
12+
() => {
13+
setSeconds(s => s + 1);
14+
},
15+
1000,
16+
{ autoInvoke: true },
17+
);
18+
19+
// @ts-ignore
20+
const components: any = useMDXComponents();
21+
22+
return (
23+
<ExampleBase
24+
title="useInterval"
25+
description="Calls function with a given interval"
26+
code={<Code components={components} />}
27+
>
28+
<div class="flex h-full w-full flex-col items-center justify-center gap-x-3 gap-y-3 rounded-md border p-3 py-10 text-center">
29+
<p class="text-xl font-medium">Page loaded {seconds()} seconds ago.</p>
30+
<button
31+
class={`rounded-md ${
32+
!interval.active() ? 'bg-primary' : 'bg-red-500'
33+
} px-3 py-1.5 text-white transition active:scale-95`}
34+
onClick={interval.toggle}
35+
>
36+
{interval.active() ? 'Stop' : 'Start'} counting
37+
</button>
38+
</div>
39+
</ExampleBase>
40+
);
41+
}

‎dev/components/examples/use-local-storage/use-local-storage.code.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export function UseLocalStorageExample() {
3434
function Key(props: FlowProps<{ activated: boolean; onClick: () => void }>) {
3535
return (
3636
<button onClick={props.onClick} class="relative text-xs">
37-
<div class="absolute inset-0 rounded-md bg-neutral-200 transition"></div>
37+
<div class="absolute inset-0 rounded-md bg-neutral-200 transition" />
3838
<div
3939
class="relative transform rounded-md border bg-neutral-50 px-2 py-1.5 transition-transform"
4040
style={{

0 commit comments

Comments
 (0)