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.
140 lines
4.2 KiB
140 lines
4.2 KiB
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
import * as React from 'react';
|
|
import { Component } from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
import classNames from 'classnames';
|
|
|
|
var Notice = /*#__PURE__*/function (_Component) {
|
|
_inherits(Notice, _Component);
|
|
|
|
var _super = _createSuper(Notice);
|
|
|
|
function Notice() {
|
|
var _this;
|
|
|
|
_classCallCheck(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;
|
|
}
|
|
|
|
_createClass(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", _extends({
|
|
className: classNames(componentClass, className, _defineProperty({}, "".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.createPortal(node, holder);
|
|
}
|
|
|
|
return node;
|
|
}
|
|
}]);
|
|
|
|
return Notice;
|
|
}(Component);
|
|
|
|
Notice.defaultProps = {
|
|
onClose: function onClose() {},
|
|
duration: 1.5
|
|
};
|
|
export { Notice as default }; |