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

feat(data-table): hide batch actions if overflow visible

Browse source
This commit is contained in:
Eric Liu 2020-10-26 08:15:31 -07:00
commit a2b375f32e
8 changed files with 104 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/DataTable/ToolbarBatchActions.svelte
View file

@ -18,27 +18,41 @@
batchSelectedIds = value;
});
onMount(() => unsubscribe);
let overflowVisible = false;
const ctxToolbar = getContext("Toolbar");
const unsubscribeOverflow = ctxToolbar.overflowVisible.subscribe((value) => {
overflowVisible = value;
});
onMount(() => {
return () => {
unsubscribe();
unsubscribeOverflow();
};
});
</script>
<div
class:bx--batch-actions="{true}"
class:bx--batch-actions--active="{showActions}"
{...$$restProps}
>
<div class:bx--batch-summary="{true}">
<p class:bx--batch-summary__para="{true}">
<span> {formatTotalSelected(batchSelectedIds.length)} </span>
</p>
{#if !overflowVisible}
<div
class:bx--batch-actions="{true}"
class:bx--batch-actions--active="{showActions}"
{...$$restProps}
>
<div class:bx--batch-summary="{true}">
<p class:bx--batch-summary__para="{true}">
<span> {formatTotalSelected(batchSelectedIds.length)} </span>
</p>
</div>
<div class:bx--action-list="{true}">
<slot />
<Button
class="bx--batch-summary__cancel"
tabindex="{showActions ? '0' : '-1'}"
on:click="{ctx.resetSelectedRowIds}"
>
Cancel
</Button>
</div>
</div>
<div class:bx--action-list="{true}">
<slot />
<Button
class="bx--batch-summary__cancel"
tabindex="{showActions ? '0' : '-1'}"
on:click="{ctx.resetSelectedRowIds}"
>
Cancel
</Button>
</div>
</div>
{/if}