fix(searchbar): added input for width of small searchbar

fivethree-team · May 16, 2019 · 334654b · 334654b
1 parent f095309
commit 334654b
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 9 deletions.
diff --git a/projects/core/src/lib/searchbar/searchbar.component.html b/projects/core/src/lib/searchbar/searchbar.component.html
@@ -1,11 +1,12 @@
-<ion-toolbar [@searchbarAnim]="state" (@searchbarAnim.done)="searchBarStateChange($event)" [color]="color" [ngClass]="{'small': state === 'small'}">
+<ion-toolbar [@searchbarAnim]="{value:state, params: {width: smallWidth}}"
+  (@searchbarAnim.done)="searchBarStateChange($event)" [color]="color" [ngClass]="{'small': state === 'small'}">
   <ion-buttons slot="start">
     <ng-content select="[start]"></ng-content>
 
   </ion-buttons>
-  <ion-title [@titleAnim] *ngIf="titleVisible">{{title}}</ion-title>
-  <ion-input (ionChange)="fivInputChange.emit($event)" [placeholder]="!titleVisible ? placeholder : ''" autofocus #input class="toolbar-searchbar"
-    [@titleAnim] (@titleAnim.done)="seachbarAnimDone($event,input)" *ngIf="searching">
+  <ion-title [@titleAnim] *ngIf="titleVisible && state !== 'small'">{{title}}</ion-title>
+  <ion-input (ionChange)="fivInputChange.emit($event)" [placeholder]="!titleVisible ? placeholder : ''" autofocus #input
+    class="toolbar-searchbar" [@titleAnim] (@titleAnim.done)="seachbarAnimDone($event,input)" *ngIf="searching">
   </ion-input>
 
   <ion-buttons slot="end">

diff --git a/projects/core/src/lib/searchbar/searchbar.component.ts b/projects/core/src/lib/searchbar/searchbar.component.ts
@@ -14,7 +14,7 @@ import { IonInput } from '@ionic/angular';
       transition('normal => small', [
         animate('95ms ease-in')
       ]),
-      state('small', style({ width: '120px' })),
+      state('small', style({ width: '{{width}}px' }), { params: { width: 120 } }),
       state('normal', style({ width: '100%' }))
     ]),
     trigger('titleAnim', [
@@ -33,6 +33,7 @@ export class FivSearchbar implements OnInit {
   @Input() title: string;
   @Input() placeholder: string;
   @Input() color: string;
+  @Input() smallWidth = 120;
   _small = false;
   @Input() set small(s: boolean) {
     if (s && !this._small) {
@@ -58,16 +59,16 @@ export class FivSearchbar implements OnInit {
   }
 
   shrink() {
-    
+
     this.state = 'small';
   }
   grow() {
-    
+
     this.state = 'normal';
   }
 
   openSearchbar() {
-    
+
     if (this._small) {
       this.state = 'normal';
     }

diff --git a/src/app/pages/toolbar-search/toolbar-search.page.html b/src/app/pages/toolbar-search/toolbar-search.page.html
@@ -1,4 +1,4 @@
-<fiv-searchbar #search title="Searchbar" placeholder="Search ...." (fivInputChange)="onSearchInputChanged($event)"
+<fiv-searchbar [smallWidth]="300" #search title="Searchbar" placeholder="Search ...." (fivInputChange)="onSearchInputChanged($event)"
   (fivClose)="closeSearch();" [small]="small">
   <!-- <ion-menu-button start menu="menuId"></ion-menu-button> -->
   <ion-back-button start defaultHref="home"></ion-back-button>