mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

refactor(expandable-tile): use onMount, afterUpdate methods

Browse source
This commit is contained in:
Eric Liu 2019-12-25 06:10:07 -08:00
commit 41c096bada
1 changed files with 12 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/components/Tile/ExpandableTile.svelte
View file

@ -11,7 +11,7 @@
export let light = false;
export let style = undefined;
import { tick } from 'svelte';
import { onMount, afterUpdate } from 'svelte';
import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
import { cx, css } from '../../lib';
@ -19,23 +19,20 @@
let tileContent = undefined;
let aboveTheFold = undefined;
async function setHeight() {
await tick();
tileMaxHeight = expanded
? tileContent.getBoundingClientRect().height
: aboveTheFold.getBoundingClientRect().height;
}
$: {
if (tile) {
onMount(() => {
const style = window.getComputedStyle(tile);
tileMaxHeight = aboveTheFold.getBoundingClientRect().height;
tilePadding =
parseInt(style.getPropertyValue('padding-top'), 10) +
parseInt(style.getPropertyValue('padding-bottom'), 10);
}
}
});
afterUpdate(() => {
tileMaxHeight = expanded
? tileContent.getBoundingClientRect().height
: aboveTheFold.getBoundingClientRect().height;
});
</script>
<div
@ -45,14 +42,12 @@
on:click
on:click={() => {
expanded = !expanded;
setHeight();
}}
on:keypress
on:keypress={event => {
if (event.key === ' ' || event.key === 'Enter') {
event.preventDefault();
expanded = !expanded;
setHeight();
}
}}
on:mouseover