TURN ON THE RADIO

ionic/components.js

@@ -15,8 +15,7 @@ export * from 'ionic/components/list/list'
 export * from 'ionic/components/nav/nav'
 export * from 'ionic/components/nav/nav-item'
 // export * from 'ionic/components/nav/decorators'
-// export * from 'ionic/components/radio/radio-button'
-// export * from 'ionic/components/radio/radio-group'
+export * from 'ionic/components/radio/radio'
 // export * from 'ionic/components/search-bar/search-bar'
 // export * from 'ionic/components/split-view/split-view'
 export * from 'ionic/components/segment/segment'

ionic/components/radio/radio-button.js

@@ -1,36 +0,0 @@
-import {NgElement, Component, View} from 'angular2/angular2'
-import {IonicComponent} from 'ionic/config/component'
-
-
-@Component({
-  selector: 'ion-radio'
-})
-@View({
-  template: `
-    <div class="item-content">
-
-      <div class="item-title">
-        <content></content>
-      </div>
-
-      <div class="item-media media-radio">
-        <icon class="radio-off"></icon>
-        <icon class="ion-ios-checkmark-empty radio-on"></icon>
-      </div>
-
-    </div>
-  `
-})
-export class RadioButton {
-  constructor(
-    element: NgElement
-  ) {
-    this.domElement = element.domElement
-    this.config = RadioButton.config.invoke(this)
-
-    this.domElement.classList.add('item')
-    this.domElement.setAttribute('aria-checked', true)
-  }
-}
-
-new IonicComponent(RadioButton, {})

ionic/components/radio/radio-group.js

@@ -1,22 +0,0 @@
-import {NgElement, Component, View} from 'angular2/angular2'
-import {IonicComponent} from 'ionic/config/component'
-
-
-@Component({
-  selector: 'ion-radio-group'
-})
-@View({
-  template: `<content></content>`
-})
-export class RadioGroup {
-  constructor(
-    element: NgElement
-  ) {
-    this.domElement = element.domElement
-    this.config = RadioGroup.config.invoke(this)
-
-    this.domElement.classList.add('list')
-  }
-}
-
-new IonicComponent(RadioGroup, {})

ionic/components/radio/radio.js

