From 4cc9a14001571f3c0238ab45a6c4bf5022b9e2d2 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Wed, 4 Nov 2015 14:57:56 -0500 Subject: [PATCH] fix(segment): Got segment working with ng-model, removed unused code and combined segment component with directive. Added usage for segment in a form. Removed SegmentControlValueAccessor. Fixes #344 --- ionic/components/segment/segment.ts | 126 +++++------------- ionic/components/segment/test/basic/main.html | 22 +-- ionic/config/directives.ts | 3 +- 3 files changed, 45 insertions(+), 106 deletions(-) diff --git a/ionic/components/segment/segment.ts b/ionic/components/segment/segment.ts index b244008417..d4b1c3bb89 100644 --- a/ionic/components/segment/segment.ts +++ b/ionic/components/segment/segment.ts @@ -1,9 +1,7 @@ -import {Component, Directive, Renderer, ElementRef, EventEmitter, Host, forwardRef, Optional} from 'angular2/angular2'; -import {Control, NgControl, NgFormControl, ControlGroup, ControlDirective} from 'angular2/angular2'; +import {Directive, Renderer, ElementRef, Host, Optional, NgControl} from 'angular2/angular2'; import {Ion} from '../ion'; import {Config} from '../../config/config'; -import {dom} from 'ionic/util'; /** * @name Segment @@ -22,48 +20,56 @@ import {dom} from 'ionic/util'; * Enemies * * + * + * + *
+ * + * + * Standard + * + * + * Hybrid + * + * + * Satellite + * + * + *
* ``` */ -@Component({ - selector: 'ion-segment', - inputs: [ - 'value' - ], - template: '', - directives: [forwardRef(() => SegmentButton)] +@Directive({ + selector: 'ion-segment' }) export class Segment extends Ion { + buttons: Array = []; + /** * TODO * @param {NgControl} ngControl TODO * @param {ElementRef} elementRef TODO * @param {Config} config TODO - * @param {Renderer} renderer TODO */ constructor( @Optional() ngControl: NgControl, elementRef: ElementRef, - config: Config, - renderer: Renderer + config: Config ) { super(elementRef, config); - this.ele = elementRef.nativeElement - this.elementRef = elementRef; - this.renderer = renderer; + this.onChange = (_) => {}; + this.onTouched = (_) => {}; - this.change = new EventEmitter('change'); - this.input = new EventEmitter('input'); - - this.ngControl = ngControl; - - this.buttons = []; + if (ngControl) ngControl.valueAccessor = this; } writeValue(value) { - this.value = value; + this.value = !value ? '' : value; } + registerOnChange(fn) { this.onChange = fn; } + + registerOnTouched(fn) { this.onTouched = fn; } + /** * Called by child SegmentButtons to bind themselves to * the Segment. @@ -74,7 +80,7 @@ export class Segment extends Ion { // If this button is registered and matches our value, // make sure to select it - if(this.value == segmentButton.value) { + if (this.value == segmentButton.value) { this.selected(segmentButton); } } @@ -88,7 +94,7 @@ export class Segment extends Ion { return; } this.buttons.forEach(function(button) { - if(button.value === value) { + if (button.value === value) { button.isActive = true; } }); @@ -104,77 +110,11 @@ export class Segment extends Ion { }); segmentButton.isActive = true; - if(!this.ngControl) { return; } - - setTimeout(() => { - this.writeValue(segmentButton.value); - - this.ngControl.control.updateValue(segmentButton.value); - - // Trigger on change - this.change.next(); - }) + this.value = segmentButton.value; + this.onChange(segmentButton.value); } } -/** - * TODO - */ -@Directive({ - selector: 'ion-segment', - host: { - '(change)': 'onChange($event.target.value)', - '(input)': 'onChange($event.target.value)', - '(blur)': 'onTouched()', - //'[value]': 'value', - /* - '[class.ng-untouched]': 'cd.control?.untouched == true', - '[class.ng-touched]': 'cd.control?.touched == true', - '[class.ng-pristine]': 'cd.control?.pristine == true', - '[class.ng-dirty]': 'cd.control?.dirty == true', - '[class.ng-valid]': 'cd.control?.valid == true', - '[class.ng-invalid]': 'cd.control?.valid == false' - */ - } -}) -export class SegmentControlValueAccessor { - /** - * TODO - * @param {NgControl} ngControl TODO - * @param {Renderer} renderer TODO - * @param {ElementRef} elementRef TODO - * @param {Segment} segment TODO - */ - constructor( - @Optional() ngControl: NgControl, - renderer: Renderer, - elementRef: ElementRef, - segment: Segment - ) { - this.onChange = (_) => {}; - this.onTouched = (_) => {}; - - if(!ngControl) { return; } - - this.ngControl = ngControl; - this.renderer = renderer; - this.elementRef = elementRef; - this.segment = segment; - - this.ngControl.valueAccessor = this; - } - - writeValue(value) { - this.value = !value ? '' : value; - - this.segment.value = this.value; - } - - registerOnChange(fn) { this.onChange = fn; } - - registerOnTouched(fn) { this.onTouched = fn; } -} - /** * TODO */ diff --git a/ionic/components/segment/test/basic/main.html b/ionic/components/segment/test/basic/main.html index f692f8f488..eb34e622a2 100644 --- a/ionic/components/segment/test/basic/main.html +++ b/ionic/components/segment/test/basic/main.html @@ -31,17 +31,17 @@

Map mode: NgControl

- - - Standard - - - Hybrid - - - Satellite - - + + + Standard + + + Hybrid + + + Satellite + +

diff --git a/ionic/config/directives.ts b/ionic/config/directives.ts index a3d0fcc543..968f2cb16f 100644 --- a/ionic/config/directives.ts +++ b/ionic/config/directives.ts @@ -22,7 +22,7 @@ import {Checkbox} from '../components/checkbox/checkbox'; import {Switch} from '../components/switch/switch'; import {TextInput, TextInputElement} from '../components/text-input/text-input'; import {Label} from '../components/text-input/label'; -import {Segment, SegmentButton, SegmentControlValueAccessor} from '../components/segment/segment'; +import {Segment, SegmentButton} from '../components/segment/segment'; import {RadioGroup, RadioButton} from '../components/radio/radio'; import {SearchBar} from '../components/searchbar/searchbar'; import {Nav} from '../components/nav/nav'; @@ -83,7 +83,6 @@ export const IONIC_DIRECTIVES = [ SearchBar, Segment, SegmentButton, - SegmentControlValueAccessor, Checkbox, RadioGroup, RadioButton,