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): remove dispatcher, inline functions

Browse source
This commit is contained in:
Eric Liu 2019-12-24 09:38:33 -08:00
commit 4ed754c549
1 changed files with 16 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -11,16 +11,14 @@
export let light = false; export let light = false;
export let style = undefined; export let style = undefined;
import { createEventDispatcher, tick, onMount } from 'svelte'; import { tick, onMount } from 'svelte';
import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16'; import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
import { cx } from '../../lib'; import { cx, css } from '../../lib';
let tile = undefined; let tile = undefined;
let tileContent = undefined; let tileContent = undefined;
let aboveTheFold = undefined; let aboveTheFold = undefined;
const dispatch = createEventDispatcher();
onMount(() => { onMount(() => {
const tileStyle = window.getComputedStyle(tile, null); const tileStyle = window.getComputedStyle(tile, null);
tileMaxHeight = aboveTheFold.getBoundingClientRect().height; tileMaxHeight = aboveTheFold.getBoundingClientRect().height;
@ -29,47 +27,30 @@
parseInt(tileStyle.getPropertyValue('padding-bottom'), 10); parseInt(tileStyle.getPropertyValue('padding-bottom'), 10);
}); });
function setMaxHeight() { async function setHeight() {
await tick();
tileMaxHeight = expanded tileMaxHeight = expanded
? tileContent.getBoundingClientRect().height ? tileContent.getBoundingClientRect().height
: aboveTheFold.getBoundingClientRect().height; : aboveTheFold.getBoundingClientRect().height;
} }
async function handleClick(event) {
expanded = !expanded;
await tick();
setMaxHeight();
dispatch('click', event);
}
async function handleKeyPress(event) {
if (event.key === ' ' || event.key === 'Enter') {
expanded = !expanded;
await tick();
setMaxHeight();
}
dispatch('keypress', event);
}
$: _class = cx(
'--tile',
'--tile--expandable',
expanded && '--tile--is-expanded',
light && '--tile--light',
className
);
$: tileStyle = expanded ? undefined : `max-height: ${tileMaxHeight + tilePadding}px`;
</script> </script>
<div <div
bind:this={tile} bind:this={tile}
style={tileStyle} style={expanded ? undefined : `max-height: ${tileMaxHeight + tilePadding}px`}
class={_class} class={cx('--tile', '--tile--expandable', expanded && '--tile--is-expanded', light && '--tile--light', className)}
on:click on:click
on:click={handleClick} on:click={() => {
expanded = !expanded;
setHeight();
}}
on:keypress on:keypress
on:keypress={handleKeyPress} on:keypress={({ key }) => {
if (key === ' ' || key === 'Enter') {
expanded = !expanded;
setHeight();
}
}}
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave