@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
220 lines (214 loc) • 9.11 kB
JavaScript
import { Component, forwardRef, Input, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* Generated from: rate.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class RateComponent {
constructor() {
this.read = false;
this.count = 5;
this.color = '';
this.icon = '';
this.character = '';
this.totalLevel_array = [];
this.width = '';
this.onChange = (/**
* @return {?}
*/
() => null);
this.onTouched = (/**
* @return {?}
*/
() => null);
}
/**
* @return {?}
*/
ngOnInit() {
for (let i = 0; i < this.count; i++) {
this.totalLevel_array.push({ width: '0' });
}
}
// 只读模式配置
/**
* @return {?}
*/
setStaticRating() {
/** @type {?} */
const half_star = this.chooseValue % 1;
/** @type {?} */
const int_current_level = Math.floor(this.chooseValue);
this.setChange(0, int_current_level + 1, '100%');
if (half_star > 0) {
this.totalLevel_array[int_current_level + 1]['width'] = half_star * 100 + '%';
this.setChange(int_current_level + 2, this.count, '0');
}
else {
this.setChange(int_current_level + 1, this.count, '0');
}
}
// 动态模式配置
/**
* @return {?}
*/
setDynamicRating() {
this.setChange(0, this.chooseValue + 1, '100%');
this.setChange(this.chooseValue + 1, this.count, '0');
}
/**
* @param {?} event
* @param {?=} index
* @param {?=} reset
* @return {?}
*/
hoverToggle(event, index, reset = false) {
if (this.read) {
return;
}
if (reset) {
if (this.chooseValue >= 0) {
this.setChange(0, this.chooseValue + 1, '100%');
this.setChange(this.chooseValue + 1, this.count, '0');
}
else {
this.setChange(0, this.count, '0');
}
}
else {
this.setChange(0, index + 1, '100%');
this.setChange(index + 1, this.count, '0');
}
}
// 根据mouseMove，mouseLeave,select等操作，改变颜色与是否选中
/**
* @param {?} start
* @param {?} end
* @param {?} width
* @return {?}
*/
setChange(start, end, width) {
for (let i = start; i < end; i++) {
this.totalLevel_array[i]['width'] = width;
}
}
/**
* @param {?} index
* @return {?}
*/
selectValue(index) {
if (this.read) {
return;
}
this.setChange(0, index + 1, '100%');
this.setChange(index + 1, this.count, '0');
this.chooseValue = index;
this.onChange(index + 1);
this.onTouched();
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.onChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
this.onTouched = fn;
}
/**
* @param {?} value
* @return {?}
*/
writeValue(value) {
this.chooseValue = value - 1;
if (this.read) {
this.setStaticRating();
}
else {
this.setDynamicRating();
}
}
}
RateComponent.decorators = [
{ type: Component, args: [{
selector: 'd-rate',
template: "<div class=\"devui-star-container\" (mouseleave)=\"hoverToggle($event, chooseValue, true)\">\r\n <div\r\n *ngFor=\"let item of totalLevel_array; let i = index\"\r\n class=\"devui-star-align devui-pointer\"\r\n [ngClass]=\"{ 'devui-only-read': read }\"\r\n (mouseover)=\"hoverToggle($event, i)\"\r\n (click)=\"selectValue(i)\"\r\n >\r\n <span class=\"devui-star-color {{ icon }}\">\r\n {{ character }}\r\n <svg\r\n *ngIf=\"!icon && !character\"\r\n width=\"16px\"\r\n height=\"16px\"\r\n viewBox=\"0 0 16 16\"\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 id=\"\u6536\u85CF\u661F\u6807\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <g fill=\"#E3E5E9\" id=\"Mask\">\r\n <polygon\r\n points=\"8 12.7603585 3.67376208 14.3147912 3.81523437 9.71994835 1 6.0857977 5.41367261 4.80046131 8 1 10.5863274 4.80046131 15 6.0857977 12.1847656 9.71994835 12.3262379 14.3147912\"\r\n ></polygon>\r\n </g>\r\n </g>\r\n </svg>\r\n </span>\r\n <span\r\n class=\"devui-star-color-active devui-active-star devui-star-color-{{ type }} {{ icon }}\"\r\n [style.color]=\"color\"\r\n [style.width]=\"item.width\"\r\n >\r\n {{ character }}\r\n <svg\r\n *ngIf=\"!icon && !character\"\r\n width=\"16px\"\r\n height=\"16px\"\r\n viewBox=\"0 0 16 16\"\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 id=\"\u6536\u85CF\u661F\u6807\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <g [style.fill]=\"color\" id=\"Mask\">\r\n <polygon\r\n points=\"8 12.7603585 3.67376208 14.3147912 3.81523437 9.71994835 1 6.0857977 5.41367261 4.80046131 8 1 10.5863274 4.80046131 15 6.0857977 12.1847656 9.71994835 12.3262379 14.3147912\"\r\n ></polygon>\r\n </g>\r\n </g>\r\n </svg>\r\n </span>\r\n </div>\r\n <div style=\"clear:both;\"></div>\r\n</div>\r\n",
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => RateComponent)),
multi: true
}
],
styles: [".devui-star-align{float:left;font-size:16px;margin-right:5px;position:relative}.devui-pointer{cursor:pointer}.devui-star-container{display:inline-block}.devui-star-color-active{color:#6a81ed}.devui-star-color-active svg g{fill:#6a81ed}.devui-star-color-success{color:#3dcca6}.devui-star-color-success svg g{fill:#3dcca6}.devui-star-color-warning{color:#fac20a}.devui-star-color-warning svg g{fill:#fac20a}.devui-star-color-error{color:#f66f6a}.devui-star-color-error svg g{fill:#f66f6a}.devui-active-star{position:absolute;top:0;left:0;overflow:hidden}.devui-star-color{color:#dfe1e6}.devui-star-color svg g{fill:#dfe1e6}.devui-only-read{cursor:not-allowed}"]
}] }
];
RateComponent.propDecorators = {
read: [{ type: Input }],
count: [{ type: Input }],
color: [{ type: Input }],
icon: [{ type: Input }],
character: [{ type: Input }],
type: [{ type: Input }]
};
if (false) {
/** @type {?} */
RateComponent.prototype.read;
/** @type {?} */
RateComponent.prototype.count;
/** @type {?} */
RateComponent.prototype.color;
/** @type {?} */
RateComponent.prototype.icon;
/** @type {?} */
RateComponent.prototype.character;
/** @type {?} */
RateComponent.prototype.type;
/** @type {?} */
RateComponent.prototype.totalLevel_array;
/** @type {?} */
RateComponent.prototype.chooseValue;
/** @type {?} */
RateComponent.prototype.width;
/** @type {?} */
RateComponent.prototype.onChange;
/** @type {?} */
RateComponent.prototype.onTouched;
}
/**
* @fileoverview added by tsickle
* Generated from: rate.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class RateModule {
}
RateModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, FormsModule],
exports: [RateComponent],
declarations: [RateComponent],
providers: [],
},] }
];
/**
* @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-rate.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { RateComponent, RateModule };
//# sourceMappingURL=ng-devui-rate.js.map