refactor(searchbar): WIP Angularizing searchbar

ionic/components/searchbar/searchbar.ts

@@ -1,12 +1,74 @@
-import {ElementRef, Renderer, Directive, Host, forwardRef, ViewChild, Output, EventEmitter} from 'angular2/core';
+import {ElementRef, Renderer, Component, Directive} from 'angular2/core';
+import {Host, HostBinding, HostListener, ViewChild, Input, Output, EventEmitter, Optional} from 'angular2/core';
 import {NgIf, NgClass, NgControl, FORM_DIRECTIVES} from 'angular2/common';
 
 import {Ion} from '../ion';
 import {Config} from '../../config/config';
-import {ConfigComponent} from '../../decorators/config-component';
 import {Icon} from '../icon/icon';
 import {Button} from '../button/button';
 
+
+/**
+* @private
+*/
+@Directive({
+  selector: '.searchbar-input',
+})
+export class SearchbarInput {
+  @HostListener('keyup', ['$event'])
+  /**
+   * @private
+   * Update the Searchbar input value when the input changes
+   */
+  private inputChanged(ev) {
+    this.writeValue(ev.target.value);
+    this.onChange(ev.target.value);
+  }
+
+  constructor(
+    @Optional ngControl: NgControl,
+    elementRef: ElementRef,
+    renderer: Renderer
+  ) {
+    this.renderer = renderer;
+    this.elementRef = elementRef;
+
+    if (!ngControl) return;
+
+    this.ngControl = ngControl;
+    this.ngControl.valueAccessor = this;
+  }
+
+  /**
+   * @private
+   * Write a new value to the element.
+   */
+  public writeValue(value: any) {
+    this.value = value;
+  }
+
+  public onChange = (_:any) => {};
+  public onTouched = () => {};
+
+  /**
+   * @private
+   * Set the function to be called when the control receives a change event.
+   */
+  public registerOnChange(fn:(_:any) => {}):void {
+    this.onChange = fn;
+  }
+
+  /**
+   * @private
+   * Set the function to be called when the control receives a touch event.
+   */
+  public registerOnTouched(fn:() => {}):void {
+    this.onTouched = fn;
+  }
+
+}
+
+
 /**
  * @name Searchbar
  * @module ionic
@@ -15,29 +77,20 @@ import {Button} from '../button/button';
  *
  * @usage
  * ```html
- * <ion-searchbar [(ngModel)]="defaultSearch"></ion-searchbar>
+ * <ion-searchbar [(ngModel)]="defaultSearch" (cancel)="onCancelSearchbar(ev, value)"></ion-searchbar>
  * ```
  *
- * @property {function} [cancelButtonAction] - the function that gets called by clicking the cancel button
- * @property {string} [cancelButtonText=Cancel] - sets the cancel button text to the value passed in
+ * @property {string} [cancelButtonText=Cancel] - Sets the cancel button text to the value passed in
  * @property {boolean} [hideCancelButton=false] - Hides the cancel button
  * @property {string} [placeholder=Search] - Sets input placeholder to the value passed in
  *
+ * @property {Any} [input] - Expression to evaluate when the Searchbar input has changed
+ * @property {Any} [cancel] - Expression to evaluate when the cancel button is clicked.
+ *
  * @see {@link /docs/v2/components#search Search Component Docs}
  */
