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

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

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