@angular-jz/jz
Version:
jim jz
333 lines • 13.1 kB
JavaScript
"use strict";
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);
};
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var forms_1 = require("@angular/forms");
var utility_1 = require("../../utility");
var JZSelectComponent = /** @class */ (function () {
function JZSelectComponent() {
this.placeholder = '请选择';
this.idField = 'id';
this.textField = 'text';
this.canDeSelect = true;
this.isDisabled = false;
this.change = new core_1.EventEmitter();
this._value = null;
this.isResultsShowing = false;
this.isMouseInContainer = false;
this.propagateChange = function (_) { };
this.selectedValueChange = new core_1.EventEmitter();
}
JZSelectComponent_1 = JZSelectComponent;
Object.defineProperty(JZSelectComponent.prototype, "value", {
get: function () {
return this._value;
},
set: function (value) {
if (this._value != value) {
this._value = value;
this.propagateChange(this.value);
this.change.next(this);
}
},
enumerable: true,
configurable: true
});
JZSelectComponent.prototype.registerOnChange = function (fn) {
this.propagateChange = fn;
};
JZSelectComponent.prototype.registerOnTouched = function (fn) { };
JZSelectComponent.prototype.writeValue = function (value) {
if (this.value != value) {
this.value = value;
if (value)
this.selectedValueValue = utility_1.ArrayUtility.findInArray(this.items, this.idField, value);
else
this.selectedValueValue = null;
this.selectedValueChange.emit(this.selectedValueValue);
}
};
JZSelectComponent.prototype.setDisabledState = function (isDisabled) {
this.isDisabled = isDisabled;
if (isDisabled) {
this.toggleDrop(true);
}
};
JZSelectComponent.prototype.setNullValue = function (evt) {
if (evt)
evt.stopPropagation();
this.writeValue(null);
this.toggleDrop(true);
};
JZSelectComponent.prototype.displayValue = function () {
var _this = this;
if (this.value != null && this.items != null) {
var item = this.items.find(function (item) { return item[_this.idField] == _this.value; });
if (!item) {
//setTimeout(() => { this.setNullValue(null); }, 0);
return this.placeholder;
}
else {
return item[this.textField];
}
}
else
return this.placeholder;
};
JZSelectComponent.prototype.toggleDrop = function (isHidden) {
if (this.isDisabled)
return;
this.isResultsShowing = isHidden ? !isHidden : !this.isResultsShowing;
this.highlightedValue = this.value;
if (this.isResultsShowing) {
//this.searchInput.nativeElement.focus();
this.searchInput.nativeElement.select();
if (this.highlightedValue != null)
this.doHighlight(this.findResultItemIndex(this.highlightedValue));
else
$(this.results.nativeElement).scrollTop(0);
}
};
JZSelectComponent.prototype.doHighlight = function (index) {
var high_bottom, high_top, maxHeight, visible_bottom, visible_top;
if (index > -1) {
var resultsElement = $(this.results.nativeElement);
var resultItemElement = $(this.resultItems.toArray()[index].nativeElement);
maxHeight = parseInt(resultsElement.css("maxHeight"), 10);
visible_top = resultsElement.scrollTop();
visible_bottom = maxHeight + visible_top;
high_top = resultItemElement.position().top + resultsElement.scrollTop();
high_bottom = high_top + resultItemElement.outerHeight();
if (high_bottom >= visible_bottom) {
return resultsElement.scrollTop((high_bottom - maxHeight) > 0 ? high_bottom - maxHeight : 0);
}
else if (high_top < visible_top) {
return resultsElement.scrollTop(high_top);
}
}
};
JZSelectComponent.prototype.resultItemMouseOver = function (evt, value) {
this.highlightedValue = value;
};
JZSelectComponent.prototype.resultItemMouseOut = function (evt, value) {
this.highlightedValue = null;
};
JZSelectComponent.prototype.containerEnter = function (evt) {
this.isMouseInContainer = true;
};
JZSelectComponent.prototype.containerLeave = function (evt) {
this.isMouseInContainer = false;
};
JZSelectComponent.prototype.resultsMouseWheel = function (evt) {
var delta;
if (evt)
delta = -evt.wheelDelta || evt.detail;
if (delta) {
evt.preventDefault();
if (evt.type == 'DOMMouseScroll') {
delta = delta * 40;
}
var el = evt.currentTarget;
el.scrollTop = delta + el.scrollTop;
}
};
JZSelectComponent.prototype.searchKeyDown = function (evt) {
var stroke, _ref1;
stroke = (_ref1 = evt.which) != null ? _ref1 : evt.keyCode;
//this.search_field_scale();
//if (stroke !== 8 && this.pending_backstroke) {
// this.clear_backstroke();
//}
switch (stroke) {
//case 8:
// this.backstroke_length = this.search_field.val().length;
// break;
//case 9:
// if (this.results_showing && !this.is_multiple) {
// this.result_select(evt);
// }
// this.mouse_on_container = false;
// break;
case 13:
evt.preventDefault();
this.writeValue(this.highlightedValue);
this.toggleDrop(true);
break;
case 38:
evt.preventDefault();
this.arrowUp();
break;
case 40:
evt.preventDefault();
this.arrowDown();
break;
}
};
JZSelectComponent.prototype.searchBlur = function (evt) {
if (!this.isMouseInContainer) {
this.toggleDrop(true);
}
//setTimeout(() => {
// this.toggleDrop(true);
//}, 200);
};
JZSelectComponent.prototype.resultItemClick = function (evt, id) {
this.writeValue(id);
this.toggleDrop(true);
};
JZSelectComponent.prototype.arrowDown = function () {
if (this.isResultsShowing) {
var item = this.findNextResultItem(this.highlightedValue);
if (item) {
this.highlightedValue = item[this.idField];
this.doHighlight(this.findResultItemIndex(this.highlightedValue));
}
}
else {
this.toggleDrop();
}
};
JZSelectComponent.prototype.arrowUp = function () {
if (this.isResultsShowing && this.highlightedValue != null) {
var item = this.findPrevResultItem(this.highlightedValue);
if (item) {
this.highlightedValue = item[this.idField];
this.doHighlight(this.findResultItemIndex(this.highlightedValue));
}
}
else {
this.toggleDrop();
}
};
JZSelectComponent.prototype.findResultItemIndex = function (id) {
for (var i = 0; i < this.items.length; i++) {
if (this.items[i][this.idField] == id)
return i;
}
return -1;
};
JZSelectComponent.prototype.findNextResultItem = function (id) {
var idx = this.findResultItemIndex(id);
if (idx == -1) {
if (this.items.length > 0)
return this.items[0];
else
return null;
}
else {
idx = idx + 1;
if (this.items.length > idx)
return this.items[idx];
else
return this.items[this.items.length - 1]; // return this.items[0];
}
};
JZSelectComponent.prototype.findPrevResultItem = function (id) {
var idx = this.findResultItemIndex(id);
if (idx == -1) {
if (this.items.length > 0)
return this.items[0];
else
return null;
}
else {
idx = idx - 1;
if (idx >= 0)
return this.items[idx];
else
return this.items[0]; // this.items[this.items.length - 1];
}
};
Object.defineProperty(JZSelectComponent.prototype, "selectedValue", {
get: function () {
return this.selectedValueValue;
},
//外面的值变了调用set方法
set: function (val) {
this.selectedValueValue = val;
this.selectedValueChange.emit(this.selectedValueValue);
},
enumerable: true,
configurable: true
});
__decorate([
core_1.ViewChild('search'),
__metadata("design:type", core_1.ElementRef)
], JZSelectComponent.prototype, "searchInput", void 0);
__decorate([
core_1.ViewChild('results'),
__metadata("design:type", core_1.ElementRef)
], JZSelectComponent.prototype, "results", void 0);
__decorate([
core_1.ViewChildren('resultItem'),
__metadata("design:type", core_1.QueryList)
], JZSelectComponent.prototype, "resultItems", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", String)
], JZSelectComponent.prototype, "placeholder", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", String)
], JZSelectComponent.prototype, "idField", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", String)
], JZSelectComponent.prototype, "textField", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Boolean)
], JZSelectComponent.prototype, "canDeSelect", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Boolean)
], JZSelectComponent.prototype, "isDisabled", void 0);
__decorate([
core_1.Output(),
__metadata("design:type", Object)
], JZSelectComponent.prototype, "change", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Array)
], JZSelectComponent.prototype, "items", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Object)
], JZSelectComponent.prototype, "_value", void 0);
__decorate([
core_1.Output(),
__metadata("design:type", Object)
], JZSelectComponent.prototype, "selectedValueChange", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], JZSelectComponent.prototype, "selectedValue", null);
JZSelectComponent = JZSelectComponent_1 = __decorate([
core_1.Component({
selector: 'jz-select',
templateUrl: './jz-select.component.html',
styleUrls: ['../assets/chosen.component.css'],
//styles: [require('../assets/chosen.component.css').toString()],
providers: [{
provide: forms_1.NG_VALUE_ACCESSOR,
/* tslint:disable */
useExisting: core_1.forwardRef(function () { return JZSelectComponent_1; }),
/* tslint:enable */
multi: true
}]
})
], JZSelectComponent);
return JZSelectComponent;
var JZSelectComponent_1;
}());
exports.JZSelectComponent = JZSelectComponent;
//# sourceMappingURL=jz-select.component.js.map