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

A couple fixes to Dialog

Browse Source 
Quickfix for SSR
Let it take open from OpenClose context properly
This commit is contained in:
Ryan Gossiaux
2021-12-14 22:54:06 -08:00
parent 47c6918fd2
commit df96d74003
1 changed files with 24 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,6 +5,7 @@
createEventDispatcher, createEventDispatcher,
tick, tick,
onDestroy, onDestroy,
onMount,
} from "svelte"; } from "svelte";
export enum DialogStates { export enum DialogStates {
Open, Open,
@@ -62,27 +63,29 @@
let containers: Set<HTMLElement> = new Set(); let containers: Set<HTMLElement> = new Set();
let openClosedState: Writable<State> | undefined = getContext("OpenClosed"); let openClosedState: Writable<State> | undefined = getContext("OpenClosed");
$: open = $: {
open === undefined && openClosedState !== undefined open =
? match($openClosedState, { open === undefined && openClosedState !== undefined
[State.Open]: true, ? match($openClosedState, {
[State.Closed]: false, [State.Open]: true,
}) [State.Closed]: false,
: open; })
: open;
// Validations // Validations
let hasOpen = open !== undefined || openClosedState !== null; let hasOpen = open !== undefined || openClosedState !== null;
if (!hasOpen) { if (!hasOpen) {
throw new Error( throw new Error(
`You forgot to provide an \`open\` prop to the \`Dialog\`.` `You forgot to provide an \`open\` prop to the \`Dialog\`.`
); );
} }
if (typeof open !== "boolean") { if (typeof open !== "boolean") {
throw new Error( throw new Error(
`You provided an \`open\` prop to the \`Dialog\`, but the value is not a boolean. Received: ${open}` `You provided an \`open\` prop to the \`Dialog\`, but the value is not a boolean. Received: ${open}`
); );
}
} }
$: dialogState = open ? DialogStates.Open : DialogStates.Closed; $: dialogState = open ? DialogStates.Open : DialogStates.Closed;
@@ -148,11 +151,14 @@
$api.close(); $api.close();
} }
let mounted = false;
onMount(() => (mounted = true));
$: _cleanupScrollLock = (() => { $: _cleanupScrollLock = (() => {
if (_cleanupScrollLock) { if (_cleanupScrollLock) {
_cleanupScrollLock(); _cleanupScrollLock();
} }
if (dialogState !== DialogStates.Open) return; if (dialogState !== DialogStates.Open) return;
if (!mounted) return;
let overflow = document.documentElement.style.overflow; let overflow = document.documentElement.style.overflow;
let paddingRight = document.documentElement.style.paddingRight; let paddingRight = document.documentElement.style.paddingRight;