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

View File

@@ -120,23 +120,36 @@
let openClosedState: Writable<State> | undefined = getContext("OpenClosed");
$: shouldShow = (() => {
function computeShow(
show: boolean,
openClosedState: State | undefined
): boolean {
if (show === null && openClosedState !== undefined) {
return match($openClosedState, {
return match(openClosedState, {
[State.Open]: true,
[State.Closed]: false,
});
}
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();
nestingBag.set(