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

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

3
COMPONENT_INDEX.md
View file

@ -5372,7 +5372,8 @@ No exported props.
### Forwarded events
No forwarded events.
- `on:click`
- `on:keydown`
### Dispatched events

45
docs/src/PUBLIC_API.json
View file

@ -1966,8 +1966,8 @@
[
"keydown",
{
"start": 5616,
"end": 5626,
"start": 5618,
"end": 5628,
"type": "EventHandler",
"name": "keydown",
"modifiers": [],
@ -1977,8 +1977,8 @@
[
"focus",
{
"start": 6203,
"end": 6211,
"start": 6205,
"end": 6213,
"type": "EventHandler",
"name": "focus",
"modifiers": [],
@ -1988,8 +1988,8 @@
[
"blur",
{
"start": 6220,
"end": 6227,
"start": 6222,
"end": 6229,
"type": "EventHandler",
"name": "blur",
"modifiers": [],
@ -1999,8 +1999,8 @@
[
"clear",
{
"start": 6678,
"end": 6686,
"start": 6680,
"end": 6688,
"type": "EventHandler",
"name": "clear",
"modifiers": [],
@ -2010,8 +2010,8 @@
[
"scroll",
{
"start": 7220,
"end": 7229,
"start": 7246,
"end": 7255,
"type": "EventHandler",
"name": "scroll",
"modifiers": [],
@ -15644,7 +15644,30 @@
}
]
],
"forwarded_events": [],
"forwarded_events": [
[
"click",
{
"start": 109,
"end": 117,
"type": "EventHandler",
"name": "click",
"modifiers": [],
"expression": null
}
],
[
"keydown",
{
"start": 118,
"end": 128,
"type": "EventHandler",
"name": "keydown",
"modifiers": [],
"expression": null
}
]
],
"dispatched_events": []
},
"ToolbarSearch": {

18
docs/src/pages/components/DataTable.svx
View file

@ -1,9 +1,9 @@
---
components: ["DataTable", "Toolbar", "ToolbarContent", "ToolbarSearch", "ToolbarBatchActions"]
components: ["DataTable", "Toolbar", "ToolbarContent", "ToolbarSearch", "ToolbarMenu", "ToolbarMenuItem", "ToolbarBatchActions"]
---
<script>
import { DataTable, DataTableSkeleton, Toolbar, ToolbarContent, ToolbarSearch, Button, Link } from "carbon-components-svelte";
import { DataTable, DataTableSkeleton, Toolbar, ToolbarContent, ToolbarSearch, ToolbarMenu, ToolbarMenuItem, Button, Link } from "carbon-components-svelte";
import Launch16 from "carbon-icons-svelte/lib/Launch16";
import Preview from "../../components/Preview.svelte";
</script>
@ -316,7 +316,12 @@ The slot name for the table header cells is `"cell-header"`.
<Toolbar>
<ToolbarContent>
<ToolbarSearch />
<Button>Create</Button>
<ToolbarMenu>
<ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem>
<ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service">API Documentation</ToolbarMenuItem>
<ToolbarMenuItem danger>Stop all</ToolbarMenuItem>
</ToolbarMenu>
<Button>Create balancer</Button>
</ToolbarContent>
</Toolbar>
</DataTable>
@ -378,7 +383,12 @@ The slot name for the table header cells is `"cell-header"`.
<Toolbar size="sm">
<ToolbarContent>
<ToolbarSearch />
<Button>Create</Button>
<ToolbarMenu>
<ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem>
<ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service">API Documentation</ToolbarMenuItem>
<ToolbarMenuItem danger>Stop all</ToolbarMenuItem>
</ToolbarMenu>
<Button>Create balancer</Button>
</ToolbarContent>
</Toolbar>
</DataTable>

11
docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbar.svelte
View file

@ -4,6 +4,8 @@
Toolbar,
ToolbarContent,
ToolbarSearch,
ToolbarMenu,
ToolbarMenuItem,
ToolbarBatchActions,
Button,
} from "carbon-components-svelte";
@ -36,7 +38,14 @@
</ToolbarBatchActions>
<ToolbarContent>
<ToolbarSearch />
<Button>Create</Button>
<ToolbarMenu>
<ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem>
<ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service">
API Documentation
</ToolbarMenuItem>
<ToolbarMenuItem danger>Stop all</ToolbarMenuItem>
</ToolbarMenu>
<Button>Create balancer</Button>
</ToolbarContent>
</Toolbar>
</DataTable>

15
src/DataTable/Toolbar.svelte
View file

@ -6,18 +6,17 @@
export let size = "default";
import { setContext } from "svelte";
import { writable } from "svelte/store";
let ref = null;
const overflowVisible = writable(false);
setContext("Toolbar", {
setOverflow: (toggled) => {
if (ref) {
if (toggled) {
ref.style.overflow = "visible";
} else {
ref.removeAttribute("style");
}
}
overflowVisible,
setOverflowVisible: (visible) => {
overflowVisible.set(visible);
if (ref) ref.style.overflow = visible ? "visible" : "inherit";
},
});
</script>

22
src/DataTable/ToolbarBatchActions.svelte
View file

@ -18,14 +18,27 @@
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
{#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>
@ -41,4 +54,5 @@
Cancel
</Button>
</div>
</div>
</div>
{/if}

2
src/DataTable/ToolbarMenu.svelte
View file

@ -7,7 +7,7 @@
let menuRef = null;
$: ctx.setOverflow(menuRef != null);
$: ctx.setOverflowVisible(menuRef != null);
$: if (menuRef) menuRef.style.top = "100%";
</script>

2
src/DataTable/ToolbarMenuItem.svelte
View file

@ -2,6 +2,6 @@
import { OverflowMenuItem } from "../OverflowMenu";
</script>
<OverflowMenuItem {...$$restProps}>
<OverflowMenuItem {...$$restProps} on:click on:keydown>
<slot />
</OverflowMenuItem>