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

refactor(radio-button-group): change defaultSelected to selected

Browse source
This commit is contained in:
Eric Liu 2019-12-31 16:22:40 -08:00
commit d4abc1dfd3
3 changed files with 17 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/RadioButton/RadioButton.svelte
View file

@ -1,15 +1,15 @@
<script> <script>
let className = undefined; let className = undefined;
export { className as class }; export { className as class };
export let value = '';
export let checked = false; export let checked = false;
export let disabled = false; export let disabled = false;
export let id = Math.random();
export let labelText = '';
export let hideLabel = false; export let hideLabel = false;
export let id = Math.random();
export let labelPosition = 'right'; export let labelPosition = 'right';
export let labelText = '';
export let name = ''; export let name = '';
export let style = undefined; export let style = undefined;
export let value = '';
import { getContext } from 'svelte'; import { getContext } from 'svelte';
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
@ -17,13 +17,13 @@
const ctx = getContext('RadioButtonGroup'); const ctx = getContext('RadioButtonGroup');
let selected = ctx ? ctx.selected : writable(checked ? value : undefined); let selectedValue = ctx ? ctx.selectedValue : writable(checked ? value : undefined);
if (ctx) { if (ctx) {
ctx.add({ id, checked, disabled, value }); ctx.add({ id, checked, disabled, value });
} }
$: checked = $selected === value; $: checked = $selectedValue === value;
</script> </script>
<div <div

4
src/components/RadioButtonGroup/RadioButtonGroup.Story.svelte
View file

@ -3,11 +3,13 @@
import RadioButtonGroup from './RadioButtonGroup.svelte'; import RadioButtonGroup from './RadioButtonGroup.svelte';
import RadioButton from '../RadioButton'; import RadioButton from '../RadioButton';
import FormGroup from '../FormGroup'; import FormGroup from '../FormGroup';
let selected = 'default-selected';
</script> </script>
<Layout> <Layout>
<FormGroup legendText="Radio Button heading"> <FormGroup legendText="Radio Button heading">
<RadioButtonGroup {...$$props.group} defaultSelected="default-selected" legend="Group Legend"> <RadioButtonGroup {...$$props.group} legend="Group Legend" bind:selected>
<RadioButton {...$$props.radio} value="standard" id="radio-1" /> <RadioButton {...$$props.radio} value="standard" id="radio-1" />
<RadioButton {...$$props.radio} value="default-selected" id="radio-2" /> <RadioButton {...$$props.radio} value="default-selected" id="radio-2" />
<RadioButton {...$$props.radio} value="disabled" id="radio-3" /> <RadioButton {...$$props.radio} value="disabled" id="radio-3" />

18
src/components/RadioButtonGroup/RadioButtonGroup.svelte
View file

@ -1,10 +1,10 @@
<script> <script>
let className = undefined; let className = undefined;
export { className as class }; export { className as class };
export let orientation = 'horizontal'; export let selected = undefined;
export let labelPosition = 'right';
export let defaultSelected = undefined;
export let disabled = false; export let disabled = false;
export let labelPosition = 'right';
export let orientation = 'horizontal';
export let style = undefined; export let style = undefined;
import { createEventDispatcher, setContext } from 'svelte'; import { createEventDispatcher, setContext } from 'svelte';
@ -13,23 +13,23 @@
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
let selected = writable(defaultSelected); let selectedValue = writable(selected);
setContext('RadioButtonGroup', { setContext('RadioButtonGroup', {
selected, selectedValue,
add: ({ checked, value }) => { add: ({ checked, value }) => {
if (checked) { if (checked) {
selected.set(value); selectedValue.set(value);
} }
}, },
update: value => { update: value => {
selected.set(value); selectedValue.set(value);
} }
}); });
$: selected = $selectedValue;
$: { $: {
defaultSelected = $selected; dispatch('change', $selectedValue);
dispatch('change', $selected);
} }
</script> </script>