ukelli-ui
Version:
Base on React's UI lib. Make frontend's dev simpler and faster.
105 lines (104 loc) • 3.68 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
import React, { Component } from 'react';
import { Call, UUID } from 'basic-helper';
import { PopoverEntity } from '../popover/popover-entity';
/**
* 基于 Button 和 Popover 的组合组件
*
* @export
* @class TipButton
* @extends {Component}
*/
var TipButton = /** @class */ (function (_super) {
__extends(TipButton, _super);
function TipButton(props) {
var _this = _super.call(this, props) || this;
_this.btnId = UUID();
_this.popoverLifeTimer = null;
_this.popover = new PopoverEntity({ id: _this.btnId });
return _this;
}
TipButton.prototype.componentWillUnmount = function () {
this.clearTimer();
this.popover.destroy();
};
TipButton.prototype.closePopover = function () {
var onClose = this.props.onClose;
this.clearTimer();
this.popover.close();
Call(onClose);
};
TipButton.prototype.clearTimer = function () {
if (this.popoverLifeTimer)
clearTimeout(this.popoverLifeTimer);
this.popoverLifeTimer = null;
};
TipButton.prototype.showPopover = function (e) {
var _a = this.props, timer = _a.timer, autoClose = _a.autoClose, popover = _a.popover, position = _a.position;
var self = this;
this.popover.show({
elem: e.target,
props: {
position: position,
},
children: popover
});
if (!autoClose)
return;
this.clearTimer();
this.popoverLifeTimer = setTimeout(function () {
self.closePopover();
}, timer);
};
TipButton.prototype._onClick = function (e) {
var _a = this.props, disabled = _a.disabled, onClick = _a.onClick, showTip = _a.showTip;
if (!disabled) {
Call(onClick);
}
this.prevNode = e.target;
if (showTip)
this.showPopover(e);
// setTimeout(() => {
// this.setPopoverChildren(this.props.children);
// }, 0);
};
TipButton.prototype.refreshChild = function () {
this.setPopoverChildren(this.props.popover);
};
TipButton.prototype.setPopoverChildren = function (popover) {
if (!this.prevNode)
return;
this.popover.show({
children: popover
});
};
TipButton.prototype.render = function () {
var _this = this;
var _a = this.props, _b = _a.className, className = _b === void 0 ? 'theme' : _b, text = _a.text, disabled = _a.disabled;
return (React.createElement("span", { className: "tip-btn" },
React.createElement("button", { className: "btn " + className, disabled: disabled, ref: function (e) { _this.relativeBtn = e; }, onClick: function (e) {
if (disabled)
return;
_this._onClick(e);
} }, text)));
};
TipButton.defaultProps = {
showTip: true,
autoClose: true,
timer: 300000,
};
return TipButton;
}(Component));
export default TipButton;