-@ConfigComponent({
+@Component({
   selector: 'ion-searchbar',
-  inputs: [
-    'cancelButtonAction',
-    'cancelButtonText',
-    'hideCancelButton',
-    'placeholder'
-  ],
-  outputs: ['input'],
-  host: {
-   '[class.searchbar-left-aligned]': 'shouldLeftAlign',
-   '[class.searchbar-focused]': 'isFocused',
-  },
   template:
     '<div class="searchbar-input-container">' +
       '<button (click)="cancelSearchbar($event, query)" (mousedown)="cancelSearchbar($event, query)" clear dark class="searchbar-md-cancel">' +
@@ -48,11 +101,30 @@ import {Button} from '../button/button';
       '<button clear *ngIf="query" class="searchbar-clear-icon" (click)="clearInput()" (mousedown)="clearInput()"></button>' +
     '</div>' +
     '<button clear (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" [hidden]="hideCancelButton" class="searchbar-ios-cancel">{{cancelButtonText}}</button>',
-  directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button, forwardRef(() => SearchbarInput)]
+  directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button, SearchbarInput]
 })
 export class Searchbar extends Ion {
-  @ViewChild(forwardRef(() => SearchbarInput)) searchbarInput;
-  query: string;
+  @Input cancelButtonText: string;
+  @Input hideCancelButton: any;
+  @Input placeholder: string;
+
+  // @Output input: EventEmitter<any> = new EventEmitter();
+  @Output cancel: EventEmitter<any> = new EventEmitter();
+
+  @HostBinding('class.searchbar-focused') isFocused;
+
+  @HostBinding('class.searchbar-left-aligned')
+  /**
+   * @private
+   * Check if the Searchbar has a value and left align if so
+   */
+  private shouldLeftAlign() {
+    return this.searchbarInput && this.searchbarInput.value && this.searchbarInput.value.trim() != '';
+  }
+
+  @ViewChild(SearchbarInput) searchbarInput;
+
+  query: string = '';
   blurInput = true;
 
   constructor(
@@ -65,15 +137,11 @@ export class Searchbar extends Ion {
     this.renderer = renderer;
     this.elementRef = elementRef;
 
-    this.input = new EventEmitter('input');
-
     // If there is no control then we shouldn't do anything
     if (!ngControl) return;
 
     this.ngControl = ngControl;
     this.ngControl.valueAccessor = this;
-
-    this.query = '';
   }
 
   /**
@@ -90,21 +158,12 @@ export class Searchbar extends Ion {
     this.placeholder = this.placeholder || 'Search';
   }
 
-  /**
-   * @private
-   * After the view has initialized check if the Searchbar has a value
-   */
-  ngAfterViewInit() {
-    this.shouldLeftAlign = this.searchbarInput.value && this.searchbarInput.value.trim() != '';
-  }
-
   /**
    * @private
    * Sets the Searchbar to focused and aligned left on input focus.
    */
   inputFocused() {
     this.isFocused = true;
-    this.shouldLeftAlign = true;
   }
 
   /**
@@ -120,9 +179,7 @@ export class Searchbar extends Ion {
       this.blurInput = true;
       return;
     }
-    //console.log("Blurring input");
     this.isFocused = false;
-    this.shouldLeftAlign = this.searchbarInput.value && this.searchbarInput.value.trim() != '';
   }
 
   /**
@@ -130,7 +187,6 @@ export class Searchbar extends Ion {
    * Clears the input field and triggers the control change.
    */
   clearInput() {
-    //console.log("Clearing input");
     this.searchbarInput.writeValue('');
     this.searchbarInput.onChange('');
     this.blurInput = false;
@@ -142,12 +198,11 @@ export class Searchbar extends Ion {
    * the clearInput function doesn't want the input to blur
    * then calls the custom cancel function if the user passed one in.
    */
-  cancelSearchbar(event, value) {
-    //console.log("Cancel searchbar");
+  cancelSearchbar(ev, value) {
     this.clearInput();
     this.blurInput = true;
-
-    this.cancelButtonAction && this.cancelButtonAction(event, value);
+    console.log("should cancel");
+    this.cancel.next();
   }
 
     /**
@@ -156,73 +211,6 @@ export class Searchbar extends Ion {
     */
    updateQuery(value) {
      this.query = value;
-     this.input.next(value);
+     this.input.emit();
    }
 }
-
-/**
-* @private
-* Updates the value of query
-*/
-@Directive({
-  selector: '.searchbar-input',
-  host: {
-    '(keyup)': 'inputChanged($event)'
-  }
-})
-export class SearchbarInput {
-  constructor(
-    @Host() searchbar: Searchbar,
-    elementRef: ElementRef,
-    renderer: Renderer
-  ) {
-    this.searchbar = searchbar;
-    this.renderer = renderer;
-    this.elementRef = elementRef;
-
-    if (!searchbar.ngControl) return;
-
-    this.onChange = (_) => {};
-    this.onTouched = (_) => {};
-
-    this.ngControl = searchbar.ngControl;
-    this.ngControl.valueAccessor = this;
-  }
-
-  /**
-   * @private
-   * Write a new value to the element.
-   */
-  writeValue(value) {
-    this.value = value;
-    if (typeof value === 'string') {
-      this.searchbar.updateQuery(value);
-    }
-  }
-
-  /**
-   * @private
-   * Set the function to be called when the control receives a change event.
-   */
-  registerOnChange(fn) {
-    this.onChange = fn;
-  }
-
-  /**
-   * @private
-   * Set the function to be called when the control receives a touch event.
-   */
-  registerOnTouched(fn) {
-    this.onTouched = fn;
-  }
-
-  /**
-   * @private
-   * Update the Searchbar input value when the input changes
-   */
-  inputChanged(event) {
-    this.writeValue(event.target.value);
-    this.onChange(event.target.value);
-  }
-
-}

ionic/components/searchbar/test/floating/index.ts

@@ -8,27 +8,25 @@ import {SearchPipe} from 'ionic/components/searchbar/searchbar';
   directives: [FORM_DIRECTIVES]
 })
 class E2EApp {
-  defaultSearch: string = '';
+  defaultSearch: string = 'test';
   customPlaceholder: string = '';
   defaultCancel: string = '';
   customCancel: string = '';
   customCancelAction: string = '';
-  clickedCustomAction: boolean = false;
 
   constructor() {
 
   }
 
-  myCancelAction(event, query) {
-    console.log("Clicked cancel action with", query);
-    this.clickedCustomAction = true;
+  onCancelSearchbar(ev) {
+    console.log("Clicked cancel action with", ev);
   }
 
   triggerInput(ev) {
     // The defaultSearch doesn't get updated before this function is called
     // so we have to wrap it in a timeout
     setTimeout(() => {
-      console.log("Triggered input", this.defaultSearch);
+      console.log("Triggered input", ev);
     });
   }
 }

ionic/components/searchbar/test/floating/main.html

@@ -1,6 +1,6 @@
 <ion-content>
   <h5 padding-left> Search - Default </h5>
-  <ion-searchbar [(ngModel)]="defaultSearch" (input)="triggerInput($event)" class="e2eDefaultFloatingSearchbar"></ion-searchbar>
+  <ion-searchbar [(ngModel)]="defaultSearch" (input)="triggerInput($event)" (cancel)="onCancelSearchbar($event)" class="e2eDefaultFloatingSearchbar"></ion-searchbar>
 
   <p padding-left>
       Default Search: <b>{{ defaultSearch }}</b>
@@ -14,11 +14,4 @@
 
   <h5 padding-left> Search - Custom Cancel Button Danger </h5>
   <ion-searchbar [(ngModel)]="customCancel" cancelButtonText="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchbar" danger></ion-searchbar>
-
-  <h5 padding-left> Search - Custom Cancel Action</h5>
-  <ion-searchbar [(ngModel)]="customCancelAction" cancelButtonText="Done" [cancelAction]="myCancelAction" class="e2eCustomCancelActionFloatingSearchbar"></ion-searchbar>
-
-  <div *ngIf="clickedCustomAction">
-    Clicked custom action with input = {{customCancelAction}}
-  </div>
 </ion-content>