jpush-ui
Version:
极光大数据前端Angular组件（^6.1.0）
179 lines • 12.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var SelectComponent = /** @class */ (function () {
function SelectComponent() {
// pass
this.key = 'dd' + ('' + Math.random()).substr(2);
this.enabled = true;
this.maxHeight = 200;
this.useEffect = true;
this.iconCls = 'icon-jui-down2';
this.height = 30;
// 这个别用
this.selectedChange = new core_1.EventEmitter();
this.selectChange = new core_1.EventEmitter();
}
Object.defineProperty(SelectComponent.prototype, "dataSrc", {
set: function (data) {
if (!data) {
return;
}
this._dataSrc = this.simplyFormatDataSrc(data);
},
enumerable: true,
configurable: true
});
;
Object.defineProperty(SelectComponent.prototype, "selected", {
set: function (value) {
this._selected = value;
// 修改displayName
if (this._dataSrc) {
var len = this._dataSrc.length;
for (var i = 0; i < len; i++) {
var item = this._dataSrc[i];
if (!item) {
continue;
}
if (value === item.value) {
if (!this.displayName) {
this._displayName = this.formatName(item.name);
}
this.selectedItem = item;
return;
}
}
}
},
enumerable: true,
configurable: true
});
SelectComponent.prototype.ngOnInit = function () {
this._displayName = this.displayName;
if (this._dataSrc) {
if (this._selected) {
var len = this._dataSrc.length;
for (var i = 0; i < len; i++) {
var item = this._dataSrc[i];
if (item.value === this._selected) {
if (!this.displayName && !this.defaultName) {
this._displayName = this.formatName(item.name);
}
this.selectedItem = item;
break;
}
}
}
else {
if (this._dataSrc.length > 0) {
if (!this.displayName && !this.defaultName) {
this._displayName = this.formatName(this._dataSrc[0].name) || '-选择-';
}
this._selected = this._dataSrc[0].value || '';
}
}
}
};
SelectComponent.prototype.valueSelected = function (item) {
if (!this.displayName) {
this._displayName = this.formatName(item.name);
}
if (this.selectedItem !== item) {
this.selectedItem = item;
this.selectChange.emit(item);
this.selectedChange.emit(item.value);
}
};
SelectComponent.prototype.getDropdownVisible = function (value) {
// 注意！删掉此方法，dropdown组件的下拉框将不会消失。
// 由于pager组件引用了此组件，且pager组件采用了ChangeDetection策略，接管了ng的dom更新，
// 所以要手动执行一下dropdown组件里的方法，通过zone的暴力检测来触发dropdown组件里的dom更新。
};
SelectComponent.prototype.iconClicked = function (event) {
// if (!this.enabled) {
// event.stopPropagation();
// }
};
SelectComponent.prototype.simplyFormatDataSrc = function (data) {
var key = this.srcKey;
if (!data) {
return null;
}
return data.map(function (item) {
if (!item) {
return;
}
var value = item;
var name = item.name || item.label || item[key] || item;
if (key) {
value = item[key];
}
else {
if (item.id !== undefined) {
value = item.id;
}
else if (item.value !== undefined) {
value = item.value;
}
else {
value = name;
}
}
var result = {
value: value,
label: name,
name: name,
color: item.color
};
// result['command'] = () => this.ValueChange(result);
if (typeof item === 'object') {
result['data'] = item; // 原值
}
return result;
});
};
SelectComponent.prototype.formatName = function (name) {
if (!this.maxWordCnt) {
return name;
}
else {
if (name.length > this.maxWordCnt) {
return name.substr(0, this.maxWordCnt) + '...';
}
else {
return name;
}
}
};
SelectComponent.decorators = [
{ type: core_1.Component, args: [{
selector: 'jui-select',
template: "\n <div class=\"jui-select-wrap\">\n <jui-dropdown trigger=\"click\" [dataSource]=\"_dataSrc\"\n [width]=\"width || minWidth\"\n (selectChange)=\"valueSelected($event)\"\n (getDropdownVisible)=\"getDropdownVisible($event)\"\n [maxHeight]=\"maxHeight\">\n <button jui-btn \n [disabled]=\"!enabled\"\n [class.width.px]=\"width\"\n [class.minWidth.px]=\"minWidth\"\n [class.height.px]=\"height\"\n btnEffect=\"useEffect?'spread':''\">\n <span class=\"txt\">\n {{_displayName || defaultName || '--'}}\n </span>\n <i class=\"iconfont\" [ngClass]=\"iconCls\" \n (click)=\"iconClicked($event)\"></i>\n </button>\n </jui-dropdown>\n </div>\n ",
styles: ["\n @font-face {\n font-family: 'iconfont';\n /* project id 290315 */\n src: url(\"//at.alicdn.com/t/font_290315_x4r2fph1yvutbj4i.eot\");\n src: url(\"//at.alicdn.com/t/font_290315_x4r2fph1yvutbj4i.eot?#iefix\") format(\"embedded-opentype\"), url(\"//at.alicdn.com/t/font_290315_x4r2fph1yvutbj4i.woff\") format(\"woff\"), url(\"//at.alicdn.com/t/font_290315_x4r2fph1yvutbj4i.ttf\") format(\"truetype\"), url(\"//at.alicdn.com/t/font_290315_x4r2fph1yvutbj4i.svg#iconfont\") format(\"svg\"); }\n\n .iconfont {\n display: inline-block;\n vertical-align: baseline;\n font-family: \"iconfont\" !important;\n font-style: normal;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale; }\n\n .icon-jui-alert:before {\n content: \"\\e600\"; }\n\n .icon-jui-search:before {\n content: \"\\e630\"; }\n\n .icon-jui-paper3:before {\n content: \"\\e652\"; }\n\n .icon-jui-setting:before {\n content: \"\\e602\"; }\n\n .icon-jui-left2:before {\n content: \"\\e697\"; }\n\n .icon-jui-wrong:before {\n content: \"\\e69a\"; }\n\n .icon-jui-up2:before {\n content: \"\\e6a5\"; }\n\n .icon-jui-down2:before {\n content: \"\\e6a6\"; }\n\n .icon-jui-right2:before {\n content: \"\\e6a7\"; }\n\n .icon-jui-correct2:before {\n content: \"\\e627\"; }\n\n .icon-jui-qq:before {\n content: \"\\e63a\"; }\n\n .icon-jui-email:before {\n content: \"\\e62a\"; }\n\n .icon-jui-edit:before {\n content: \"\\e686\"; }\n\n .icon-jui-download2:before {\n content: \"\\e714\"; }\n\n .icon-jui-speaker:before {\n content: \"\\e85c\"; }\n\n .icon-jui-add:before {\n content: \"\\e609\"; }\n\n .icon-jui-msg:before {\n content: \"\\e613\"; }\n\n .icon-jui-minus:before {\n content: \"\\e601\"; }\n\n .icon-jui-up:before {\n content: \"\\e658\"; }\n\n .icon-jui-letter-open:before {\n content: \"\\e61d\"; }\n\n .icon-jui-down:before {\n content: \"\\ed22\"; }\n\n .icon-jui-info:before {\n content: \"\\e685\"; }\n\n .icon-jui-cross2:before {\n content: \"\\e6b4\"; }\n\n .icon-jui-paper2:before {\n content: \"\\e71e\"; }\n\n .icon-jui-loading:before {\n content: \"\\eee3\"; }\n\n .icon-jui-road-sign:before {\n content: \"\\e604\"; }\n\n .icon-jui-left:before {\n content: \"\\e66a\"; }\n\n .icon-jui-letter:before {\n content: \"\\e605\"; }\n\n .icon-jui-right:before {\n content: \"\\e64d\"; }\n\n .icon-jui-back-top:before {\n content: \"\\e628\"; }\n\n .icon-jui-dropdown:before {\n content: \"\\e75a\"; }\n\n .icon-jui-down3:before {\n content: \"\\e629\"; }\n\n .icon-jui-alarm:before {\n content: \"\\e6c2\"; }\n\n .icon-jui-paper:before {\n content: \"\\e612\"; }\n\n .icon-jui-cross:before {\n content: \"\\e6b0\"; }\n\n .icon-jui-correct:before {\n content: \"\\e6b3\"; }\n\n .icon-jui-up3:before {\n content: \"\\eee4\"; }\n\n .icon-jui-username:before {\n content: \"\\e670\"; }\n\n .icon-jui-password:before {\n content: \"\\e615\"; }\n\n .icon-jui-slideLeft:before {\n content: \"\\e603\"; }\n\n .icon-jui-slideRight:before {\n content: \"\\e641\"; }\n\n /* icon Animate */\n .icon-doTurn {\n -webkit-animation: doTurn 1s infinite linear;\n animation: doTurn 1s infinite linear; }\n\n @-webkit-keyframes doTurn {\n 0% {\n -webkit-transform-origin: 50% 50%;\n -webkit-transform: rotate(0deg); }\n to {\n -webkit-transform-origin: 50% 50%;\n -webkit-transform: rotate(1turn); } }\n\n @keyframes doTurn {\n 0% {\n transform-origin: 50% 50%;\n transform: rotate(0deg); }\n to {\n transform-origin: 50% 50%;\n transform: rotate(1turn); } }\n jui-select .jui-select-wrap {\n display: inline-block; }\n jui-select .jui-select-wrap .jui-btn {\n border: 1px #bcc1cc solid;\n color: #5e6166;\n text-align: left;\n padding-right: 10px;\n padding-left: 10px; }\n jui-select .jui-select-wrap .jui-btn:hover {\n color: #108ee9; }\n jui-select .jui-select-wrap .jui-btn:disabled {\n color: #5e6166; }\n jui-select .jui-select-wrap .jui-btn .iconfont {\n top: 50%;\n right: 8px;\n position: static; }\n jui-select .jui-select-wrap .jui-btn:before {\n content: \" \";\n display: table; }\n jui-select .jui-select-wrap .ui-dropdown {\n overflow-y: auto;\n border: 1px #eee solid;\n box-shadow: -2px 2px 6px #eee; }\n jui-select .jui-select-wrap .dropdown-menu {\n max-height: 300px;\n overflow: hidden;\n padding: 0; }\n jui-select .jui-select-wrap .dropdown-menu .dropdown-item {\n padding: 5px 0;\n text-align: center; }\n "],
encapsulation: core_1.ViewEncapsulation.None
},] },
];
/** @nocollapse */
SelectComponent.ctorParameters = function () { return []; };
SelectComponent.propDecorators = {
"srcKey": [{ type: core_1.Input },],
"enabled": [{ type: core_1.Input },],
"maxHeight": [{ type: core_1.Input },],
"useEffect": [{ type: core_1.Input },],
"iconCls": [{ type: core_1.Input },],
"dataSrc": [{ type: core_1.Input },],
"defaultName": [{ type: core_1.Input },],
"displayName": [{ type: core_1.Input },],
"height": [{ type: core_1.Input },],
"width": [{ type: core_1.Input },],
"minWidth": [{ type: core_1.Input },],
"maxWordCnt": [{ type: core_1.Input },],
"selected": [{ type: core_1.Input, args: ['selected',] },],
"selectedChange": [{ type: core_1.Output },],
"selectChange": [{ type: core_1.Output },],
};
return SelectComponent;
}());
exports.SelectComponent = SelectComponent;
//# sourceMappingURL=select.component.js.map