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 ### Forwarded events
No forwarded events. - `on:click`
- `on:keydown`
### Dispatched events ### Dispatched events

45
docs/src/PUBLIC_API.json
View file

@ -1966,8 +1966,8 @@
[ [
"keydown", "keydown",
{ {
"start": 5616, "start": 5618,
"end": 5626, "end": 5628,
"type": "EventHandler", "type": "EventHandler",
"name": "keydown", "name": "keydown",
"modifiers": [], "modifiers": [],
@ -1977,8 +1977,8 @@
[ [
"focus", "focus",
{ {
"start": 6203, "start": 6205,
"end": 6211, "end": 6213,
"type": "EventHandler", "type": "EventHandler",
"name": "focus", "name": "focus",
"modifiers": [], "modifiers": [],
@ -1988,8 +1988,8 @@
[ [
"blur", "blur",
{ {
"start": 6220, "start": 6222,
"end": 6227, "end": 6229,
"type": "EventHandler", "type": "EventHandler",
"name": "blur", "name": "blur",
"modifiers": [], "modifiers": [],
@ -1999,8 +1999,8 @@
[ [
"clear", "clear",
{ {
"start": 6678, "start": 6680,
"end": 6686, "end": 6688,
"type": "EventHandler", "type": "EventHandler",
"name": "clear", "name": "clear",
"modifiers": [], "modifiers": [],
@ -2010,8 +2010,8 @@
[ [
"scroll", "scroll",
{ {
"start": 7220, "start": 7246,
"end": 7229, "end": 7255,
"type": "EventHandler", "type": "EventHandler",
"name": "scroll", "name": "scroll",
"modifiers": [], "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": [] "dispatched_events": []
}, },
"ToolbarSearch": { "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> <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 Launch16 from "carbon-icons-svelte/lib/Launch16";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
@ -316,7 +316,12 @@ The slot name for the table header cells is `"cell-header"`.
<Toolbar> <Toolbar>
<ToolbarContent> <ToolbarContent>
<ToolbarSearch /> <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> </ToolbarContent>
</Toolbar> </Toolbar>
</DataTable> </DataTable>
@ -378,7 +383,12 @@ The slot name for the table header cells is `"cell-header"`.
<Toolbar size="sm"> <Toolbar size="sm">
<ToolbarContent> <ToolbarContent>
<ToolbarSearch /> <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> </ToolbarContent>
</Toolbar> </Toolbar>
</DataTable> </DataTable>

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

@ -4,6 +4,8 @@
Toolbar, Toolbar,
ToolbarContent, ToolbarContent,
ToolbarSearch, ToolbarSearch,
ToolbarMenu,
ToolbarMenuItem,
ToolbarBatchActions, ToolbarBatchActions,
Button, Button,
} from "carbon-components-svelte"; } from "carbon-components-svelte";
@ -36,7 +38,14 @@
</ToolbarBatchActions> </ToolbarBatchActions>
<ToolbarContent> <ToolbarContent>
<ToolbarSearch /> <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> </ToolbarContent>
</Toolbar> </Toolbar>
</DataTable> </DataTable>

15
src/DataTable/Toolbar.svelte
View file

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

22
src/DataTable/ToolbarBatchActions.svelte
View file

@ -18,14 +18,27 @@
batchSelectedIds = value; batchSelectedIds = value;
}); });
onMount(() => unsubscribe); let overflowVisible = false;
const ctxToolbar = getContext("Toolbar");
const unsubscribeOverflow = ctxToolbar.overflowVisible.subscribe((value) => {
overflowVisible = value;
});
onMount(() => {
return () => {
unsubscribe();
unsubscribeOverflow();
};
});
</script> </script>
<div {#if !overflowVisible}
<div
class:bx--batch-actions="{true}" class:bx--batch-actions="{true}"
class:bx--batch-actions--active="{showActions}" class:bx--batch-actions--active="{showActions}"
{...$$restProps} {...$$restProps}
> >
<div class:bx--batch-summary="{true}"> <div class:bx--batch-summary="{true}">
<p class:bx--batch-summary__para="{true}"> <p class:bx--batch-summary__para="{true}">
<span> {formatTotalSelected(batchSelectedIds.length)} </span> <span> {formatTotalSelected(batchSelectedIds.length)} </span>
@ -41,4 +54,5 @@
Cancel Cancel
</Button> </Button>
</div> </div>
</div> </div>
{/if}

2
src/DataTable/ToolbarMenu.svelte
View file

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

2
src/DataTable/ToolbarMenuItem.svelte
View file

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