mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(toolbar-batch-actions): active prop should be reactive (#1445)

Browse source 
Follow-up to #1440
This commit is contained in:
metonym 2022-08-14 14:55:38 -07:00 • committed by GitHub
commit b04a281939
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 37 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

8
COMPONENT_INDEX.md
View file

@ -4422,10 +4422,10 @@ None.
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------------ | :------- | :--------------- | :------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
| formatTotalSelected | No | <code>let</code> | No | <code>(totalSelected: number) => string</code> | <code>(totalSelected) => \`${totalSelected} item${totalSelected === 1 ? "" : "s"} selected\`</code> | Override the total items selected text |
| active | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to show the toolbar regardless of row selection |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------------ | :------- | :--------------- | :------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------- |
| active | No | <code>let</code> | Yes | <code>undefined &#124; boolean</code> | <code>undefined</code> | Use a boolean to show or hide the toolbar |
| formatTotalSelected | No | <code>let</code> | No | <code>(totalSelected: number) => string</code> | <code>(totalSelected) => \`${totalSelected} item${totalSelected === 1 ? "" : "s"} selected\`</code> | Override the total items selected text |
### Slots

7
docs/src/COMPONENT_API.json
View file

@ -13676,14 +13676,13 @@
{
"name": "active",
"kind": "let",
"description": "Set to `true` to show the toolbar regardless of row selection",
"type": "boolean",
"value": "false",
"description": "Use a boolean to show or hide the toolbar",
"type": "undefined | boolean",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
"reactive": true
}
],
"moduleExports": [],

35
src/DataTable/ToolbarBatchActions.svelte
View file

@ -9,22 +9,27 @@
*/
export let formatTotalSelected = (totalSelected) =>
`${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`;
/**
* Set to `true` to show the toolbar regardless of row selection
* @type {boolean}
/**
* Use a boolean to show or hide the toolbar
* @type {undefined | boolean}
*/
export let active = false;
import { onMount, getContext, createEventDispatcher } from "svelte";
export let active = undefined;
import {
onMount,
getContext,
createEventDispatcher,
afterUpdate,
} from "svelte";
import Button from "../Button/Button.svelte";
let batchSelectedIds = [];
let prevActive;
const dispatch = createEventDispatcher();
const ctx = getContext("DataTable");
function cancel() {
@ -36,6 +41,14 @@
}
$: showActions = batchSelectedIds.length > 0 || active;
$: {
if (prevActive !== active && active === false) {
showActions = false;
}
prevActive = active;
}
const unsubscribe = ctx.batchSelectedIds.subscribe((value) => {
batchSelectedIds = value;
});
@ -53,6 +66,12 @@
unsubscribeOverflow();
};
});
afterUpdate(() => {
if (active === false && showActions) {
active = true;
}
});
</script>
{#if !overflowVisible}

6
types/DataTable/ToolbarBatchActions.svelte.d.ts vendored
View file

@ -10,10 +10,10 @@ export interface ToolbarBatchActionsProps
formatTotalSelected?: (totalSelected: number) => string;
/**
* Set to `true` to show the toolbar regardless of row selection
* @default false
* Use a boolean to show or hide the toolbar
* @default undefined
*/
active?: boolean;
active?: undefined | boolean;
}
export default class ToolbarBatchActions extends SvelteComponentTyped<