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

fix(radio): set the correct value for radio and radio group

Browse Source 
also adds support for an empty selection with radio group
This commit is contained in:
Brandy Carney
2017-09-15 11:20:54 -04:00
parent 0dd53021b4
commit 08e12b580c
5 changed files with 194 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/src/components/datetime/test/basic.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<title>Ionic DateTime</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/build/ionic.js"></script>
<script src="/dist/ionic.js"></script>
</head>
<body>
<ion-app>

140
packages/core/src/components/item/item.tsx
View File

@ -1,7 +1,10 @@
import { Component, Element, HostElement, Method, Prop, Listen } from '@stencil/core';
import { CssClassMap } from '../../index';
import { Component, Element, HostElement, Listen, Method, Prop, State } from '@stencil/core';
import { createThemedClasses } from '../../utils/theme';
import { CssClassMap } from '../../index';
import { RadioEvent } from '../radio/radio';
@Component({
tag: 'ion-item',
@ -14,10 +17,14 @@ import { createThemedClasses } from '../../utils/theme';
export class Item {
private ids: number = -1;
private id: string;
private inputs: any = [];
private childStyles: CssClassMap = Object.create(null);
private label: any;
// TODO get reorder from a parent list/group
@State() reorder: boolean = false;
@Element() private el: HTMLElement;
@Prop() mode: string;
@ -42,11 +49,25 @@ export class Item {
return hasChildStyleChange;
}
// TODO? this loads after radio group
// @Listen('ionRadioDidLoad')
// protected radioDidLoad(ev: RadioEvent) {
// const radio = ev.detail.radio;
// // register the input inside of the item
// // reset to the item's id instead of the radiogroup id
// radio.id = 'rb-' + this.registerInput('radio');
// radio.labelId = 'lbl-' + this.id;
// }
@Method()
getLabelText(): string {
return this.label ? this.label.getText() : '';
}
ionViewWillLoad() {
this.id = (++itemId).toString();
}
ionViewDidLoad() {
// Add item-button classes to each ion-button in the item
const buttons = this.el.querySelectorAll('ion-button') as any;
@ -64,14 +85,22 @@ export class Item {
// }
// this.viewLabel = false;
// }
// if (this._viewLabel && this.inputs.length) {
// let labelText = this.getLabelText().trim();
// this._viewLabel = (labelText.length > 0);
// }
// if (this.inputs.length > 1) {
// this.setElementClass('item-multiple-inputs', true);
// }
}
/**
* @hidden
*/
@Method()
registerInput(type: string) {
// this.inputs.push(type);
this.inputs.push(type);
return this.id + '-' + (++this.ids);
}
@ -93,53 +122,18 @@ export class Item {
<slot></slot>
</div>
<slot name='end'></slot>
{ this.reorder
? <ion-reorder></ion-reorder>
: null
}
</div>
<div class="button-effect"></div>
</TagType>
);
// template:
// '<ng-content select="[slot="start"],ion-checkbox:not([slot="end"])"></ng-content>' +
// '<div class="item-inner">' +
// '<div class="input-wrapper">' +
// '<ng-content select="ion-label"></ng-content>' +
// '<ion-label *ngIf="_viewLabel">' +
// '<ng-content></ng-content>' +
// '</ion-label>' +
// '<ng-content select="ion-select,ion-input,ion-textarea,ion-datetime,ion-range,[item-content]"></ng-content>' +
// '</div>' +
// '<ng-content select="[slot="end"],ion-radio,ion-toggle"></ng-content>' +
// '<ion-reorder *ngIf="_hasReorder"></ion-reorder>' +
// '</div>' +
// '<div class="button-effect"></div>',
}
// _ids: number = -1;
// _inputs: Array<string> = [];
// _label: Label;
// _viewLabel: boolean = true;
// _name: string = 'item';
// _hasReorder: boolean;
// /**
// * @hidden
// */
// id: string;
// /**
// * @hidden
// */
// labelId: string = null;
// constructor(
// form: Form,
// config: Config,
// elementRef: ElementRef,
// renderer: Renderer,
// @Optional() reorder: ItemReorder
// ) {
// super(config, elementRef, renderer, 'item');
// constructor() {
// this._setName(elementRef);
// this._hasReorder = !!reorder;
// this.id = form.nextId().toString();
@ -156,48 +150,6 @@ export class Item {
// }
// }
// /**
// * @hidden
// */
// registerInput(type: string) {
// this._inputs.push(type);
// return this.id + '-' + (++this._ids);
// }
// /**
// * @hidden
// */
// ngAfterContentInit() {
// if (this._viewLabel && this._inputs.length) {
// let labelText = this.getLabelText().trim();
// this._viewLabel = (labelText.length > 0);
// }
// if (this._inputs.length > 1) {
// this.setElementClass('item-multiple-inputs', true);
// }
// }
// /**
// * @hidden
// */
// _updateColor(newColor: string, componentName?: string) {
// componentName = componentName || 'item'; // item-radio
// this._setColor(newColor, componentName);
// }
// /**
// * @hidden
// */
// _setName(elementRef: ElementRef) {
// let nodeName = elementRef.nativeElement.nodeName.replace('ION-', '');
// if (nodeName === 'LIST-HEADER' || nodeName === 'ITEM-DIVIDER') {
// this._name = nodeName;
// }
// }
// /**
// * @hidden
// */
@ -223,18 +175,6 @@ export class Item {
// }
// }
// /**
// * @hidden
// */
// @ContentChildren(Button)
// set _buttons(buttons: QueryList<Button>) {
// buttons.forEach(button => {
// if (!button._size) {
// button.setElementClass('item-button', true);
// }
// });
// }
// /**
// * @hidden
// */
@ -245,3 +185,5 @@ export class Item {
// });
// }
}
var itemId = -1;

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

@ -1,6 +1,8 @@
import { Component, Element, Event, EventEmitter, HostElement, Prop , State} from '@stencil/core';
import { Component, Element, Event, EventEmitter, HostElement, Listen, Prop, PropDidChange, State} from '@stencil/core';
import { isCheckedProperty } from '../../utils/helpers';
import { Radio } from './radio';
import { Radio, RadioEvent } from './radio';
/**
@ -58,7 +60,9 @@ import { Radio } from './radio';
tag: 'ion-radio-group'
})
export class RadioGroup {
radios: Radio[];
radios: Radio[] = [];
id: number;
ids = 0;
@Element() el: HTMLElement;
@ -86,32 +90,45 @@ export class RadioGroup {
*/
@Prop({ mutable: true }) value: string;
@PropDidChange('value')
valueChanged() {
this.update();
this.ionChange.emit(this);
}
@Listen('ionRadioDidLoad')
protected radioDidLoad(ev: RadioEvent) {
const radio = ev.detail.radio;
this.radios.push(radio);
radio.id = 'rb-' + this.id + '-' + (++this.ids);
// if the value is not defined then use its unique id
radio.value = !radio.value ? radio.id : radio.value;
if (radio.checked && !this.value) {
this.value = radio.value;
}
}
@Listen('ionRadioDidToggle')
protected radioToggle(ev: RadioEvent) {
const radio = ev.detail.radio;
// If the group does not allow empty selection then checked
// should be true, otherwise leave it as is
radio.checked = this.allowEmptySelection ? radio.checked : true;
this.value = radio.checked ? radio.value : '';
}
ionViewWillLoad() {
let radioGroupId = ++radioGroupIds;
let radioId = 0;
const radios = this.el.querySelectorAll('ion-radio') as NodeListOf<HostElement>;
for (var i = 0; i < radios.length; i++) {
const radio = radios[i].$instance;
if (radio) {
radio.id = 'rb-' + radioGroupId + '-' + (++radioId);
if (radio.checked) {
this.activeId = radio.id;
}
} else {
}
}
this.id = ++radioGroupIds;
// Get the list header if it exists and set the id
const header = this.el.querySelector('ion-list-header') as HostElement;
if (header) {
if (!header.id) {
header.id = 'rg-hdr-' + radioGroupId;
header.id = 'rg-hdr-' + this.id;
}
this.headerId = header.id;
}
@ -125,10 +142,9 @@ export class RadioGroup {
update() {
// loop through each of the radios
let hasChecked = false;
this.radios.forEach(radio => {
this.radios.forEach((radio: Radio) => {
// check this radiobutton if its value is
// the same as the radiogroups value
// Check the radio if the value is the same as the group value
radio.checked = isCheckedProperty(this.value, radio.value) && !hasChecked;
if (radio.checked) {

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

@ -1,4 +1,5 @@
import { Component, CssClassMap, Element, Event, EventEmitter, Listen, Prop, PropDidChange, State } from '@stencil/core';
import { createThemedClasses } from '../../utils/theme';
@ -51,7 +52,6 @@ import { createThemedClasses } from '../../utils/theme';
export class Radio {
mode: string;
color: string;
group: any;
labelId: string;
styleTmr: any;
@ -61,6 +61,21 @@ export class Radio {
@State() activated: boolean;
/**
* @output {EventEmitter} Emitted when the radio loads.
*/
@Event() ionRadioDidLoad: EventEmitter;
/**
* @output {EventEmitter} Emitted when the radio unloads.
*/
@Event() ionRadioDidUnload: EventEmitter;
/**
* @output {EventEmitter} Emitted when the radio is toggled.
*/
@Event() ionRadioDidToggle: EventEmitter;
/**
* @output {EventEmitter} Emitted when the styles of the radio change.
*/
@ -86,36 +101,17 @@ export class Radio {
*/
@Prop({ mutable: true }) value: string;
ionViewWillLoad() {
this.emitStyle();
}
ionViewDidLoad() {
this.group = this.el.closest('ion-radio-group') as any;
const item = this.el.closest('ion-item') as any;
if (item) {
// register the input inside of the item
// reset to the item's id instead of the radiogroup id
this.id = 'rb-' + item.registerInput('radio');
this.labelId = 'lbl-' + item.id;
}
// if the value is not defined then use it's unique id
this.value = !this.value ? this.id : this.value;
this.ionRadioDidLoad.emit({ radio: this });
}
@PropDidChange('checked')
checkedChanged(val: boolean) {
this.ionSelect.emit({ checked: val });
if (this.group) {
this.group.value = this.value;
this.group.$instance.ionChange.emit(this);
}
this.emitStyle();
}
@ -145,6 +141,7 @@ export class Radio {
toggle() {
this.checked = !this.checked;
this.ionRadioDidToggle.emit({ radio: this });
}
hostData() {
@ -180,30 +177,8 @@ export class Radio {
}
}
// constructor() {
// if (_group) {
// // register with the radiogroup
// this.id = 'rb-' + _group.add(this);
// }
// if (_item) {
// // register the input inside of the item
// // reset to the item's id instead of the radiogroup id
// this.id = 'rb-' + _item.registerInput('radio');
// this._labelId = 'lbl-' + _item.id;
// this._item.setElementClass('item-radio', true);
// }
// }
// /**
// * @internal
// */
// ngOnInit() {
// if (this._group && isPresent(this._group.value)) {
// this.checked = isCheckedProperty(this._group.value, this.value);
// }
// if (this._group && this._group.disabled) {
// this.disabled = this._group.disabled;
// }
// }
export interface RadioEvent extends Event {
detail: {
radio: Radio;
}
}

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

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<title>Ionic Radio</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/build/ionic.js"></script>
<script src="/dist/ionic.js"></script>
</head>
<body>
<ion-app>
@ -13,47 +13,93 @@
<ion-title>Radios</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="outer-content">
<ion-radio-group>
<ion-content class="radio-test outer-content">
<ion-radio-group id="fruitRadio">
<ion-list>
<ion-list-header>
Fruits
Fruits (Group w/ values)
</ion-list-header>
<ion-item>
<ion-label>Apple</ion-label>
<ion-radio slot="start" name="apple" checked></ion-radio>
<ion-icon slot="end" name="ionic"></ion-icon>
<ion-radio slot="start" value="apple"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Banana</ion-label>
<ion-radio slot="start" name="banana" checked></ion-radio>
<ion-label>Grape, checked, disabled</ion-label>
<ion-radio slot="start" id="grapeChecked" value="grape" checked disabled></ion-radio>
</ion-item>
<ion-item>
<ion-label>Cherry</ion-label>
<ion-radio slot="start" color="danger" name="cherry"></ion-radio>
<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>
<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>
<ion-label>Carrot</ion-label>
<ion-radio slot="end" value="carrot"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Tomato</ion-label>
<ion-radio slot="end" value="tomato"></ion-radio>
</ion-item>
<ion-item>
<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-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>
<pre id="valuesCode"></pre>
<ion-list>
<ion-list-header>
Mo Fruits
No Radio Group
</ion-list-header>
<ion-item>
<ion-label>Grape, checked, disabled</ion-label>
<ion-radio slot="start" id="grapeChecked" name="grape" checked disabled></ion-radio>
</ion-item>
<ion-item>
<ion-label>Kiwi, (ionChange) Secondary color</ion-label>
<ion-radio slot="start" color="secondary" (ionChange)="kiwiChange($event)"></ion-radio>
<ion-radio slot="start" color="secondary"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Strawberry, (ionChange) checked="true"</ion-label>
<ion-radio slot="start" color="light" (ionChange)="strawberryChange($event)" checked="true"></ion-radio>
<ion-radio slot="start" color="light" checked="true"></ion-radio>
</ion-item>
<ion-item>
@ -73,29 +119,11 @@
</ion-list>
<p aria-hidden="true" text-center>
<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="printForm()" outline small>Print Form</ion-button>
</p>
<p>
<ion-radio id="standAloneChecked"></ion-radio>
Stand-alone checkbox: <span id="standAloneCheckedSpan"></span>
</p>
<p aria-hidden="true" padding>
<code>appleCtrl.value: <span id="appleCtrlValue"></span></code><br>
<code>bananaCtrl.value: <span id="bananaCtrlValue"></span></code><br>
<code>cherry.value: <span id="cherryCtrlValue"></span></code><br>
<code>grape.value: <span id="grapeCtrlValue"></span></code><br>
<code>kiwiValue: <spa id="kiwiValue"></span></code><br>
<code>strawberryValue: <span id="strawberryValue">y</span></code><br>
</p>
<pre aria-hidden="true" padding id="formResults"></pre>
<ion-item>
<ion-label>Checkbox / Toggle</ion-label>
<ion-radio slot="start" id="checked"></ion-radio>
@ -115,12 +143,30 @@
</ion-content>
<script>
var radioValues = ['fruitRadio', 'pizzaRadio', 'veggiesRadio'];
printRadioValues();
function printForm(ev) {
console.log('TODO get working with forms');
}
function printRadioValues() {
var html = 'Values:<br>';
for (var i = 0; i < radioValues.length; i++) {
var radio = radioValues[i];
var ele = document.getElementById(radio);
html += '<span>' + radio + ': ' + ele.value + ' </span><br>';
}
var valueEle = document.getElementById('valuesCode');
valueEle.innerHTML = html;
}
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;
@ -128,6 +174,14 @@
}
</script>
<style>
.radio-test pre {
background: #f6f6f6;
border: 1px solid #ddd;
padding: 15px 10px;
}
</style>
</ion-app>
</body>
</html>