jpush-ui
Version:
极光大数据前端Angular组件（^6.1.0）
191 lines • 18.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var ButtonComponent = /** @class */ (function () {
function ButtonComponent(elementRef, renderer2) {
this.elementRef = elementRef;
this.renderer2 = renderer2;
this._btnType = '';
this._btnShape = '';
this._btnSize = '';
this._btnLoading = false;
this.prefixCls = 'jui-btn-';
this.hostCls = [];
this.isClicked = false;
this.hostEl = this.elementRef.nativeElement;
this.renderer2.addClass(this.hostEl, 'jui-btn');
}
Object.defineProperty(ButtonComponent.prototype, "innerIElement", {
// 判断按钮内是否有图标
get:
// 判断按钮内是否有图标
function () {
return this.hostEl.querySelector('i');
},
enumerable: true,
configurable: true
});
Object.defineProperty(ButtonComponent.prototype, "btnType", {
get: function () {
return this._btnType;
},
set: function (value) {
if (!!value && (value === 'primary' || value === 'dashed'
|| value === 'danger')) {
this._btnType = value;
}
this.setHostCls();
},
enumerable: true,
configurable: true
});
Object.defineProperty(ButtonComponent.prototype, "btnSize", {
get: function () {
return this._btnSize;
},
set: function (value) {
if (!!value) {
if (value === 'small') {
this._btnSize = 'sm';
}
else if (value === 'large') {
this._btnSize = 'lg';
}
}
this.setHostCls();
},
enumerable: true,
configurable: true
});
Object.defineProperty(ButtonComponent.prototype, "btnShape", {
get: function () {
return this._btnShape;
},
set: function (value) {
if (!!value && (value === 'circle')) {
this._btnShape = value;
}
this.setHostCls();
},
enumerable: true,
configurable: true
});
Object.defineProperty(ButtonComponent.prototype, "btnLoading", {
get: function () {
return this._btnLoading;
},
set: function (value) {
if (value === true) {
this._btnLoading = value;
}
else {
this._btnLoading = false;
}
this.setHostCls();
this.setIconDisplay();
},
enumerable: true,
configurable: true
});
Object.defineProperty(ButtonComponent.prototype, "btnEffect", {
get: function () {
return this._btnEffect;
},
set: function (value) {
// 目前只支持扩散和水波纹两种特效，默认不开启特效
if (!!value && (value === 'spread' || value === 'ripple')) {
this._btnEffect = value;
}
},
enumerable: true,
configurable: true
});
ButtonComponent.prototype.ngAfterContentInit = function () {
// 将此图标缓存起来
this._innerIElement = this.innerIElement;
if (this._innerIElement &&
this.hostEl.children.length === 1 &&
(this._innerIElement.isEqualNode(this.hostEl.children[0]))) {
this.setIconDisplay();
}
};
// toggle animation
ButtonComponent.prototype.onClick =
// toggle animation
function (event) {
var _this = this;
if (!this._btnEffect) {
return;
}
// 水波纹特效
if (this._btnEffect === 'ripple') {
var size = Math.max(this.hostEl.offsetWidth, this.hostEl.offsetHeight);
var eventTop = event.offsetY || (event.clientY - this.hostEl.getBoundingClientRect().top);
var eventLeft = event.offsetX || (event.clientX - this.hostEl.getBoundingClientRect().left);
var styleMap_1 = {
top: eventTop - size / 2,
left: eventLeft - size / 2,
width: size,
height: size
};
Object.keys(styleMap_1).forEach(function (key) {
_this.renderer2.setStyle(_this.rippleCoverEl.nativeElement, key, styleMap_1[key] + 'px');
});
}
this.isClicked = true;
this.setHostCls();
setTimeout(function () {
_this.isClicked = false;
_this.setHostCls();
}, 300);
};
ButtonComponent.prototype.setHostCls = function () {
var _this = this;
this.hostCls.forEach(function (className) {
_this.renderer2.removeClass(_this.hostEl, className);
});
this.hostCls = [
this._btnType && this.prefixCls + this._btnType,
this._btnShape && this.prefixCls + this._btnShape,
this._btnSize && this.prefixCls + this._btnSize,
this._btnLoading && this.prefixCls + 'loading',
this.isClicked && this.prefixCls + this._btnEffect
].filter(function (item) {
return !!item;
});
// 无法直接添加样式字符串，因为此方法是通过 el.classList.add(name) 方式添加的
this.hostCls.forEach(function (className) {
_this.renderer2.addClass(_this.hostEl, className);
});
};
ButtonComponent.prototype.setIconDisplay = function () {
if (this._innerIElement) {
this.renderer2.setStyle(this._innerIElement, 'display', this._btnLoading ? 'none' : 'inline-block');
}
};
ButtonComponent.decorators = [
{ type: core_1.Component, args: [{
selector: '[jui-btn]',
template: "\n <span #rippleCover class=\"btn-ripple-cover\"\n *ngIf=\"_btnEffect==='ripple'\"></span>\n <i class=\"iconfont icon-jui-loading icon-doTurn\"\n *ngIf=\"_btnLoading\"></i>\n <ng-content></ng-content>\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 @charset \"UTF-8\";\n /* \u9ED8\u8BA4\u6309\u94AE */\n .jui-btn {\n display: inline-block;\n margin-bottom: 0;\n font-weight: 500;\n text-align: center;\n cursor: pointer;\n background-image: none;\n border: 1px solid #d9d9d9;\n white-space: nowrap;\n line-height: 1.5;\n padding: 0 15px;\n font-size: 12px;\n border-radius: 4px;\n height: 28px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);\n transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);\n position: relative;\n color: rgba(0, 0, 0, 0.65);\n background-color: #fff;\n /* \u57FA\u672C\u6309\u94AE */\n /* \u865A\u7EBF\u6309\u94AE */\n /* \u5371\u9669\u6309\u94AE */\n /* loading */\n /* \u5706\u5708 */\n /* \u7981\u7528\u6309\u94AE */\n /* \u6309\u94AE\u7279\u6548-\u6269\u6563 */\n /* \u6309\u94AE\u7279\u6548-\u6C34\u6CE2\u7EB9 */\n /* \u8FC7\u6EE4\u6C34\u6CE2\u7EB9\u5B9A\u4F4D\u4E8B\u4EF6 */ }\n .jui-btn:before {\n position: absolute;\n top: -1px;\n left: -1px;\n bottom: -1px;\n right: -1px;\n background: #fff;\n opacity: .35;\n content: \"\";\n border-radius: inherit;\n z-index: 1;\n -webkit-transition: opacity .2s;\n transition: opacity .2s;\n pointer-events: none;\n display: none; }\n .jui-btn:focus, .jui-btn:hover {\n color: #108ee9;\n background-color: #fff;\n border-color: #108ee9; }\n .jui-btn.active, .jui-btn:active {\n color: #0e77ca;\n background-color: #fff;\n border-color: #0e77ca; }\n .jui-btn.jui-btn-lg {\n padding: 0 15px;\n font-size: 14px;\n border-radius: 4px;\n height: 32px; }\n .jui-btn.jui-btn-sm {\n padding: 0 7px;\n font-size: 12px;\n border-radius: 4px;\n height: 22px; }\n .jui-btn.jui-btn-primary {\n color: #fff;\n background-color: #108ee9;\n border-color: #108ee9; }\n .jui-btn.jui-btn-primary:focus, .jui-btn.jui-btn-primary:hover {\n color: #fff;\n background-color: #49a9ee;\n border-color: #49a9ee; }\n .jui-btn.jui-btn-primary.active, .jui-btn.jui-btn-primary:active {\n color: #fff;\n background-color: #0e77ca;\n border-color: #0e77ca; }\n .jui-btn.jui-btn-dashed {\n color: rgba(0, 0, 0, 0.65);\n background-color: #fff;\n border-color: #d9d9d9;\n border-style: dashed; }\n .jui-btn.jui-btn-dashed:focus, .jui-btn.jui-btn-dashed:hover {\n color: #108ee9;\n background-color: #fff;\n border-color: #108ee9; }\n .jui-btn.jui-btn-dashed.active, .jui-btn.jui-btn-dashed:active {\n color: #0e77ca;\n background-color: #fff;\n border-color: #0e77ca; }\n .jui-btn.jui-btn-danger {\n color: #f04134;\n background-color: #f7f7f7;\n border-color: #d9d9d9; }\n .jui-btn.jui-btn-danger:focus, .jui-btn.jui-btn-danger:hover {\n color: #fff;\n background-color: #f04134;\n border-color: #f04134; }\n .jui-btn.jui-btn-danger.active, .jui-btn.jui-btn-danger:active {\n color: #fff;\n background-color: #d73435;\n border-color: #d73435; }\n .jui-btn.jui-btn.jui-btn-loading {\n position: relative; }\n .jui-btn.jui-btn.jui-btn-loading:before {\n display: block; }\n .jui-btn.jui-btn.jui-btn-loading .icon-loading {\n display: inline-block;\n -webkit-animation: loadingCircle 1s infinite linear;\n animation: loadingCircle 1s infinite linear; }\n .jui-btn.jui-btn-circle {\n width: 28px;\n padding: 0;\n font-size: 14px;\n border-radius: 50%;\n height: 28px; }\n .jui-btn.jui-btn-circle.jui-btn-lg {\n width: 32px;\n padding: 0;\n font-size: 16px;\n border-radius: 50%;\n height: 32px; }\n .jui-btn.jui-btn-circle.jui-btn-sm {\n width: 22px;\n padding: 0;\n font-size: 12px;\n border-radius: 50%;\n height: 22px; }\n .jui-btn.disabled, .jui-btn[disabled] {\n color: rgba(0, 0, 0, 0.25);\n background-color: #f7f7f7;\n border-color: #d9d9d9;\n cursor: not-allowed; }\n .jui-btn.disabled:focus, .jui-btn.disabled:hover, .jui-btn.disabled.active, .jui-btn.disabled:active, .jui-btn[disabled]:focus, .jui-btn[disabled]:hover, .jui-btn[disabled].active, .jui-btn[disabled]:active {\n color: rgba(0, 0, 0, 0.25);\n background-color: #f7f7f7;\n border-color: #d9d9d9; }\n .jui-btn.jui-btn-spread:before {\n content: \"\";\n position: absolute;\n top: -1px;\n left: -1px;\n bottom: -1px;\n right: -1px;\n border-radius: inherit;\n border: 0 solid #108ee9;\n opacity: .4;\n -webkit-animation: effectSpread .4s;\n animation: effectSpread .4s;\n display: block; }\n .jui-btn.jui-btn-spread.jui-btn-danger:before {\n border-color: #f04134; }\n .jui-btn.jui-btn-ripple {\n overflow: hidden;\n position: relative; }\n .jui-btn.jui-btn-ripple span.btn-ripple-cover {\n pointer-events: none;\n z-index: 1;\n position: absolute;\n top: 0;\n left: 0;\n height: 0;\n width: 0;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.8);\n -webkit-transform: scale(0);\n transform: scale(0);\n opacity: 1;\n -webkit-animation: effectRipple .4s linear;\n animation: effectRipple .4s linear; }\n .jui-btn i {\n pointer-events: none; }\n\n /* \u52A8\u753B */\n @-webkit-keyframes effectSpread {\n to {\n opacity: 0;\n top: -6px;\n left: -6px;\n bottom: -6px;\n right: -6px;\n border-width: 6px; } }\n\n @keyframes effectSpread {\n to {\n opacity: 0;\n top: -6px;\n left: -6px;\n bottom: -6px;\n right: -6px;\n border-width: 6px; } }\n\n @-webkit-keyframes effectRipple {\n 100% {\n -webkit-transform: scale(2);\n transform: scale(2);\n opacity: 0; } }\n\n @keyframes effectRipple {\n 100% {\n -webkit-transform: scale(2);\n transform: scale(2);\n opacity: 0; } }\n\n @-webkit-keyframes loadingCircle {\n from {\n -webkit-transform-origin: 50% 50%;\n transform-origin: 50% 50%;\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg); }\n to {\n -webkit-transform-origin: 50% 50%;\n transform-origin: 50% 50%;\n -webkit-transform: rotate(1turn);\n transform: rotate(1turn); } }\n\n @keyframes loadingCircle {\n from {\n -webkit-transform-origin: 50% 50%;\n transform-origin: 50% 50%;\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg); }\n to {\n -webkit-transform-origin: 50% 50%;\n transform-origin: 50% 50%;\n -webkit-transform: rotate(1turn);\n transform: rotate(1turn); } }\n\t"],
encapsulation: core_1.ViewEncapsulation.None
},] },
];
/** @nocollapse */
ButtonComponent.ctorParameters = function () { return [
{ type: core_1.ElementRef, },
{ type: core_1.Renderer2, },
]; };
ButtonComponent.propDecorators = {
"btnType": [{ type: core_1.Input },],
"btnSize": [{ type: core_1.Input },],
"btnShape": [{ type: core_1.Input },],
"btnLoading": [{ type: core_1.Input },],
"btnEffect": [{ type: core_1.Input },],
"rippleCoverEl": [{ type: core_1.ViewChild, args: ['rippleCover',] },],
"onClick": [{ type: core_1.HostListener, args: ['click', ['$event'],] },],
};
return ButtonComponent;
}());
exports.ButtonComponent = ButtonComponent;
//# sourceMappingURL=button.component.js.map