@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
169 lines (168 loc) • 7.24 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "default", {
enumerable: true,
get: function() {
return Notification;
}
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _call_super = require("@swc/helpers/_/_call_super");
var _class_call_check = require("@swc/helpers/_/_class_call_check");
var _create_class = require("@swc/helpers/_/_create_class");
var _define_property = require("@swc/helpers/_/_define_property");
var _inherits = require("@swc/helpers/_/_inherits");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _reacttransitiongroup = require("react-transition-group");
var _iconsreact = require("@nutui/icons-react");
var _render = require("../../utils/render");
var classPrefix = 'nut-notify';
var _React_PureComponent;
var Notification = /*#__PURE__*/ function(_superClass) {
"use strict";
(0, _inherits._)(Notification, _superClass);
function Notification(props) {
(0, _class_call_check._)(this, Notification);
var _this;
_this = (0, _call_super._)(this, Notification, [
props
]), (0, _define_property._)(_this, "closeTimer", void 0);
_this.close = _this.close.bind(_this);
_this.startCloseTimer = _this.startCloseTimer.bind(_this);
_this.clearCloseTimer = _this.clearCloseTimer.bind(_this);
_this.clickCover = _this.clickCover.bind(_this);
_this.state = {
show: true
};
return _this;
}
(0, _create_class._)(Notification, [
{
key: "close",
value: function close() {
var _this_props;
this.setState({
show: false
});
this.clearCloseTimer();
if (this.props.id) {
var element = document.getElementById(this.props.id);
element && element.parentNode && element.parentNode.removeChild(element);
}
(_this_props = this.props) === null || _this_props === void 0 ? void 0 : _this_props.onClose();
}
},
{
key: "startCloseTimer",
value: function startCloseTimer() {
var _this = this;
var duration = this.props.duration;
if (duration) {
this.closeTimer = window.setTimeout(function() {
_this.close();
}, duration);
}
}
},
{
key: "clearCloseTimer",
value: function clearCloseTimer() {
if (this.closeTimer) {
clearTimeout(this.closeTimer);
this.closeTimer = -1;
}
}
},
{
key: "clickCover",
value: function clickCover() {
this.props.onClick();
}
},
{
key: "componentDidMount",
value: function componentDidMount() {
this.startCloseTimer();
}
},
{
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.clearCloseTimer();
}
},
{
key: "render",
value: function render() {
var _this_props = this.props, id = _this_props.id, style = _this_props.style, message = _this_props.message, leftIcon = _this_props.leftIcon, rightIcon = _this_props.rightIcon, closeable = _this_props.closeable, className = _this_props.className, position = _this_props.position, distance = _this_props.distance, navHeight = _this_props.navHeight;
var show = this.state.show;
var classes = (0, _classnames.default)(classPrefix, className);
var getDistance = function getDistance() {
if (position === 'top') {
return {
top: "".concat(distance + navHeight, "px")
};
}
return {
bottom: "".concat(distance, "px")
};
};
var _obj;
return /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement(_reacttransitiongroup.CSSTransition, {
in: show,
timeout: 300,
classNames: "fade",
unmountOnExit: true,
appear: true,
position: position,
id: id
}, /*#__PURE__*/ _react.createElement("div", {
className: classes,
style: (0, _object_spread._)({}, style, getDistance()),
onClick: this.clickCover
}, leftIcon ? /*#__PURE__*/ _react.createElement("div", {
className: "".concat(classPrefix, "-left-icon")
}, leftIcon) : null, /*#__PURE__*/ _react.createElement("div", {
className: (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-content"), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-ellipsis"), closeable || rightIcon), (0, _define_property._)(_obj, "".concat(classPrefix, "-layout-left"), leftIcon || rightIcon), _obj))
}, message), rightIcon || closeable ? /*#__PURE__*/ _react.createElement("div", {
className: "".concat(classPrefix, "-right-icon"),
onClick: this.close
}, rightIcon || (closeable ? /*#__PURE__*/ _react.createElement(_iconsreact.Close, null) : null)) : null)));
}
}
]);
return Notification;
}(_React_PureComponent = _react.PureComponent);
(0, _define_property._)(Notification, "newInstance", void 0);
Notification.newInstance = function(properties, callback) {
var ref = function ref(instance) {
if (called) {
return;
}
called = true;
callback({
component: instance,
destroy: function destroy() {
setTimeout(function() {
(0, _render.unmount)(element);
element && element.parentNode && element.parentNode.removeChild(element);
}, 300);
}
});
};
var element = document.createElement('div');
var id = properties.id ? properties.id : "".concat(Date.now());
element.id = id;
properties.id = id;
document.body.appendChild(element);
var called = false;
(0, _render.render)(/*#__PURE__*/ _react.createElement(Notification, (0, _object_spread_props._)((0, _object_spread._)({}, properties), {
ref: ref
})), element);
};