You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
157 lines
4.7 KiB
157 lines
4.7 KiB
"use strict";
|
|
|
|
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.default = void 0;
|
|
|
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
|
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
|
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
|
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
|
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
|
|
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
|
|
|
|
var React = _interopRequireWildcard(require("react"));
|
|
|
|
var _reactDom = _interopRequireDefault(require("react-dom"));
|
|
|
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
|
var Notice = /*#__PURE__*/function (_Component) {
|
|
(0, _inherits2.default)(Notice, _Component);
|
|
|
|
var _super = (0, _createSuper2.default)(Notice);
|
|
|
|
function Notice() {
|
|
var _this;
|
|
|
|
(0, _classCallCheck2.default)(this, Notice);
|
|
|
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
args[_key] = arguments[_key];
|
|
}
|
|
|
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
_this.closeTimer = null;
|
|
|
|
_this.close = function (e) {
|
|
if (e) {
|
|
e.stopPropagation();
|
|
}
|
|
|
|
_this.clearCloseTimer();
|
|
|
|
var _this$props = _this.props,
|
|
onClose = _this$props.onClose,
|
|
noticeKey = _this$props.noticeKey;
|
|
|
|
if (onClose) {
|
|
onClose(noticeKey);
|
|
}
|
|
};
|
|
|
|
_this.startCloseTimer = function () {
|
|
if (_this.props.duration) {
|
|
_this.closeTimer = window.setTimeout(function () {
|
|
_this.close();
|
|
}, _this.props.duration * 1000);
|
|
}
|
|
};
|
|
|
|
_this.clearCloseTimer = function () {
|
|
if (_this.closeTimer) {
|
|
clearTimeout(_this.closeTimer);
|
|
_this.closeTimer = null;
|
|
}
|
|
};
|
|
|
|
return _this;
|
|
}
|
|
|
|
(0, _createClass2.default)(Notice, [{
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
this.startCloseTimer();
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps) {
|
|
if (this.props.duration !== prevProps.duration || this.props.updateMark !== prevProps.updateMark || // Visible again need reset timer
|
|
this.props.visible !== prevProps.visible && this.props.visible) {
|
|
this.restartCloseTimer();
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
this.clearCloseTimer();
|
|
}
|
|
}, {
|
|
key: "restartCloseTimer",
|
|
value: function restartCloseTimer() {
|
|
this.clearCloseTimer();
|
|
this.startCloseTimer();
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
var _this$props2 = this.props,
|
|
prefixCls = _this$props2.prefixCls,
|
|
className = _this$props2.className,
|
|
closable = _this$props2.closable,
|
|
closeIcon = _this$props2.closeIcon,
|
|
style = _this$props2.style,
|
|
onClick = _this$props2.onClick,
|
|
children = _this$props2.children,
|
|
holder = _this$props2.holder;
|
|
var componentClass = "".concat(prefixCls, "-notice");
|
|
var dataOrAriaAttributeProps = Object.keys(this.props).reduce(function (acc, key) {
|
|
if (key.substr(0, 5) === 'data-' || key.substr(0, 5) === 'aria-' || key === 'role') {
|
|
acc[key] = _this2.props[key];
|
|
}
|
|
|
|
return acc;
|
|
}, {});
|
|
var node = /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
|
|
className: (0, _classnames.default)(componentClass, className, (0, _defineProperty2.default)({}, "".concat(componentClass, "-closable"), closable)),
|
|
style: style,
|
|
onMouseEnter: this.clearCloseTimer,
|
|
onMouseLeave: this.startCloseTimer,
|
|
onClick: onClick
|
|
}, dataOrAriaAttributeProps), /*#__PURE__*/React.createElement("div", {
|
|
className: "".concat(componentClass, "-content")
|
|
}, children), closable ? /*#__PURE__*/React.createElement("a", {
|
|
tabIndex: 0,
|
|
onClick: this.close,
|
|
className: "".concat(componentClass, "-close")
|
|
}, closeIcon || /*#__PURE__*/React.createElement("span", {
|
|
className: "".concat(componentClass, "-close-x")
|
|
})) : null);
|
|
|
|
if (holder) {
|
|
return /*#__PURE__*/_reactDom.default.createPortal(node, holder);
|
|
}
|
|
|
|
return node;
|
|
}
|
|
}]);
|
|
return Notice;
|
|
}(React.Component);
|
|
|
|
exports.default = Notice;
|
|
Notice.defaultProps = {
|
|
onClose: function onClose() {},
|
|
duration: 1.5
|
|
}; |