mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

refactor(composed-modal): use onMount, afterUpdate methods

Browse source
This commit is contained in:
Eric Liu 2019-12-25 07:19:51 -08:00
commit 3f03a1c259
1 changed files with 16 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/components/ComposedModal/ComposedModal.svelte
View file

@ -8,7 +8,7 @@
export let size = undefined;
export let style = undefined;
import { createEventDispatcher, setContext, onDestroy } from 'svelte';
import { createEventDispatcher, tick, setContext, onMount, afterUpdate } from 'svelte';
import { writable } from 'svelte/store';
import { cx } from '../../lib';
@ -30,10 +30,6 @@
}
});
onDestroy(() => {
document.body.classList.remove(cx('--body--with-modal-open'));
});
function focus(element) {
if (element.querySelector(selectorPrimaryFocus)) {
return focusElement.focus();
@ -44,10 +40,18 @@
}
}
$: didOpen = open;
$: {
if (innerModal) {
focus(innerModal);
onMount(async () => {
await tick();
focus(innerModal);
return () => {
document.body.classList.remove(cx('--body--with-modal-open'));
};
});
afterUpdate(() => {
if (!didOpen) {
focus(outerModal);
}
if (open) {
@ -56,7 +60,9 @@
dispatch('close');
document.body.classList.remove(cx('--body--with-modal-open'));
}
}
});
$: didOpen = open;
</script>
<div
@ -76,7 +82,6 @@
on:transitionend
on:transitionend={() => {
if (didOpen) {
focus(outerModal);
didOpen = false;
}
}}