@@ -0,0 +1,151 @@
+import {ElementRef} from 'angular2/angular2'
+
+import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
+import {View} from 'angular2/src/core/annotations_impl/view';
+
+import {ControlGroup, ControlDirective} from 'angular2/forms'
+import {IonicComponent} from 'ionic/config/component'
+
+
+@Component({
+  selector: 'ion-radio-group'
+})
+@View({
+  template: `<content></content>`
+})
+export class RadioGroup {
+  constructor(
+    elementRef: ElementRef,
+    cd:ControlDirective
+  ) {
+    this.domElement = elementRef.domElement
+    this.config = RadioGroup.config.invoke(this)
+    this.controlDirective = cd;
+    cd.valueAccessor = this; //ControlDirective should inject CheckboxControlDirective
+
+    this.domElement.classList.add('list');
+
+    this.buttons = [];
+  }
+
+  /**
+   * Much like ngModel, this is called from our valueAccessor for the attached
+   * ControlDirective to update the value internally.
+   */
+  writeValue(value) {
+    this.value = value;
+
+    setTimeout(() => {
+      this.selectFromValue(value);
+    })
+  }
+
+  /**
+   * Called by child SegmentButtons to bind themselves to
+   * the Segment.
+   */
+  register(radioButton) {
+    this.buttons.push(radioButton);
+
+    // If we don't have a default value, and this is the
+    // first button added, select it
+    if(!this.value && this.buttons.length === 1) {
+      setTimeout(() => {
+        // We need to defer so the control directive can initialize
+        this.selected(radioButton);
+      })
+    }
+  }
+
+  /**
+   * Select the button with the given value.
+   */
+  selectFromValue(value) {
+    for(let button of this.buttons) {
+      if(button.value === value) {
+        this.selected(button);
+      }
+    }
+  }
+
+
+  /**
+   * Indicate a button should be selected.
+   */
+  selected(radioButton) {
+    for(let button of this.buttons) {
+      button.setActive(false);
+    }
+    radioButton.setActive(true);
+
+    this.value = radioButton.value;
+    // TODO: Better way to do this?
+    this.controlDirective._control().updateValue(this.value);
+  }
+}
+
+new IonicComponent(RadioGroup, {})
+
+@Component({
+  selector: 'ion-radio',
+  hostListeners: {
+    '^click': 'buttonClicked($event)'
+  },
+  properties: {
+    value: 'value'
+  }
+})
+@View({
+  template: `
+    <div class="item-content">
+
+      <div class="item-title">
+        <content></content>
+      </div>
+
+      <div class="item-media media-radio">
+        <icon class="radio-off"></icon>
+        <icon class="ion-ios-checkmark-empty radio-on"></icon>
+      </div>
+
+    </div>
+  `
+})
+export class RadioButton {
+  constructor(
+    @Ancestor() group: RadioGroup,
+    elementRef: ElementRef
+  ) {
+    this.domElement = elementRef.domElement
+    this.config = RadioButton.config.invoke(this)
+
+    this.domElement.classList.add('item')
+    this.domElement.setAttribute('aria-checked', true)
+
+    this.group = group;
+
+    group.register(this);
+  }
+
+  setActive(isActive) {
+    // TODO: No domElement
+    if(isActive) {
+      this.domElement.classList.add('active');
+      this.domElement.setAttribute('aria-checked', true)
+    } else {
+      this.domElement.classList.remove('active');
+      this.domElement.setAttribute('aria-checked', false)
+    }
+  }
+
+  buttonClicked(event) {
+    this.group.selected(this, event);
+    event.preventDefault();
+  }
+
+}
+
+new IonicComponent(RadioButton, {
+
+})

ionic/components/radio/test/basic/index.js

@@ -2,20 +2,23 @@ import {bootstrap} from 'angular2/angular2'
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {Content} from 'ionic/components/content/content';
-import {Icon} from 'ionic/components/icon/icon';
-import {RadioGroup} from 'ionic/components/radio/radio-group';
-import {RadioButton} from 'ionic/components/radio/radio-button';
+import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
+import {RadioGroup, RadioButton, Content, Button, List} from 'ionic/ionic';
 
 
 @Component({ selector: 'ion-app' })
 @View({
   templateUrl: 'main.html',
-  directives: [Content, RadioGroup, RadioButton]
+  directives: [FormDirectives].concat([RadioGroup, RadioButton, List, Content, Button])
 })
 class IonicApp {
   constructor() {
     console.log('IonicApp Start')
+
+    var fb = new FormBuilder();
+    this.form = fb.group({
+      preferredApple: ['mac', Validators.required],
+    });
   }
 }
 

ionic/components/radio/test/basic/main.html

@@ -3,22 +3,33 @@
 
   <ion-content>
 
+    <form (^submit)="doSubmit($event)" [control-group]="form">
       <div class="list-header">
         Radio Group
       </div>
 
-    <ion-radio-group>
+      <ion-radio-group control="preferredApple">
 
-      <ion-radio>
-        Star Wars
+        <ion-radio value="mac">
+          McIntosh
         </ion-radio>
 
-      <ion-radio>
-        Star Trek
+        <ion-radio value="granny">
+          Granny Smith
+        </ion-radio>
+
+        <ion-radio value="gala">
+          Gala
+        </ion-radio>
+
+        <ion-radio value="fuji">
+          Fuji
         </ion-radio>
 
       </ion-radio-group>
 
-  </ion-content>
+    </form>
 
+    Current apple: <b>{{form.controls.preferredApple.value}}</b>
+  </ion-content>
 </ion-view>