javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 11:17:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(radio): uncheck other radios when checked via attr

Browse Source
This commit is contained in:
Brandy Carney
2017-09-15 14:28:00 -04:00
parent 08e12b580c
commit 7223caffce
5 changed files with 43 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/core/src/components/item-divider/item-divider.tsx
View File

@ -8,7 +8,6 @@ import { Component } from '@stencil/core';
md: 'item-divider.md.scss', md: 'item-divider.md.scss',
wp: 'item-divider.wp.scss' wp: 'item-divider.wp.scss'
}, },
shadow: false,
host: { host: {
theme: 'item item-divider' theme: 'item item-divider'
} }

13
packages/core/src/components/radio/radio-group.tsx
View File

@ -110,8 +110,19 @@ export class RadioGroup {
} }
} }
@Listen('ionRadioCheckedDidChange')
protected radioCheckedDidChange(ev: RadioEvent) {
const radio = ev.detail.radio;
// TODO shouldn't be able to set radio checked to false
// if allowEmptySelection is false
if (radio.checked && this.value !== radio.value) {
this.value = radio.checked ? radio.value : '';
}
}
@Listen('ionRadioDidToggle') @Listen('ionRadioDidToggle')
protected radioToggle(ev: RadioEvent) { protected radioDidToggle(ev: RadioEvent) {
const radio = ev.detail.radio; const radio = ev.detail.radio;
// If the group does not allow empty selection then checked // If the group does not allow empty selection then checked

6
packages/core/src/components/radio/radio.tsx
View File

@ -76,6 +76,11 @@ export class Radio {
*/ */
@Event() ionRadioDidToggle: EventEmitter; @Event() ionRadioDidToggle: EventEmitter;
/**
* @output {EventEmitter} Emitted when the radio checked property is changed.
*/
@Event() ionRadioCheckedDidChange: EventEmitter;
/** /**
* @output {EventEmitter} Emitted when the styles of the radio change. * @output {EventEmitter} Emitted when the styles of the radio change.
*/ */
@ -111,6 +116,7 @@ export class Radio {
@PropDidChange('checked') @PropDidChange('checked')
checkedChanged(val: boolean) { checkedChanged(val: boolean) {
this.ionRadioCheckedDidChange.emit({ radio: this });
this.ionSelect.emit({ checked: val }); this.ionSelect.emit({ checked: val });
this.emitStyle(); this.emitStyle();
} }

58
packages/core/src/components/radio/test/basic.html
View File

@ -14,11 +14,11 @@
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content class="radio-test outer-content"> <ion-content class="radio-test outer-content">
<ion-radio-group id="fruitRadio"> <ion-list>
<ion-list> <ion-radio-group id="fruitRadio">
<ion-list-header> <ion-item-divider>
Fruits (Group w/ values) <ion-label>Fruits (Group w/ values)</ion-label>
</ion-list-header> </ion-item-divider>
<ion-item> <ion-item>
<ion-label>Apple</ion-label> <ion-label>Apple</ion-label>
<ion-radio slot="start" value="apple"></ion-radio> <ion-radio slot="start" value="apple"></ion-radio>
@ -33,36 +33,27 @@
<ion-label>Cherry</ion-label> <ion-label>Cherry</ion-label>
<ion-radio slot="start" color="danger" value="cherry"></ion-radio> <ion-radio slot="start" color="danger" value="cherry"></ion-radio>
</ion-item> </ion-item>
</ion-list> </ion-radio-group>
</ion-radio-group>
<ion-radio-group id="pizzaRadio"> <ion-radio-group id="pizzaRadio">
<ion-list> <ion-item-divider>
<ion-list-header> <ion-label>Extra Pizza Topping (Group w/ no values)</ion-label>
Extra Pizza Topping (Group w/ no values) </ion-item-divider>
</ion-list-header>
<ion-item> <ion-item>
<ion-label>Pepperoni</ion-label> <ion-label>Pepperoni</ion-label>
<ion-radio slot="end" name="pepperoni" checked></ion-radio> <ion-radio slot="end" name="pepperoni" checked></ion-radio>
</ion-item> </ion-item>
<ion-item>
<ion-label>Pineapple</ion-label>
<ion-radio slot="end" name="pineapple"></ion-radio>
</ion-item>
<ion-item> <ion-item>
<ion-label>Sausage</ion-label> <ion-label>Sausage</ion-label>
<ion-radio slot="end" color="danger" name="sausage"></ion-radio> <ion-radio slot="end" color="danger" name="sausage"></ion-radio>
</ion-item> </ion-item>
</ion-list> </ion-radio-group>
</ion-radio-group>
<ion-radio-group id="veggiesRadio" allow-empty-selection> <ion-radio-group id="veggiesRadio" allow-empty-selection>
<ion-list> <ion-item-divider>
<ion-list-header> <ion-label>Veggies (Group w/ allow empty)</ion-label>
Veggies (Group w/ allow empty) </ion-item-divider>
</ion-list-header>
<ion-item> <ion-item>
<ion-label>Carrot</ion-label> <ion-label>Carrot</ion-label>
<ion-radio slot="end" value="carrot"></ion-radio> <ion-radio slot="end" value="carrot"></ion-radio>
@ -77,14 +68,14 @@
<ion-label>Broccoli</ion-label> <ion-label>Broccoli</ion-label>
<ion-radio slot="end" color="danger" value="broccoli" checked></ion-radio> <ion-radio slot="end" color="danger" value="broccoli" checked></ion-radio>
</ion-item> </ion-item>
</ion-list> </ion-radio-group>
</ion-radio-group>
<p aria-hidden="true" text-center> <ion-item>
<ion-button onClick="toggleBoolean('grapeChecked', 'checked')" outline small>Grape Checked</ion-button> <ion-button onClick="toggleBoolean('grapeChecked', 'checked')" outline small>Grape Checked</ion-button>
<ion-button onClick="toggleBoolean('grapeChecked', 'disabled')" outline small>Grape Disabled</ion-button> <ion-button onClick="toggleBoolean('grapeChecked', 'disabled')" outline small>Grape Disabled</ion-button>
<ion-button onClick="printRadioValues()" outline small>Print Values</ion-button> <ion-button onClick="printRadioValues()" outline small>Print Values</ion-button>
</p> </ion-item>
</ion-list>
<pre id="valuesCode"></pre> <pre id="valuesCode"></pre>
@ -164,13 +155,11 @@
} }
function toggleBoolean(id, prop) { function toggleBoolean(id, prop) {
console.log('toggleBoolean', id);
var ele = document.getElementById(id); var ele = document.getElementById(id);
console.log('toggleBoolean', ele);
var isTrue = ele[prop] ? false : true; var isTrue = ele[prop] ? false : true;
ele[prop] = isTrue; ele[prop] = isTrue;
console.log('in toggleBoolean, setting', prop, 'to', isTrue); console.debug('in toggleBoolean, setting', prop, 'to', isTrue);
} }
</script> </script>
@ -179,6 +168,7 @@
background: #f6f6f6; background: #f6f6f6;
border: 1px solid #ddd; border: 1px solid #ddd;
padding: 15px 10px; padding: 15px 10px;
margin-top: -20px;
} }
</style> </style>

2
packages/ionic-angular/BREAKING.md
View File

@ -274,7 +274,7 @@ Item should now be written as an `<ion-item>` element. Ionic will determine when
### Label Required ### Label Required
Previously an `ion-label` would automatically get added to an `ion-item` if one wasn't provided. Now an `ion-label` should always be added if the item is used to display text. Previously an `ion-label` would automatically get added to an `ion-item`, `ion-item-divider` and `ion-list-header` if one wasn't provided. Now an `ion-label` should always be added if the component is used to display text.
```html ```html
<ion-item> <ion-item>