refactor(searchbar): Added an input trigger and moved some of the properties around

Added descriptions and private to the functions and improved docs for
searchbar. References #666

ionic/components/searchbar/searchbar.ts

@@ -6,45 +6,48 @@ import {ConfigComponent} from '../../config/decorators';
 import {Icon} from '../icon/icon';
 
 /**
+ * @name Searchbar
+ * @module ionic
  * @description
- * The Search Bar service adds an input field which can be used to search or filter items.
+ * Manages the display of a search bar which can be used to search or filter items.
  *
  * @usage
  * ```html
- * <ion-searchbar ng-control="searchQuery"></ion-searchbar>
+ * <ion-searchbar [(ng-model)]="defaultSearch"></ion-searchbar>
  * ```
+ *
+ * @property [placeholder] - sets input placeholder to value passed in
+ * @property [show-cancel] - shows the cancel button based on boolean value passed in
+ * @property [cancel-text] - sets the cancel button text to the value passed in
+ * @property [cancel-action] - the function that gets called by clicking the cancel button
  */
 @ConfigComponent({
   selector: 'ion-searchbar',
   defaultInputs: {
     'showCancel': false,
     'cancelText': 'Cancel',
-    'placeholder': 'Search',
-    'cancelAction': function(event, query) {
-      this.element = this.elementRef.nativeElement.querySelector('input');
-      this.element.blur();
-      this.clearInput();
-      this.shouldLeftAlign = false;
-    }
+    'placeholder': 'Search'
   },
+  inputs: ['cancelAction'],
   host: {
    '[class.left-align]': 'shouldLeftAlign',
    '[class.focused]': 'isFocused',
   },
   template:
     '<div class="searchbar-input-container">' +
-      '<button (click)="cancelAction($event, query)" clear dark class="searchbar-cancel-icon"><icon arrow-back></icon></button>' +
+      '<button (click)="cancelSearchbar($event, query)" clear dark class="searchbar-cancel-icon"><icon arrow-back></icon></button>' +
       '<div class="searchbar-search-icon"></div>' +
       '<input [(value)]="query" (focus)="inputFocused()" (blur)="inputBlurred()" ' +
       '(input)="inputChanged($event)" class="searchbar-input" type="search" [attr.placeholder]="placeholder">' +
       '<button clear *ng-if="query" class="searchbar-close-icon" (click)="clearInput($event)"></button>' +
     '</div>' +
-    '<button *ng-if="showCancel" (click)="cancelAction($event, query)" class="searchbar-cancel">{{cancelText}}</button>',
+    '<button *ng-if="showCancel" (click)="cancelSearchbar($event, query)" class="searchbar-cancel">{{cancelText}}</button>',
   directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon]
 })
 export class Searchbar extends Ion {
   /**
    * @private
+   * This holds the searchbar input value used for querying
    */
   query: string;
 
@@ -57,10 +60,9 @@ export class Searchbar extends Ion {
     super(elementRef, config);
     this.renderer = renderer;
     this.elementRef = elementRef;
-    if(!ngControl) {
-      // They don't want to do anything that works, so we won't do anything that breaks
-      return;
-    }
+
+    // If there is no control then we shouldn't do anything
+    if (!ngControl) return;
 
     this.ngControl = ngControl;
     this.ngControl.valueAccessor = this;
@@ -68,6 +70,8 @@ export class Searchbar extends Ion {
 
   /**
    * @private
+   * After the view has initialized check if the searchbar has a value
+   * and then store that value in query
    */
   afterViewInit() {
     // If the user passes in a value to the model we should left align
@@ -77,8 +81,7 @@ export class Searchbar extends Ion {
 
   /**
    * @private
-   * Much like ngModel, this is called from our valueAccessor for the attached
-   * ControlDirective to update the value internally.
+   * Write a new value to the element.
    */
   writeValue(value) {
     this.query = value;
@@ -86,6 +89,7 @@ export class Searchbar extends Ion {
 
   /**
    * @private
+   * Set the function to be called when the control receives a change event.
    */
   registerOnChange(fn) {
     this.onChange = fn;
@@ -93,6 +97,7 @@ export class Searchbar extends Ion {
 
   /**
    * @private
+   * Set the function to be called when the control receives a touch event.
    */
   registerOnTouched(fn) {
     this.onTouched = fn;
@@ -100,6 +105,7 @@ export class Searchbar extends Ion {
 
   /**
    * @private
+   * Updates the value of the control when the searchbar input changes.
    */
   inputChanged(event) {
     this.writeValue(event.target.value);
@@ -108,6 +114,7 @@ export class Searchbar extends Ion {
 
   /**
    * @private
+   * Sets the searchbar to focused and aligned left on input focus.
    */
   inputFocused() {
     this.isFocused = true;
@@ -116,14 +123,34 @@ export class Searchbar extends Ion {
 
   /**
    * @private
+   * Sets the searchbar to not focused and checks if it should align left
+   * based on whether there is a value in the searchbar or not on input blur.
    */
   inputBlurred() {
     this.isFocused = false;
     this.shouldLeftAlign = this.ngControl.value && this.ngControl.value.trim() != '';
   }
 
+  /**
+   * @private
+   * Clears the input field and triggers the control change.
+   */
   clearInput(event) {
     this.writeValue('');
     this.onChange('');
   }
+
+  /**
+   * @private
+   * Blurs the input field, clears the input field and removes the left align
+   * then calls the custom cancel function if the user passed one in.
+   */
+  cancelSearchbar(event, query) {
+    this.element = this.elementRef.nativeElement.querySelector('input');
+    this.element.blur();
+    this.clearInput();
+    this.shouldLeftAlign = false;
+
+    this.cancelAction && this.cancelAction(event, query);
+  }
 }

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

@@ -24,4 +24,12 @@ class E2EApp {
     console.log("Clicked cancel action with", query);
     this.clickedCustomAction = true;
   }
+
+  triggerInput() {
+    // The defaultSearch doesn't get updated before this function is called
+    // so we have to wrap it in a timeout
+    setTimeout(() => {
+      console.log(this.defaultSearch);
+    });
+  }
 }

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

@@ -1,6 +1,6 @@
 <ion-content>
   <h5 padding-left padding-top> Search - Default </h5>
-  <ion-searchbar [(ng-model)]="defaultSearch" class="e2eDefaultFloatingSearchbar"></ion-searchbar>
+  <ion-searchbar [(ng-model)]="defaultSearch" (input)="triggerInput()" class="e2eDefaultFloatingSearchbar"></ion-searchbar>
 
   <h5 padding-left> Search - Custom Placeholder </h5>
   <ion-searchbar [(ng-model)]="customPlaceholder" placeholder="Filter Schedules" class="e2eCustomPlaceholderFloatingSearchbar"></ion-searchbar>