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

fix(item): reset child styles each time they are passed

Browse Source
This commit is contained in:
Brandy Carney
2017-09-15 17:39:38 -04:00
parent a7cf3bb701
commit 2268cd84c0
3 changed files with 33 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,8 +4,6 @@ import { createThemedClasses } from '../../utils/theme';
import { CssClassMap } from '../../index'; import { CssClassMap } from '../../index';
import { RadioEvent } from '../radio/radio';
@Component({ @Component({
tag: 'ion-item', tag: 'ion-item',
styleUrls: { styleUrls: {
@ -19,7 +17,7 @@ export class Item {
private id: string; private id: string;
private inputs: any = []; private inputs: any = [];
private childStyles: CssClassMap = Object.create(null); private itemStyles: { [key: string]: CssClassMap } = Object.create(null);
private label: any; private label: any;
// TODO get reorder from a parent list/group // TODO get reorder from a parent list/group
@ -36,15 +34,20 @@ export class Item {
ev.stopPropagation(); ev.stopPropagation();
let hasChildStyleChange = false; let hasChildStyleChange = false;
let tagName: string = (ev.target as HTMLElement).tagName;
let updatedStyles: any = ev.detail; let updatedStyles: any = ev.detail;
for (var key in updatedStyles) { for (var key in updatedStyles) {
if (updatedStyles[key] !== this.childStyles['item-' + key]) { if (('item-' + key) !== key) {
this.childStyles['item-' + key] = updatedStyles[key]; Object.defineProperty(updatedStyles, 'item-' + key, Object.getOwnPropertyDescriptor(updatedStyles, key));
delete updatedStyles[key];
hasChildStyleChange = true; hasChildStyleChange = true;
} }
} }
this.itemStyles[tagName] = updatedStyles;
// returning true tells the renderer to queue an update // returning true tells the renderer to queue an update
return hasChildStyleChange; return hasChildStyleChange;
} }
@ -105,8 +108,14 @@ export class Item {
} }
render() { render() {
let childStyles = {};
for (var key in this.itemStyles) {
childStyles = Object.assign(childStyles, this.itemStyles[key]);
}
let themedClasses = { let themedClasses = {
...this.childStyles, ...childStyles,
...createThemedClasses(this.mode, this.color, 'item'), ...createThemedClasses(this.mode, this.color, 'item'),
'item-block': true 'item-block': true
}; };

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

@ -114,6 +114,11 @@ export class Radio {
this.ionRadioDidLoad.emit({ radio: this }); this.ionRadioDidLoad.emit({ radio: this });
} }
@PropDidChange('color')
colorChanged() {
this.emitStyle();
}
@PropDidChange('checked') @PropDidChange('checked')
checkedChanged(val: boolean) { checkedChanged(val: boolean) {
this.ionRadioCheckedDidChange.emit({ radio: this }); this.ionRadioCheckedDidChange.emit({ radio: this });

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

@ -66,14 +66,15 @@
<ion-item> <ion-item>
<ion-label>Broccoli</ion-label> <ion-label>Broccoli</ion-label>
<ion-radio slot="end" color="danger" value="broccoli" checked></ion-radio> <ion-radio id="dangerRadio" slot="end" color="danger" value="broccoli" checked></ion-radio>
</ion-item> </ion-item>
</ion-radio-group> </ion-radio-group>
<ion-item> <ion-item>
<ion-button onClick="toggleBoolean('grapeChecked', 'checked')" outline small>Grape Checked</ion-button> <ion-button slot="start" onClick="toggleBoolean('grapeChecked', 'checked')" outline small>Checked</ion-button>
<ion-button onClick="toggleBoolean('grapeChecked', 'disabled')" outline small>Grape Disabled</ion-button> <ion-button slot="start" onClick="toggleBoolean('grapeChecked', 'disabled')" outline small>Disabled</ion-button>
<ion-button onClick="printRadioValues()" outline small>Print Values</ion-button> <ion-button slot="end" onClick="printRadioValues()" outline small>Print</ion-button>
<ion-button slot="end" onClick="toggleString('dangerRadio', 'color', 'danger', 'secondary')" outline small color="danger">Color</ion-button>
</ion-item> </ion-item>
</ion-list> </ion-list>
@ -161,6 +162,14 @@
ele[prop] = isTrue; ele[prop] = isTrue;
console.debug('in toggleBoolean, setting', prop, 'to', isTrue); console.debug('in toggleBoolean, setting', prop, 'to', isTrue);
} }
function toggleString(id, prop, firstVal, secondVal) {
var ele = document.getElementById(id);
var stringVal = ele[prop] == firstVal ? secondVal : firstVal;
ele[prop] = stringVal;
console.debug('in toggleString, setting', prop, 'to', stringVal);
}
</script> </script>
<style> <style>