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',
wp: 'item-divider.wp.scss'
},
shadow: false,
host: {
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')
protected radioToggle(ev: RadioEvent) {
protected radioDidToggle(ev: RadioEvent) {
const radio = ev.detail.radio;
// 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;
/**
* @output {EventEmitter} Emitted when the radio checked property is changed.
*/
@Event() ionRadioCheckedDidChange: EventEmitter;
/**
* @output {EventEmitter} Emitted when the styles of the radio change.
*/
@ -111,6 +116,7 @@ export class Radio {
@PropDidChange('checked')
checkedChanged(val: boolean) {
this.ionRadioCheckedDidChange.emit({ radio: this });
this.ionSelect.emit({ checked: val });
this.emitStyle();
}

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

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