public/svelte-headlessui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Refactor to useOpenClosed

Browse Source 
Fixes #6
This commit is contained in:
Ryan Gossiaux
2021-12-18 21:36:09 -08:00
parent 4a6edb4e1c
commit 9e45d92929
11 changed files with 23 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/components/dialog/Dialog.svelte
View File

@@ -40,7 +40,7 @@
</script> </script>
<script lang="ts"> <script lang="ts">
import { State } from "$lib/internal/open-closed"; import { State, useOpenClosed } from "$lib/internal/open-closed";
import { writable, Writable } from "svelte/store"; import { writable, Writable } from "svelte/store";
import { match } from "$lib/utils/match"; import { match } from "$lib/utils/match";
import { useId } from "$lib/hooks/use-id"; import { useId } from "$lib/hooks/use-id";
@@ -61,7 +61,7 @@
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
let containers: Set<HTMLElement> = new Set(); let containers: Set<HTMLElement> = new Set();
let openClosedState: Writable<State> | undefined = getContext("OpenClosed"); let openClosedState = useOpenClosed();
$: { $: {
open = open =

4
src/lib/components/disclosure/Disclosure.svelte
View File

@@ -44,7 +44,7 @@
<script lang="ts"> <script lang="ts">
import { useId } from "$lib/hooks/use-id"; import { useId } from "$lib/hooks/use-id";
import { match } from "$lib/utils/match"; import { match } from "$lib/utils/match";
import { State } from "$lib/internal/open-closed"; import { State, useOpenClosedProvider } from "$lib/internal/open-closed";
export let defaultOpen = false; export let defaultOpen = false;
let buttonId = `headlessui-disclosure-button-${useId()}`; let buttonId = `headlessui-disclosure-button-${useId()}`;
let panelId = `headlessui-disclosure-panel-${useId()}`; let panelId = `headlessui-disclosure-panel-${useId()}`;
@@ -94,7 +94,7 @@
}); });
let openClosedState: Writable<State> | undefined = writable(); let openClosedState: Writable<State> | undefined = writable();
setContext("OpenClosed", openClosedState); useOpenClosedProvider(openClosedState);
$: $openClosedState = match(disclosureState, { $: $openClosedState = match(disclosureState, {
[DisclosureStates.Open]: State.Open, [DisclosureStates.Open]: State.Open,

5
src/lib/components/disclosure/DisclosurePanel.svelte
View File

@@ -9,11 +9,10 @@
<script lang="ts"> <script lang="ts">
import { useDisclosureContext, DisclosureStates } from "./Disclosure.svelte"; import { useDisclosureContext, DisclosureStates } from "./Disclosure.svelte";
import type { Writable } from "svelte/store"; import { State, useOpenClosed } from "$lib/internal/open-closed";
import { State } from "$lib/internal/open-closed";
const api = useDisclosureContext("DisclosureButton"); const api = useDisclosureContext("DisclosureButton");
$: id = $api?.panelId; $: id = $api?.panelId;
let openClosedState: Writable<State> | undefined = getContext("OpenClosed"); let openClosedState = useOpenClosed();
setContext(DISCLOSURE_PANEL_CONTEXT_NAME, id); setContext(DISCLOSURE_PANEL_CONTEXT_NAME, id);

1
src/lib/components/listbox/Listbox.svelte
View File

@@ -178,6 +178,7 @@
let openClosedState = writable(State.Closed); let openClosedState = writable(State.Closed);
useOpenClosedProvider(openClosedState); useOpenClosedProvider(openClosedState);
$: openClosedState.set( $: openClosedState.set(
match(listboxState, { match(listboxState, {
[ListboxStates.Open]: State.Open, [ListboxStates.Open]: State.Open,

4
src/lib/components/menu/Menu.svelte
View File

@@ -5,7 +5,7 @@
} from "$lib/utils/calculate-active-index"; } from "$lib/utils/calculate-active-index";
import { getContext, setContext } from "svelte"; import { getContext, setContext } from "svelte";
import { writable, Writable } from "svelte/store"; import { writable, Writable } from "svelte/store";
import { State } from "$lib/internal/open-closed"; import { State, useOpenClosedProvider } from "$lib/internal/open-closed";
import { match } from "$lib/utils/match"; import { match } from "$lib/utils/match";
import { ActionArray, useActions } from "$lib/hooks/use-actions"; import { ActionArray, useActions } from "$lib/hooks/use-actions";
export enum MenuStates { export enum MenuStates {
@@ -149,7 +149,7 @@
} }
let openClosedState: Writable<State> | undefined = writable(State.Closed); let openClosedState: Writable<State> | undefined = writable(State.Closed);
setContext("OpenClosed", openClosedState); useOpenClosedProvider(openClosedState);
$: $openClosedState = match(menuState, { $: $openClosedState = match(menuState, {
[MenuStates.Open]: State.Open, [MenuStates.Open]: State.Open,

7
src/lib/components/menu/MenuItems.svelte
View File

@@ -4,9 +4,8 @@
import { Keys } from "$lib/utils/keyboard"; import { Keys } from "$lib/utils/keyboard";
import { Focus } from "$lib/utils/calculate-active-index"; import { Focus } from "$lib/utils/calculate-active-index";
import { treeWalker } from "$lib/hooks/use-tree-walker"; import { treeWalker } from "$lib/hooks/use-tree-walker";
import { State } from "$lib/internal/open-closed"; import { State, useOpenClosed } from "$lib/internal/open-closed";
import { getContext, tick } from "svelte"; import { tick } from "svelte";
import type { Writable } from "svelte/store";
import { ActionArray, useActions } from "$lib/hooks/use-actions"; import { ActionArray, useActions } from "$lib/hooks/use-actions";
export let use: ActionArray = []; export let use: ActionArray = [];
const api = useMenuContext("MenuButton"); const api = useMenuContext("MenuButton");
@@ -16,7 +15,7 @@
$: buttonStore = $api?.buttonStore; $: buttonStore = $api?.buttonStore;
$: itemsStore = $api?.itemsStore; $: itemsStore = $api?.itemsStore;
let openClosedState: Writable<State> | undefined = getContext("OpenClosed"); let openClosedState = useOpenClosed();
$: visible = $: visible =
openClosedState !== undefined openClosedState !== undefined

4
src/lib/components/popover/Popover.svelte
View File

@@ -48,7 +48,7 @@
isFocusableElement, isFocusableElement,
FocusableMode, FocusableMode,
} from "$lib/utils/focus-management"; } from "$lib/utils/focus-management";
import { State } from "$lib/internal/open-closed"; import { State, useOpenClosedProvider } from "$lib/internal/open-closed";
import type { PopoverGroupContext } from "./PopoverGroup.svelte"; import type { PopoverGroupContext } from "./PopoverGroup.svelte";
import { getContext, setContext, onMount } from "svelte"; import { getContext, setContext, onMount } from "svelte";
import { writable, Writable } from "svelte/store"; import { writable, Writable } from "svelte/store";
@@ -97,7 +97,7 @@
setContext(POPOVER_CONTEXT_NAME, api); setContext(POPOVER_CONTEXT_NAME, api);
let openClosedState: Writable<State> | undefined = writable(); let openClosedState: Writable<State> | undefined = writable();
setContext("OpenClosed", openClosedState); useOpenClosedProvider(openClosedState);
$: $openClosedState = match(popoverState, { $: $openClosedState = match(popoverState, {
[PopoverStates.Open]: State.Open, [PopoverStates.Open]: State.Open,

6
src/lib/components/popover/PopoverOverlay.svelte
View File

@@ -1,15 +1,13 @@
<script lang="ts"> <script lang="ts">
import { ActionArray, useActions } from "$lib/hooks/use-actions"; import { ActionArray, useActions } from "$lib/hooks/use-actions";
import { State } from "$lib/internal/open-closed"; import { State, useOpenClosed } from "$lib/internal/open-closed";
import { getContext } from "svelte";
import type { Writable } from "svelte/store";
import { PopoverStates, usePopoverContext } from "./Popover.svelte"; import { PopoverStates, usePopoverContext } from "./Popover.svelte";
export let use: ActionArray = []; export let use: ActionArray = [];
let api = usePopoverContext("PopoverOverlay"); let api = usePopoverContext("PopoverOverlay");
let openClosedState: Writable<State> | undefined = getContext("OpenClosed"); let openClosedState = useOpenClosed();
$: visible = $: visible =
openClosedState !== undefined openClosedState !== undefined

5
src/lib/components/popover/PopoverPanel.svelte
View File

@@ -11,7 +11,7 @@
<script lang="ts"> <script lang="ts">
import { Keys } from "$lib/utils/keyboard"; import { Keys } from "$lib/utils/keyboard";
import { State } from "$lib/internal/open-closed"; import { State, useOpenClosed } from "$lib/internal/open-closed";
import { import {
getFocusableElements, getFocusableElements,
Focus, Focus,
@@ -19,7 +19,6 @@
focusIn, focusIn,
} from "$lib/utils/focus-management"; } from "$lib/utils/focus-management";
import { getContext, setContext } from "svelte"; import { getContext, setContext } from "svelte";
import type { Writable } from "svelte/store";
import { import {
PopoverStates, PopoverStates,
StateDefinition, StateDefinition,
@@ -33,7 +32,7 @@
let api = usePopoverContext("PopoverPanel"); let api = usePopoverContext("PopoverPanel");
setContext(POPOVER_PANEL_CONTEXT_NAME, $api.panelId); setContext(POPOVER_PANEL_CONTEXT_NAME, $api.panelId);
let openClosedState: Writable<State> | undefined = getContext("OpenClosed"); let openClosedState = useOpenClosed();
$: visible = $: visible =
openClosedState !== undefined openClosedState !== undefined

4
src/lib/components/transitions/TransitionChild.svelte
View File

@@ -2,7 +2,7 @@
import { createEventDispatcher, onMount, setContext } from "svelte"; import { createEventDispatcher, onMount, setContext } from "svelte";
import { writable, Writable } from "svelte/store"; import { writable, Writable } from "svelte/store";
import { match } from "$lib/utils/match"; import { match } from "$lib/utils/match";
import { State } from "$lib/internal/open-closed"; import { State, useOpenClosedProvider } from "$lib/internal/open-closed";
import { Reason, transition } from "$lib/utils/transition"; import { Reason, transition } from "$lib/utils/transition";
import { import {
@@ -151,7 +151,7 @@
setContext(NESTING_CONTEXT_NAME, nesting); setContext(NESTING_CONTEXT_NAME, nesting);
let openClosedState: Writable<State> = writable(State.Closed); let openClosedState: Writable<State> = writable(State.Closed);
setContext("OpenClosed", openClosedState); useOpenClosedProvider(openClosedState);
$: openClosedState.set( $: openClosedState.set(
match(state, { match(state, {

6
src/lib/components/transitions/TransitionRoot.svelte
View File

@@ -103,11 +103,11 @@
</script> </script>
<script lang="ts"> <script lang="ts">
import { getContext, onDestroy, onMount, setContext } from "svelte"; import { getContext, onMount, setContext } from "svelte";
import { writable, Writable } from "svelte/store"; import { writable, Writable } from "svelte/store";
import { match } from "$lib/utils/match"; import { match } from "$lib/utils/match";
import { State } from "$lib/internal/open-closed"; import { State, useOpenClosed } from "$lib/internal/open-closed";
import { RenderStrategy } from "$lib/utils/Render.svelte"; import { RenderStrategy } from "$lib/utils/Render.svelte";
import TransitionChild from "./TransitionChild.svelte"; import TransitionChild from "./TransitionChild.svelte";
import type { useId } from "$lib/hooks/use-id"; import type { useId } from "$lib/hooks/use-id";
@@ -116,7 +116,7 @@
export let unmount = true; export let unmount = true;
export let appear = false; export let appear = false;
let openClosedState: Writable<State> | undefined = getContext("OpenClosed"); let openClosedState = useOpenClosed();
function computeShow( function computeShow(
show: boolean | undefined, show: boolean | undefined,