ionic-framework
Version:
155 lines • 6.91 kB
JavaScript
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = require('angular2/core');
var common_1 = require('angular2/common');
var ion_1 = require('../ion');
var config_1 = require('../../config/config');
var decorators_1 = require('../../config/decorators');
var icon_1 = require('../icon/icon');
var button_1 = require('../button/button');
/**
* @name Searchbar
* @module ionic
* @description
* Manages the display of a search bar which can be used to search or filter items.
*
* @usage
* ```html
* <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
* @see {@link /docs/v2/components#search Search Component Docs}
*/
var Searchbar = (function (_super) {
__extends(Searchbar, _super);
function Searchbar(elementRef, config, ngControl, renderer) {
_super.call(this, elementRef, config);
this.renderer = renderer;
this.elementRef = elementRef;
// If there is no control then we shouldn't do anything
if (!ngControl)
return;
this.ngControl = ngControl;
this.ngControl.valueAccessor = this;
}
/**
* @private
* After the view has initialized check if the searchbar has a value
* and then store that value in query
*/
Searchbar.prototype.ngAfterViewInit = function () {
// If the user passes in a value to the model we should left align
this.shouldLeftAlign = this.ngControl.value && this.ngControl.value.trim() != '';
this.query = this.ngControl.value || '';
};
/**
* @private
* Write a new value to the element.
*/
Searchbar.prototype.writeValue = function (value) {
this.query = value;
};
/**
* @private
* Set the function to be called when the control receives a change event.
*/
Searchbar.prototype.registerOnChange = function (fn) {
this.onChange = fn;
};
/**
* @private
* Set the function to be called when the control receives a touch event.
*/
Searchbar.prototype.registerOnTouched = function (fn) {
this.onTouched = fn;
};
/**
* @private
* Updates the value of the control when the searchbar input changes.
*/
Searchbar.prototype.inputChanged = function (event) {
this.writeValue(event.target.value);
this.onChange(event.target.value);
};
/**
* @private
* Sets the searchbar to focused and aligned left on input focus.
*/
Searchbar.prototype.inputFocused = function () {
this.isFocused = true;
this.shouldLeftAlign = true;
};
/**
* @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.
*/
Searchbar.prototype.inputBlurred = function () {
this.isFocused = false;
this.shouldLeftAlign = this.ngControl.value && this.ngControl.value.trim() != '';
};
/**
* @private
* Clears the input field and triggers the control change.
*/
Searchbar.prototype.clearInput = function (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.
*/
Searchbar.prototype.cancelSearchbar = function (event, query) {
this.element = this.elementRef.nativeElement.querySelector('input');
this.element.blur();
this.clearInput();
this.shouldLeftAlign = false;
this.cancelAction && this.cancelAction(event, query);
};
Searchbar = __decorate([
decorators_1.ConfigComponent({
selector: 'ion-searchbar',
defaultInputs: {
'showCancel': false,
'cancelText': 'Cancel',
'placeholder': 'Search'
},
inputs: ['cancelAction'],
host: {
'[class.searchbar-left-aligned]': 'shouldLeftAlign',
'[class.searchbar-focused]': 'isFocused',
},
template: '<div class="searchbar-input-container">' +
'<button (click)="cancelSearchbar($event, query)" clear dark class="searchbar-md-cancel"><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-clear-icon" (click)="clearInput($event)"></button>' +
'</div>' +
'<button clear *ng-if="showCancel" (click)="cancelSearchbar($event, query)" class="searchbar-ios-cancel">{{cancelText}}</button>',
directives: [common_1.FORM_DIRECTIVES, common_1.NgIf, common_1.NgClass, icon_1.Icon, button_1.Button]
}),
__metadata('design:paramtypes', [(typeof (_a = typeof core_1.ElementRef !== 'undefined' && core_1.ElementRef) === 'function' && _a) || Object, (typeof (_b = typeof config_1.Config !== 'undefined' && config_1.Config) === 'function' && _b) || Object, (typeof (_c = typeof common_1.NgControl !== 'undefined' && common_1.NgControl) === 'function' && _c) || Object, (typeof (_d = typeof core_1.Renderer !== 'undefined' && core_1.Renderer) === 'function' && _d) || Object])
], Searchbar);
return Searchbar;
var _a, _b, _c, _d;
})(ion_1.Ion);
exports.Searchbar = Searchbar;