javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(searchbar): clean up searchbar code, add more properties

Browse Source 
added autocomplete, autocorrect, spellcheck, and type as properties
that get passed to the input.

BREAKING CHANGES:

Searchbar events now return the event, not the Searchbar.

references #6177
closes #5996
This commit is contained in:
Brandy Carney
2016-06-13 15:43:51 -04:00
parent d6b7d5dd9b
commit eb4261c323
7 changed files with 159 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/searchbar/searchbar.ios.scss
View File

@ -148,7 +148,7 @@ ion-searchbar {
// Searchbar Focused
// -----------------------------------------
.searchbar-focused {
.searchbar-has-focus {
.searchbar-ios-cancel {
flex: 0 0 auto;
@ -177,7 +177,7 @@ ion-searchbar {
}
}
.searchbar-focused .searchbar-ios-cancel {
.searchbar-has-focus .searchbar-ios-cancel {
padding-left: 8px;
}

2
src/components/searchbar/searchbar.md.scss
View File

@ -130,7 +130,7 @@ ion-searchbar {
// Searchbar Focused
// -----------------------------------------
.searchbar-focused:not(.searchbar-hide-cancel) {
.searchbar-has-focus:not(.searchbar-hide-cancel) {
.searchbar-search-icon {
display: none;
}

2
src/components/searchbar/searchbar.scss
View File

@ -46,6 +46,6 @@ ion-searchbar {
min-height: 0;
}
.searchbar-has-value.searchbar-focused .searchbar-clear-icon {
.searchbar-has-value.searchbar-has-focus .searchbar-clear-icon {
display: block;
}

230
src/components/searchbar/searchbar.ts
View File

@ -1,10 +1,7 @@
import {ElementRef, Component, Directive, Host, HostBinding, HostListener, ViewChild, Input, Output, EventEmitter, Optional, ViewEncapsulation} from '@angular/core';
import {Component, Directive, ElementRef, EventEmitter, HostBinding, Input, Optional, Output, ViewChild, ViewEncapsulation} from '@angular/core';
import {NgControl} from '@angular/common';
import {Button} from '../button/button';
import {Config} from '../../config/config';
import {Icon} from '../icon/icon';
import {Ion} from '../ion';
import {isPresent} from '../../util/util';
@ -41,39 +38,40 @@ export class SearchbarInput {
@Component({
selector: 'ion-searchbar',
host: {
'[class.searchbar-has-value]': 'value',
'[class.searchbar-has-value]': '_value',
'[class.searchbar-hide-cancel]': 'hideCancelButton'
},
template:
'<div class="searchbar-input-container">' +
'<button (click)="cancelSearchbar()" (mousedown)="cancelSearchbar()" [hidden]="hideCancelButton" clear dark class="searchbar-md-cancel">' +
'<button (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" [hidden]="hideCancelButton" clear dark class="searchbar-md-cancel">' +
'<ion-icon name="arrow-back"></ion-icon>' +
'</button>' +
'<div class="searchbar-search-icon"></div>' +
'<input [value]="value" (input)="inputChanged($event)" (blur)="inputBlurred()" (focus)="inputFocused()" class="searchbar-input" type="search" [attr.placeholder]="placeholder" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">' +
'<button clear class="searchbar-clear-icon" (click)="clearInput()" (mousedown)="clearInput()"></button>' +
'<div #searchbarIcon class="searchbar-search-icon"></div>' +
'<input [(ngModel)]="_value" [attr.placeholder]="placeholder" (input)="inputChanged($event)" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" class="searchbar-input">' +
'<button clear class="searchbar-clear-icon" (click)="clearInput($event)" (mousedown)="clearInput($event)"></button>' +
'</div>' +
'<button clear (click)="cancelSearchbar()" (mousedown)="cancelSearchbar()" [hidden]="hideCancelButton" class="searchbar-ios-cancel">{{cancelButtonText}}</button>',
'<button clear (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" [hidden]="hideCancelButton" class="searchbar-ios-cancel">{{cancelButtonText}}</button>',
directives: [SearchbarInput],
encapsulation: ViewEncapsulation.None,
encapsulation: ViewEncapsulation.None
})
export class Searchbar extends Ion {
export class Searchbar {
private _value: string|number = '';
private _tmr: any;
private _shouldBlur: boolean = true;
private inputEle: any;
private iconEle: any;
private mode: string;
/**
* @private
* @input {string} Set the the cancel button text. Default: `"Cancel"`.
*/
@ViewChild(SearchbarInput) searchbarInput: SearchbarInput;
@Input() cancelButtonText: string = 'Cancel';
/**
* @input {string} Sets the cancel button text to the value passed in
* @input {boolean} Whether to hide the cancel button or not. Default: `"false"`.
*/
@Input() cancelButtonText: string;
/**
* @input {boolean} Hides the cancel button
*/
@Input() hideCancelButton: any;
@Input() hideCancelButton: any = false;
/**
* @input {number} How long, in milliseconds, to wait to trigger the `input` event after each keystroke. Default `250`.
@ -81,70 +79,59 @@ export class Searchbar extends Ion {
@Input() debounce: number = 250;
/**
* @input {string} Sets input placeholder to the value passed in
* @input {string} Set the input's placeholder. Default `"Search"`.
*/
@Input() placeholder: string;
@Input() placeholder: string = 'Search';
/**
* @input {any} Expression to evaluate when the Searchbar input has changed including cleared
* @input {string} Set the input's autocomplete property. Values: `"on"`, `"off"`. Default `"off"`.
*/
@Input() ngModel: any;
@Input() autocomplete: string;
/**
* @output {event} When the Searchbar input has changed including cleared
* @input {string} Set the input's autocorrect property. Values: `"on"`, `"off"`. Default `"off"`.
*/
@Output() ionInput: EventEmitter<Searchbar> = new EventEmitter();
@Input() autocorrect: string;
/**
* @output {event} When the Searchbar input has blurred
* @input {string|boolean} Set the input's spellcheck property. Values: `true`, `false`. Default `false`.
*/
@Output() ionBlur: EventEmitter<Searchbar> = new EventEmitter();
@Input() spellcheck: string|boolean;
/**
* @output {event} When the Searchbar input has focused
* @input {string} Set the type of the input. Values: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"`. Default `"search"`.
*/
@Output() ionFocus: EventEmitter<Searchbar> = new EventEmitter();
@Input() type: string = 'search';
/**
* @output {event} When the cancel button is clicked
* @output {event} When the Searchbar input has changed including cleared.
*/
@Output() ionCancel: EventEmitter<Searchbar> = new EventEmitter();
@Output() ionInput: EventEmitter<UIEvent> = new EventEmitter();
/**
* @output {event} When the clear input button is clicked
* @output {event} When the Searchbar input has blurred.
*/
@Output() ionClear: EventEmitter<Searchbar> = new EventEmitter();
@Output() ionBlur: EventEmitter<UIEvent> = new EventEmitter();
/**
* @output {event} When the Searchbar input has focused.
*/
@Output() ionFocus: EventEmitter<UIEvent> = new EventEmitter();
/**
* @output {event} When the cancel button is clicked.
*/
@Output() ionCancel: EventEmitter<UIEvent> = new EventEmitter();
/**
* @output {event} When the clear input button is clicked.
*/
@Output() ionClear: EventEmitter<UIEvent> = new EventEmitter();
/**
* @private
*/
value: string = '';
/**
* @private
*/
blurInput: boolean = true;
/**
* @private
*/
inputElement: any;
/**
* @private
*/
searchIconElement: any;
/**
* @private
*/
mode: string;
/**
* @private
*/
@HostBinding('class.searchbar-focused') isFocused: boolean;
@HostBinding('class.searchbar-has-focus') isFocused: boolean;
/**
* @private
@ -156,14 +143,49 @@ export class Searchbar extends Ion {
private _config: Config,
@Optional() ngControl: NgControl
) {
super(_elementRef);
// If the user passed a ngControl we need to set the valueAccessor
if (ngControl) {
ngControl.valueAccessor = this;
}
}
/**
* @private
*/
@ViewChild(SearchbarInput)
private set _searchbarInput(searchbarInput: SearchbarInput) {
this.inputEle = searchbarInput.elementRef.nativeElement;
// By defalt set autocomplete="off" unless specified by the input
let autoComplete = (this.autocomplete === '' || this.autocomplete === 'on') ? 'on' : this._config.get('autocomplete', 'off');
this.inputEle.setAttribute('autocomplete', autoComplete);
// by default set autocorrect="off" unless specified by the input
let autoCorrect = (this.autocorrect === '' || this.autocorrect === 'on') ? 'on' : this._config.get('autocorrect', 'off');
this.inputEle.setAttribute('autocorrect', autoCorrect);
// by default set spellcheck="false" unless specified by the input
let spellCheck = (this.spellcheck === '' || this.spellcheck === 'true' || this.spellcheck === true) ? true : this._config.getBoolean('spellcheck', false);
this.inputEle.setAttribute('spellcheck', spellCheck);
// by default set type="search" unless specified by the input
this.inputEle.setAttribute('type', this.type);
}
@ViewChild('searchbarIcon') _searchbarIcon: ElementRef;
/**
* @input {string} Set the input value.
*/
@Input()
get value() {
return this._value;
}
set value(val) {
this._value = val;
}
/**
* @private
* On Initialization check for attributes
@ -176,18 +198,7 @@ export class Searchbar extends Ion {
this.hideCancelButton = (hideCancelButton === '' || hideCancelButton === 'true');
}
this.cancelButtonText = this.cancelButtonText || 'Cancel';
this.placeholder = this.placeholder || 'Search';
if (this.ngModel) this.value = this.ngModel;
this.onChange(this.value);
this.shouldLeftAlign = this.value && this.value.trim() !== '';
// Using querySelector instead of searchbarInput because at this point it doesn't exist
this.inputElement = this._elementRef.nativeElement.querySelector('.searchbar-input');
this.searchIconElement = this._elementRef.nativeElement.querySelector('.searchbar-search-icon');
this.setElementLeft();
this.shouldLeftAlign = this._value && this._value.toString().trim() !== '';
}
/**
@ -195,13 +206,8 @@ export class Searchbar extends Ion {
* After View Initialization check the value
*/
ngAfterViewInit() {
// If the user passes an undefined variable to ngModel this will warn
// and set the value to an empty string
if (!isPresent(this.value)) {
console.warn('Searchbar was passed an undefined value in ngModel. Please make sure the variable is defined.');
this.value = '';
this.onChange(this.value);
}
this.iconEle = this._searchbarIcon.nativeElement;
this.setElementLeft();
}
/**
@ -213,8 +219,8 @@ export class Searchbar extends Ion {
if (this.mode !== 'ios') return;
if (this.shouldLeftAlign) {
this.inputElement.removeAttribute('style');
this.searchIconElement.removeAttribute('style');
this.inputEle.removeAttribute('style');
this.iconEle.removeAttribute('style');
} else {
this.addElementLeft();
}
@ -237,11 +243,11 @@ export class Searchbar extends Ion {
// Set the input padding left
let inputLeft = 'calc(50% - ' + (textWidth / 2) + 'px)';
this.inputElement.style.paddingLeft = inputLeft;
this.inputEle.style.paddingLeft = inputLeft;
// Set the icon margin left
let iconLeft = 'calc(50% - ' + ((textWidth / 2) + 30) + 'px)';
this.searchIconElement.style.marginLeft = iconLeft;
this.iconEle.style.marginLeft = iconLeft;
}
/**
@ -253,9 +259,9 @@ export class Searchbar extends Ion {
clearTimeout(this._tmr);
this._tmr = setTimeout(() => {
this.value = value;
this.onChange(value);
this.ionInput.emit(this);
this._value = value;
this.onChange(this._value);
this.ionInput.emit(ev);
}, Math.round(this.debounce));
}
@ -263,8 +269,8 @@ export class Searchbar extends Ion {
* @private
* Sets the Searchbar to focused and aligned left on input focus.
*/
inputFocused() {
this.ionFocus.emit(this);
inputFocused(ev: UIEvent) {
this.ionFocus.emit(ev);
this.isFocused = true;
this.shouldLeftAlign = true;
@ -276,18 +282,18 @@ export class Searchbar extends Ion {
* 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.
*/
inputBlurred() {
// blurInput determines if it should blur
inputBlurred(ev: UIEvent) {
// _shouldBlur determines if it should blur
// if we are clearing the input we still want to stay focused in the input
if (this.blurInput === false) {
this.searchbarInput.elementRef.nativeElement.focus();
this.blurInput = true;
if (this._shouldBlur === false) {
this.inputEle.focus();
this._shouldBlur = true;
return;
}
this.ionBlur.emit(this);
this.ionBlur.emit(ev);
this.isFocused = false;
this.shouldLeftAlign = this.value && this.value.trim() !== '';
this.shouldLeftAlign = this._value && this._value.toString().trim() !== '';
this.setElementLeft();
}
@ -295,16 +301,16 @@ export class Searchbar extends Ion {
* @private
* Clears the input field and triggers the control change.
*/
clearInput() {
this.ionClear.emit(this);
clearInput(ev: UIEvent) {
this.ionClear.emit(ev);
if (isPresent(this.value) && this.value !== '') {
this.value = '';
this.onChange(this.value);
this.ionInput.emit(this);
if (isPresent(this._value) && this._value !== '') {
this._value = '';
this.onChange(this._value);
this.ionInput.emit(ev);
}
this.blurInput = false;
this._shouldBlur = false;
}
/**
@ -313,19 +319,19 @@ 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() {
this.ionCancel.emit(this);
cancelSearchbar(ev: UIEvent) {
this.ionCancel.emit(ev);
this.clearInput();
this.blurInput = true;
this.clearInput(ev);
this._shouldBlur = true;
}
/**
* @private
* Write a new value to the element.
*/
writeValue(value: any) {
this.value = value;
writeValue(val: any) {
this._value = val;
}
/**

4
src/components/searchbar/searchbar.wp.scss
View File

@ -115,7 +115,7 @@ ion-searchbar {
// Searchbar Focused
// -----------------------------------------
.searchbar-focused .searchbar-input-container {
.searchbar-has-focus .searchbar-input-container {
border-color: $searchbar-wp-border-color-focused;
}
@ -158,7 +158,7 @@ ion-searchbar {
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
ion-searchbar[#{$color-name}].searchbar-focused .searchbar-input-container {
ion-searchbar[#{$color-name}].searchbar-has-focus .searchbar-input-container {
border-color: $color-base;
}

41
src/components/searchbar/test/floating/index.ts
View File

@ -1,4 +1,4 @@
import {Component} from '@angular/core';
import {Component, ChangeDetectorRef} from '@angular/core';
import {FormBuilder, Validators, Control, ControlGroup} from '@angular/common';
import {ionicBootstrap} from '../../../../../src';
@ -8,27 +8,44 @@ import {ionicBootstrap} from '../../../../../src';
})
class E2EApp {
defaultSearch: string = 'test';
customPlaceholder: string = '';
customPlaceholder: number = 2;
defaultCancel: string = '';
onClearSearchbar(searchbar) {
console.log("ionClear", searchbar.value);
isAutocorrect: string = 'on';
isAutocomplete: string = 'on';
isSpellcheck: boolean = true;
constructor(private changeDetectorRef: ChangeDetectorRef) {
}
onCancelSearchbar(searchbar) {
console.log("ionCancel", searchbar.value);
onClearSearchbar(ev: any) {
console.log("ionClear", ev.target.value);
}
triggerInput(searchbar) {
console.log("ionInput", searchbar.value);
onCancelSearchbar(ev: any) {
console.log("ionCancel", ev.target.value);
}
inputBlurred(searchbar) {
console.log("ionBlur", searchbar.value);
triggerInput(ev: any) {
console.log("ionInput", ev.target.value);
}
inputFocused(searchbar) {
console.log("ionFocus", searchbar.value);
inputBlurred(ev: any) {
console.log("ionBlur", ev.target.value);
}
inputFocused(ev: any) {
console.log("ionFocus", ev.target.value);
}
ngAfterViewInit() {
this.customPlaceholder = 33;
this.changeDetectorRef.detectChanges();
}
changeValue() {
this.defaultSearch = "changed";
}
}

8
src/components/searchbar/test/floating/main.html
View File

@ -7,14 +7,14 @@
</p>
<h5 padding-left> Search - Custom Placeholder </h5>
<ion-searchbar [(ngModel)]="customPlaceholder" (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" placeholder="Filter Schedules" class="e2eCustomPlaceholderFloatingSearchbar"></ion-searchbar>
<ion-searchbar [autocorrect]="isAutocorrect" [autocomplete]="isAutocomplete" [spellcheck]="isSpellcheck" type="number" [(ngModel)]="customPlaceholder" (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" placeholder="Filter Schedules" class="e2eCustomPlaceholderFloatingSearchbar"></ion-searchbar>
<p padding-left>
customPlaceholder: <b>{{ customPlaceholder }}</b>
</p>
<h5 padding-left> Search - Hide Cancel Button </h5>
<ion-searchbar [(ngModel)]="defaultCancel" (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" hideCancelButton class="e2eDefaultCancelButtonFloatingSearchbar"></ion-searchbar>
<ion-searchbar autocorrect="off" autocomplete="off" spellcheck="true" type="text" [(ngModel)]="defaultCancel" (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" hideCancelButton class="e2eDefaultCancelButtonFloatingSearchbar"></ion-searchbar>
<p padding-left>
defaultCancel: <b>{{ defaultCancel }}</b>
@ -22,4 +22,8 @@
<h5 padding-left> Search - Custom Cancel Button Danger </h5>
<ion-searchbar (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" cancelButtonText="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchbar" danger></ion-searchbar>
<p padding>
<button block (click)="changeValue()">Change Value</button>
</p>
</ion-content>