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

try to fix reactivity

Browse source
This commit is contained in:
Richard O'flynn 2020-12-10 18:27:50 +00:00
commit 3b1efdd0e6
2 changed files with 8 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

9
docs/src/pages/framed/SelectableTile/SelectableTileReactive.svelte
View file

@ -7,7 +7,8 @@
let selectedValues = ["1"]; let selectedValues = ["1"];
let selectedValues2 = []; let selectedValues2 = [];
let selectedValues3 = [ let selectedValues3 = [];
let selectedValues3_control = [
{ value: "1", selected: true }, { value: "1", selected: true },
{ value: "2", selected: false }, { value: "2", selected: false },
{ value: "3", selected: false }, { value: "3", selected: false },
@ -64,7 +65,7 @@
selectedValues="{selectedValues3}" selectedValues="{selectedValues3}"
legend="Select the options you require" legend="Select the options you require"
> >
{#each selectedValues3 as item} {#each selectedValues3_control as item}
<SelectableTile value="{item.value}" bind:selected="{item.selected}"> <SelectableTile value="{item.value}" bind:selected="{item.selected}">
{item.value} {item.value}
</SelectableTile> </SelectableTile>
@ -72,11 +73,11 @@
</SelectableTileGroup> </SelectableTileGroup>
<div> <div>
{selectedValues3.map((item) => item.value).join(', ')} {selectedValues3.join(', ')}
<Button <Button
on:click="{() => { on:click="{() => {
selectedValues3 = selectedValues3.map((item) => { selectedValues3_control = selectedValues3.map((item) => {
return { ...item, selected: false }; return { ...item, selected: false };
}); });
}}" }}"

12
src/Tile/SelectableTileGroup.svelte
View file

@ -18,15 +18,9 @@
import { writable } from "svelte/store"; import { writable } from "svelte/store";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const _selectedValues = writable( const _selectedValues = writable([]);
selectedValues.map((s) => (s.value ? s.value : s))
);
$: _selectedValues.set( $: _selectedValues.set(selectedValues);
selectedValues
.filter((s) => (s.value ? s.selected : true))
.map((s) => (s.value ? s.value : s))
);
setContext("SelectableTileGroup", { setContext("SelectableTileGroup", {
_light: light, _light: light,
@ -40,7 +34,7 @@
}), }),
}); });
$: selectedValues = $_selectedValues; $: selectedValues = $_selectedValues.map();
$: dispatch("select", $_selectedValues); $: dispatch("select", $_selectedValues);
</script> </script>