Fix transitioning away

Fixes #17

The root problem here, which took me ages to find, was that `state` should not be reactive. It should only be set once the child has finished, via the nesting context.
This commit is contained in:
Ryan Gossiaux
2021-12-14 22:56:55 -08:00
parent 20e5360291
commit f1edb17609
2 changed files with 35 additions and 18 deletions

View File

@@ -140,15 +140,17 @@
} }
let _cleanup = null; let _cleanup = null;
$: if (mounted) { $: {
if (_cleanup) { if (mounted) {
_cleanup(); if (_cleanup) {
_cleanup();
}
_cleanup = executeTransition(
$transitionContext.show,
$transitionContext.appear
);
initial = false;
} }
_cleanup = executeTransition(
$transitionContext.show,
$transitionContext.appear
);
initial = false;
} }
setContext(NESTING_CONTEXT_NAME, nesting); setContext(NESTING_CONTEXT_NAME, nesting);
@@ -164,5 +166,7 @@
</script> </script>
<div bind:this={container} {...$$restProps}> <div bind:this={container} {...$$restProps}>
<slot /> {#if state === TreeStates.Visible}
<slot />
{/if}
</div> </div>

View File

@@ -120,23 +120,36 @@
let openClosedState: Writable<State> | undefined = getContext("OpenClosed"); let openClosedState: Writable<State> | undefined = getContext("OpenClosed");
$: shouldShow = (() => { function computeShow(
show: boolean,
openClosedState: State | undefined
): boolean {
if (show === null && openClosedState !== undefined) { if (show === null && openClosedState !== undefined) {
return match($openClosedState, { return match(openClosedState, {
[State.Open]: true, [State.Open]: true,
[State.Closed]: false, [State.Closed]: false,
}); });
} }
return show; return show;
})();
$: if (shouldShow !== true && shouldShow !== false) {
throw new Error(
"A <Transition /> is used but it is missing a `show={true | false}` prop."
);
} }
$: state = shouldShow ? TreeStates.Visible : TreeStates.Hidden;
let shouldShow = computeShow(
show,
openClosedState !== undefined ? $openClosedState : undefined
);
$: {
shouldShow = computeShow(
show,
openClosedState !== undefined ? $openClosedState : undefined
);
if (shouldShow !== true && shouldShow !== false) {
throw new Error(
"A <Transition /> is used but it is missing a `show={true | false}` prop."
);
}
}
let state = shouldShow ? TreeStates.Visible : TreeStates.Hidden;
let nestingBag: Writable<NestingContextValues> = writable(); let nestingBag: Writable<NestingContextValues> = writable();
nestingBag.set( nestingBag.set(