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

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

View file

@ -3,11 +3,13 @@
import RadioButtonGroup from './RadioButtonGroup.svelte';
import RadioButton from '../RadioButton';
import FormGroup from '../FormGroup';
let selected = 'default-selected';
</script>
<Layout>
<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="default-selected" id="radio-2" />
<RadioButton {...$$props.radio} value="disabled" id="radio-3" />

View file

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