@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
338 lines (332 loc) • 14.6 kB
JavaScript
import { fromEvent } from 'rxjs';
import { EventEmitter, Component, ChangeDetectionStrategy, forwardRef, Renderer2, ChangeDetectorRef, Input, Output, ViewChild, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { map, filter, debounceTime } from 'rxjs/operators';
import { I18nService } from '@duoduo-oba/ng-devui/i18n';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* Generated from: search.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var SearchComponent = /** @class */ (function () {
function SearchComponent(renderer, i18n, cdr) {
this.renderer = renderer;
this.i18n = i18n;
this.cdr = cdr;
this.maxLength = Number.MAX_SAFE_INTEGER;
this.isKeyupSearch = false;
this.delay = 300;
this.searchFn = new EventEmitter();
this.onChange = (/**
* @param {?} _
* @return {?}
*/
function (_) { return null; });
this.onTouch = (/**
* @return {?}
*/
function () { return null; });
}
/**
* @return {?}
*/
SearchComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.setI18nText();
};
/**
* @param {?} fn
* @return {?}
*/
SearchComponent.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onChange = fn;
};
/**
* @param {?} fn
* @return {?}
*/
SearchComponent.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onTouch = fn;
};
/**
* @param {?=} value
* @return {?}
*/
SearchComponent.prototype.writeValue = /**
* @param {?=} value
* @return {?}
*/
function (value) {
if (value === void 0) { value = ''; }
this.renderer.setProperty(this.filterInputElement.nativeElement, 'value', value);
this.renderClearIcon();
};
/**
* @return {?}
*/
SearchComponent.prototype.setI18nText = /**
* @return {?}
*/
function () {
var _this = this;
this.i18nCommonText = this.i18n.getI18nText().common;
this.i18nSubscription = this.i18n.langChange().subscribe((/**
* @param {?} data
* @return {?}
*/
function (data) {
_this.i18nCommonText = data.common;
_this.cdr.markForCheck();
}));
};
/**
* @return {?}
*/
SearchComponent.prototype.clearText = /**
* @return {?}
*/
function () {
this.renderer.setProperty(this.filterInputElement.nativeElement, 'value', '');
if (this.onChange) {
this.onChange('');
}
this.searchFn.emit('');
this.filterInputElement.nativeElement.focus();
this.renderClearIcon();
};
/**
* @param {?} value
* @param {?=} event
* @return {?}
*/
SearchComponent.prototype.inputChange = /**
* @param {?} value
* @param {?=} event
* @return {?}
*/
function (value, event) {
this.renderClearIcon();
// 此函数不能删除，需要给filterInput.value赋值，从而控制clear的显隐。因为registerFilterChange对clear的显隐控制不起作用。
};
/**
* @param {?} term
* @return {?}
*/
SearchComponent.prototype.keyupEnter = /**
* @param {?} term
* @return {?}
*/
function (term) {
this.searchFn.emit(term);
};
/**
* @return {?}
*/
SearchComponent.prototype.registerFilterChange = /**
* @return {?}
*/
function () {
var _this = this;
this.subscription = fromEvent(this.filterInputElement.nativeElement, 'input')
.pipe(map((/**
* @param {?} e
* @return {?}
*/
function (e) { return e.target.value; })), filter((/**
* @param {?} term
* @return {?}
*/
function (term) { return true; })), debounceTime(this.delay)).subscribe((/**
* @param {?} value
* @return {?}
*/
function (value) {
_this.onChange(value);
if (_this.isKeyupSearch) {
_this.searchFn.emit(value);
}
}));
};
/**
* @return {?}
*/
SearchComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
this.registerFilterChange();
this.renderClearIcon();
};
/**
* @return {?}
*/
SearchComponent.prototype.renderClearIcon = /**
* @return {?}
*/
function () {
if (this.filterInputElement.nativeElement.value && this.lineElement && this.clearIconElement) {
this.renderer.setStyle(this.lineElement.nativeElement, 'display', 'block');
this.renderer.setStyle(this.clearIconElement.nativeElement, 'display', 'block');
}
else if (this.lineElement && this.clearIconElement) {
this.renderer.setStyle(this.lineElement.nativeElement, 'display', 'none');
this.renderer.setStyle(this.clearIconElement.nativeElement, 'display', 'none');
}
};
/**
* @return {?}
*/
SearchComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this.subscription) {
this.subscription.unsubscribe();
}
if (this.i18nSubscription) {
this.i18nSubscription.unsubscribe();
}
};
SearchComponent.decorators = [
{ type: Component, args: [{
selector: 'd-search',
template: "<div class=\"devui-search\">\r\n <input\r\n #filterInput\r\n (keyup.enter)=\"keyupEnter(filterInput.value)\"\r\n [placeholder]=\"placeholder || i18nCommonText?.searchPlaceholder\"\r\n [ngClass]=\"size ? 'devui-input-' + size : ''\"\r\n (change)=\"inputChange(filterInput.value, $event)\"\r\n (keyup)=\"inputChange(filterInput.value, $event)\"\r\n [attr.maxlength]=\"maxLength\"\r\n type=\"text\"\r\n class=\"devui-input\"\r\n [ngClass]=\"size ? 'devui-input-' + size : ''\"\r\n />\r\n <span class=\"devui-search-icon\" [ngClass]=\"size ? 'devui-search-icon-' + size : ''\" (click)=\"keyupEnter(filterInput.value)\">\r\n <svg\r\n class=\"svg-icon-search\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n width=\"14px\"\r\n height=\"14px\"\r\n viewBox=\"0 0 16 16\"\r\n version=\"1.1\"\r\n >\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <path\r\n d=\"M12.902261,10.765041 L15.5632031,13.425983 C16.1489895,14.0117695 16.1489895,14.961517 15.5632031,15.5473034 C14.9774166,16.1330898 14.0276691,16.1330898 13.4418827,15.5473034 L10.7844126,12.8898333 C9.69325562,13.5923888 8.39422915,14 7,14 C3.13400675,14 0,10.8659932 0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,8.38598771 13.5971935,9.67789492 12.902261,10.765041 L12.902261,10.765041 Z M7,12 C9.76142375,12 12,9.76142375 12,7 C12,4.23857625 9.76142375,2 7,2 C4.23857625,2 2,4.23857625 2,7 C2,9.76142375 4.23857625,12 7,12 Z\"\r\n id=\"Combined-Shape-Copy-97\"\r\n fill-rule=\"nonzero\"\r\n />\r\n </g>\r\n </svg>\r\n </span>\r\n <span #line class=\"devui-serach-line\" [ngClass]=\"size ? 'devui-serach-line-' + size : ''\"> </span>\r\n <span #clearIcon class=\"devui-search-clear\" [ngClass]=\"size ? 'devui-search-clear-' + size : ''\" (click)=\"clearText()\">\r\n <svg\r\n class=\"svg-icon-clear\"\r\n width=\"10px\"\r\n height=\"10px\"\r\n viewBox=\"0 0 10 10\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <g transform=\"translate(-1546.000000, -432.000000)\">\r\n <polygon\r\n id=\"Combined-Shape-Copy-60\"\r\n points=\"1552.36396 436.949747 1555.89949 433.414214 1554.48528 432 1550.94975 435.535534 1547.41421 432 1546 433.414214 1549.53553 436.949747 1546 440.485281 1547.41421 441.899495 1550.94975 438.363961 1554.48528 441.899495 1555.89949 440.485281\"\r\n ></polygon>\r\n </g>\r\n </g>\r\n </svg>\r\n </span>\r\n</div>\r\n",
exportAs: 'search',
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
function () { return SearchComponent; })),
multi: true
}],
styles: ["svg.svg-icon-clear>g>g,svg.svg-icon-search>g>path{fill:#252b3a}:host{display:inline-block}.devui-search{position:relative}.devui-search .devui-input{height:32px;padding:5px 60px 5px 12px;font-size:14px;line-height:1.42857143;text-overflow:ellipsis}.devui-search .devui-input-sm{height:30px;padding:5px 49px 5px 10px;font-size:12px;line-height:1.5}.devui-search .devui-input-lg{height:46px;padding:10px 71px 10px 16px;font-size:18px;line-height:1.3333333}.devui-search .icon{cursor:pointer}.devui-search .devui-search-icon{position:absolute;width:auto;pointer-events:all;cursor:pointer;height:100%;line-height:32px;padding:3px 10px;top:0;right:0;z-index:2;display:block;text-align:center}.devui-search .devui-search-icon>svg{height:14px;width:14px}.devui-search .devui-search-icon-sm{width:30px;height:30px;line-height:30px;padding:1px 10px}.devui-search .devui-search-icon-sm>svg{height:12px;width:12px}.devui-search .devui-search-icon-lg{width:46px;height:46px;line-height:46px}.devui-search .devui-search-icon-lg>svg{height:18px;width:18px}.devui-search .devui-search-clear{position:absolute;width:auto;top:0;right:32px;padding:1px 10px;pointer-events:all;cursor:pointer;height:100%;line-height:32px;font-size:14px;z-index:2}.devui-search .devui-search-clear-sm{right:30px;line-height:30px;padding:0 8px}.devui-search .devui-search-clear-lg{right:46px;line-height:46px;padding:0 10px}.devui-search .devui-serach-line{border-color:#adb0b8;position:absolute;right:32px;height:70%;top:15%;width:1px;border-left-width:1px;border-left-style:solid;line-height:32px}.devui-search .devui-serach-line-sm{line-height:30px;right:30px}.devui-search .devui-serach-line-lg{line-height:46px;right:46px}"]
}] }
];
/** @nocollapse */
SearchComponent.ctorParameters = function () { return [
{ type: Renderer2 },
{ type: I18nService },
{ type: ChangeDetectorRef }
]; };
SearchComponent.propDecorators = {
size: [{ type: Input }],
placeholder: [{ type: Input }],
maxLength: [{ type: Input }],
isKeyupSearch: [{ type: Input }],
delay: [{ type: Input }],
searchFn: [{ type: Output }],
filterInputElement: [{ type: ViewChild, args: ['filterInput', { static: true },] }],
lineElement: [{ type: ViewChild, args: ['line', { static: true },] }],
clearIconElement: [{ type: ViewChild, args: ['clearIcon', { static: true },] }]
};
return SearchComponent;
}());
if (false) {
/**
* 【可选】下拉选框尺寸
* @type {?}
*/
SearchComponent.prototype.size;
/**
* 【可选】下拉默认显示文字
* @type {?}
*/
SearchComponent.prototype.placeholder;
/** @type {?} */
SearchComponent.prototype.maxLength;
/** @type {?} */
SearchComponent.prototype.isKeyupSearch;
/** @type {?} */
SearchComponent.prototype.delay;
/** @type {?} */
SearchComponent.prototype.searchFn;
/** @type {?} */
SearchComponent.prototype.filterInputElement;
/** @type {?} */
SearchComponent.prototype.lineElement;
/** @type {?} */
SearchComponent.prototype.clearIconElement;
/** @type {?} */
SearchComponent.prototype.i18nCommonText;
/** @type {?} */
SearchComponent.prototype.i18nSubscription;
/**
* @type {?}
* @private
*/
SearchComponent.prototype.subscription;
/**
* @type {?}
* @private
*/
SearchComponent.prototype.onChange;
/**
* @type {?}
* @private
*/
SearchComponent.prototype.onTouch;
/**
* @type {?}
* @private
*/
SearchComponent.prototype.renderer;
/**
* @type {?}
* @private
*/
SearchComponent.prototype.i18n;
/**
* @type {?}
* @private
*/
SearchComponent.prototype.cdr;
}
/**
* @fileoverview added by tsickle
* Generated from: search.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var SearchModule = /** @class */ (function () {
function SearchModule() {
}
SearchModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
FormsModule
],
exports: [
SearchComponent,
],
declarations: [
SearchComponent,
]
},] }
];
return SearchModule;
}());
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ng-devui-search.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { SearchComponent, SearchModule };
//# sourceMappingURL=ng-devui-search.js.map