refactor(search-bar): removed dependency on ngControl and forms

Changed clear div to a button, using ngModel now being passed in by the user, only showing clear button when input has more than one char.
2026-03-13 10:22:08 +08:00 · 2015-10-12 12:47:24 -04:00
parent ffc5a5e2ce
commit 3917c38e27
6 changed files with 68 additions and 58 deletions
--- a/ionic/components/search-bar/modes/ios.scss
+++ b/ionic/components/search-bar/modes/ios.scss
@@ -20,7 +20,7 @@ $search-bar-ios-cancel-transition:        all 400ms cubic-bezier(.25, .45, .05,

 $search-bar-ios-input-close-icon-color:   #8F8E94 !default;
 $search-bar-ios-input-close-icon-svg:     "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $search-bar-ios-input-close-icon-color + "' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
-$search-bar-ios-input-close-icon-size:    17px !default;
+$search-bar-ios-input-close-icon-size:    18px !default;


 ion-search-bar {
@@ -67,15 +67,16 @@ ion-search-bar {
 }

 .search-bar-close-icon {
-  width: $search-bar-ios-input-close-icon-size;
-  height: $search-bar-ios-input-close-icon-size;
+  width: 30px;
+  height: 100%;

  @include svg-background-image($search-bar-ios-input-close-icon-svg);
  background-size: $search-bar-ios-input-close-icon-size;
  background-repeat: no-repeat;
+  background-position: center;
  position: absolute;
-  right: 10px;
-  top: 6px;
+  right: 0;
+  top: 0;
 }

 .search-bar-cancel {
--- a/ionic/components/search-bar/modes/md.scss
+++ b/ionic/components/search-bar/modes/md.scss
@@ -60,14 +60,17 @@ ion-search-bar {

 .search-bar-close-icon {
  width: $search-bar-md-input-close-icon-size;
-  height: $search-bar-md-input-close-icon-size;
+  height: 100%;
+  padding: 0;

  @include svg-background-image($search-bar-md-input-close-icon-svg);
  background-size: $search-bar-md-input-close-icon-size;
  background-repeat: no-repeat;
+  background-position: center;
  position: absolute;
  right: 13px;
-  top: 13px;
+  top: 0;
+
 }

 .search-bar-cancel {
--- a/ionic/components/search-bar/search-bar.scss
+++ b/ionic/components/search-bar/search-bar.scss
@@ -31,3 +31,9 @@ input[type="search"].search-bar-input {
  line-height: 3rem;
  @include appearance(none);
 }
+
+.search-bar-close-icon {
+  min-height: 0;
+  padding: 0;
+  margin: 0;
+}
--- a/ionic/components/search-bar/search-bar.ts
+++ b/ionic/components/search-bar/search-bar.ts
@@ -18,30 +18,26 @@ import {ConfigComponent} from '../../config/decorators';
  selector: 'ion-search-bar',
  inputs: [
    'list',
-    'query'
+    'query',
+    'model' : 'ngModel'
  ],
  defaultInputs: {
    'showCancel': false,
    'cancelText': 'Cancel',
    'placeholder': 'Search',
-    'cancelAction': function() {
-      // TODO user will override this if they pass a function
-      // need to allow user to call these
+    'cancelAction': function(event, model) {
+      // The cancel button now works on its own to blur the input
      console.log('Default Cancel');
-      this.isFocused = false;
-      this.shouldLeftAlign = this.value.trim() != '';
-      this.element = this.elementRef.nativeElement.querySelector('input');
-      this.element.blur();
    }
  },
  template:
    '<div class="search-bar-input-container" [class.left-align]="shouldLeftAlign">' +
      '<div class="search-bar-search-icon"></div>' +
      '<input (focus)="inputFocused()" (blur)="inputBlurred()" ' +
-      '(input)="inputChanged($event)" class="search-bar-input" type="search" [attr.placeholder]="placeholder" [(ng-model)]="value">' +
-      '<div class="search-bar-close-icon" (click)="clearInput()"></div>' +
+      '(input)="inputChanged($event)" class="search-bar-input" type="search" [attr.placeholder]="placeholder" [(ng-model)]="model">' +
+      '<button clear *ng-if="model" class="search-bar-close-icon" (click)="clearInput($event)"></button>' +
    '</div>' +
-    '<button *ng-if="showCancel" (click)="cancelAction()" class="search-bar-cancel" [class.left-align]="shouldLeftAlign">{{cancelText}}</button>',
+    '<button *ng-if="showCancel" (click)="cancelAction($event, model)" class="search-bar-cancel" [class.left-align]="shouldLeftAlign">{{cancelText}}</button>',
  directives: [FORM_DIRECTIVES, NgIf, NgClass]
 })

@@ -80,6 +76,9 @@ export class SearchBar extends Ion {
      this.cancelWidth = this.cancelButton.offsetWidth;
      this.cancelButton.style.marginRight = "-" + this.cancelWidth + "px";
    }
+
+    // If the user passes in a value to the model we should left align
+    this.shouldLeftAlign = this.model && this.model.trim() != '';
  }

  /**
@@ -87,21 +86,19 @@ export class SearchBar extends Ion {
   * ControlDirective to update the value internally.
   */
  writeValue(value) {
-    this.value = value;
-    this.renderer.setElementProperty(this.elementRef, 'value', this.value);
-
+    this.model = value;
  }

-  registerOnChange(val) {
+  registerOnChange(fn) {
+    this.onChange = fn;
  }

-  registerOnTouched(val) {
+  registerOnTouched(fn) {
+    this.onTouched = fn;
  }

  inputChanged(event) {
-    this.value = event.target.value;
-    this.ngControl.valueAccessor.writeValue(this.value);
-    this.ngControl.control.updateValue(this.value);
+    this.onChange(event.target.value);
  }

  inputFocused() {
@@ -112,18 +109,19 @@ export class SearchBar extends Ion {
      this.cancelButton.style.marginRight = "0px";
    }
  }
+
  inputBlurred() {
    this.isFocused = false;
-    this.shouldLeftAlign = this.value.trim() != '';
+    this.shouldLeftAlign = this.model && this.model.trim() != '';

    if (this.cancelButton) {
      this.cancelButton.style.marginRight = "-" + this.cancelWidth + "px";
    }
  }

-  clearInput() {
-    this.value = '';
-    this.ngControl.control.updateValue('');
+  clearInput(event) {
+    this.model = '';
+    this.onChange(this.model);
  }
 }

--- a/ionic/components/search-bar/test/floating/index.ts
+++ b/ionic/components/search-bar/test/floating/index.ts
@@ -1,26 +1,26 @@
-import {NgControl, FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/angular2';
+import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/angular2';

 import {App} from 'ionic/ionic';
 import {SearchPipe} from 'ionic/components/search-bar/search-bar';

@App({
  templateUrl: 'main.html',
-  bindings: [NgControl, FormBuilder],
  directives: [FORM_DIRECTIVES]
 })
 class IonicApp {
-  constructor(fb: FormBuilder) {
-    this.form = fb.group({
-      defaultSearch: ['', Validators.required],
-      customPlaceholder: ['', Validators.required],
-      defaultCancel: ['', Validators.required],
-      customCancel: ['', Validators.required],
-      customCancelLong: ['', Validators.required],
-      customCancelAction: ['', Validators.required],
-    });
+  defaultSearch: string;
+  customPlaceholder: string;
+  defaultCancel: string;
+  customCancel: string;
+  customCancelLong: string;
+  customCancelAction: string;
+  clickedCustomAction: boolean = false;
+
+  constructor() {
+
  }
-  myCancelAction = function() {
-    console.log('myCancelAction');
-    alert("My custom action!");
+
+  myCancelAction(event, model) {
+    console.log("TODO get app property");
  }
 }
--- a/ionic/components/search-bar/test/floating/main.html
+++ b/ionic/components/search-bar/test/floating/main.html
@@ -1,21 +1,23 @@
 <ion-content>
-  <form [ng-form-model]="form">
-    <h5 padding-left padding-top> Search - Default </h5>
-    <ion-search-bar ng-control="defaultSearch" class="e2eDefaultFloatingSearchBar"></ion-search-bar>
+  <h5 padding-left padding-top> Search - Default </h5>
+  <ion-search-bar [(ng-model)]="defaultSearch" class="e2eDefaultFloatingSearchBar"></ion-search-bar>

-    <h5 padding-left> Search - Custom Placeholder </h5>
-    <ion-search-bar ng-control="customPlaceholder" placeholder="Filter" class="e2eCustomPlaceholderFloatingSearchBar"></ion-search-bar>
+  <h5 padding-left> Search - Custom Placeholder </h5>
+  <ion-search-bar [(ng-model)]="customPlaceholder" placeholder="Filter" class="e2eCustomPlaceholderFloatingSearchBar"></ion-search-bar>

-    <h5 padding-left> Search - Default Cancel Button </h5>
-    <ion-search-bar ng-control="defaultCancel" show-cancel="true" class="e2eDefaultCancelButtonFloatingSearchBar"></ion-search-bar>
+  <h5 padding-left> Search - Default Cancel Button </h5>
+  <ion-search-bar [(ng-model)]="defaultCancel" show-cancel="true" class="e2eDefaultCancelButtonFloatingSearchBar"></ion-search-bar>

-    <h5 padding-left> Search - Custom Cancel Button </h5>
-    <ion-search-bar ng-control="customCancel" show-cancel="true" cancel-text="Done" class="e2eCustomCancelButtonFloatingSearchBar"></ion-search-bar>
+  <h5 padding-left> Search - Custom Cancel Button </h5>
+  <ion-search-bar [(ng-model)]="customCancel" show-cancel="true" cancel-text="Done" class="e2eCustomCancelButtonFloatingSearchBar"></ion-search-bar>

-    <h5 padding-left> Search - Custom Cancel Button Long</h5>
-    <ion-search-bar ng-control="customCancelLong" show-cancel="true" cancel-text="I Am So Done" class="e2eCustomCancelButtonLongTextFloatingSearchBar"></ion-search-bar>
+  <h5 padding-left> Search - Custom Cancel Button Long</h5>
+  <ion-search-bar [(ng-model)]="customCancelLong" show-cancel="true" cancel-text="I Am So Done" class="e2eCustomCancelButtonLongTextFloatingSearchBar"></ion-search-bar>

-    <h5 padding-left> Search - Custom Cancel Action</h5>
-    <ion-search-bar ng-control="customCancelAction" show-cancel="true" cancel-text="Done" [cancel-action]="myCancelAction" class="e2eCustomCancelActionFloatingSearchBar"></ion-search-bar>
-  </form>
+  <h5 padding-left> Search - Custom Cancel Action</h5>
+  <ion-search-bar [(ng-model)]="customCancelAction" show-cancel="true" cancel-text="Done" [cancel-action]="myCancelAction" class="e2eCustomCancelActionFloatingSearchBar"></ion-search-bar>
+
+  <div *ng-if="clickedCustomAction">
+    Clicked custom action with input = {{customCancelAction}}
+  </div>
 </ion-content>