Also fix label/description context usage

This commit is contained in:
Ryan Gossiaux
2021-12-15 10:31:14 -08:00
parent dbfb2c227e
commit 543c1263e3
5 changed files with 27 additions and 20 deletions

View File

@@ -1,12 +1,9 @@
<script lang="ts">
import { useId } from "$lib/hooks/use-id";
import { getContext, onMount } from "svelte";
import type { Writable } from "svelte/store";
import type { DescriptionContext } from "./DescriptionProvider.svelte";
import { onMount } from "svelte";
import { useDescriptionContext } from "./DescriptionProvider.svelte";
const id = `headlessui-description-${useId()}`;
let contextStore: Writable<DescriptionContext> | undefined = getContext(
"headlessui-description-context"
);
let contextStore = useDescriptionContext();
if (!contextStore) {
throw new Error(
"You used a <Description /> component, but it is not inside a relevant parent."

View File

@@ -5,10 +5,17 @@
register: (value: string) => void;
descriptionIds?: string;
}
const DESCRIPTION_CONTEXT_NAME = "DescriptionContext";
export function useDescriptionContext():
| Writable<DescriptionContext>
| undefined {
return getContext(DESCRIPTION_CONTEXT_NAME);
}
</script>
<script lang="ts">
import { setContext } from "svelte";
import { getContext, setContext } from "svelte";
import { writable, Writable } from "svelte/store";
export let name: string;
let descriptionIds = [];
@@ -17,7 +24,7 @@
register,
props: $$restProps,
});
setContext("headlessui-description-context", contextStore);
setContext(DESCRIPTION_CONTEXT_NAME, contextStore);
$: contextStore.set({
name,

View File

@@ -1,13 +1,10 @@
<script lang="ts">
import { useId } from "$lib/hooks/use-id";
import { getContext, onMount } from "svelte";
import type { Writable } from "svelte/store";
import type { LabelContext } from "./LabelProvider.svelte";
import { onMount } from "svelte";
import { useLabelContext } from "./LabelProvider.svelte";
const id = `headlessui-label-${useId()}`;
export let passive = false;
let contextStore: Writable<LabelContext> | undefined = getContext(
"headlessui-label-context"
);
let contextStore = useLabelContext();
if (!contextStore) {
throw new Error(
"You used a <Label /> component, but it is not inside a relevant parent."

View File

@@ -5,10 +5,15 @@
register: (value: string) => void;
labelIds?: string;
}
const LABEL_CONTEXT_NAME = "LabelContext";
export function useLabelContext(): Writable<LabelContext> | undefined {
return getContext(LABEL_CONTEXT_NAME);
}
</script>
<script lang="ts">
import { setContext } from "svelte";
import { getContext, setContext } from "svelte";
import { writable, Writable } from "svelte/store";
export let name: string;
let labelIds = [];
@@ -17,7 +22,7 @@
register,
props: $$restProps,
});
setContext("headlessui-label-context", contextStore);
setContext(LABEL_CONTEXT_NAME, contextStore);
$: contextStore.set({
name,

View File

@@ -1,7 +1,10 @@
<script lang="ts">
import { useSwitchContext } from "./SwitchGroup.svelte";
import type { LabelContext } from "$lib/components/label/LabelProvider.svelte";
import type { DescriptionContext } from "$lib/components/description/DescriptionProvider.svelte";
import {
DescriptionContext,
useDescriptionContext,
} from "$lib/components/description/DescriptionProvider.svelte";
import { useId } from "$lib/hooks/use-id";
import { Keys } from "$lib/utils/keyboard";
import { getContext, createEventDispatcher } from "svelte";
@@ -13,9 +16,7 @@
let labelContext: Writable<LabelContext> | undefined = getContext(
"headlessui-label-context"
);
let descriptionContext: Writable<DescriptionContext> | undefined = getContext(
"headlessui-description-context"
);
let descriptionContext = useDescriptionContext();
let id = `headlessui-switch-${useId()}`;
$: switchStore = $api?.switchStore;
let internalSwitchRef = null;