@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
182 lines (181 loc) • 7.98 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 _iconsreact = require("@nutui/icons-react");
var _render = require("../../utils/render");
var _index = /*#__PURE__*/ _interop_require_default._(require("../overlay/index"));
var classPrefix = 'nut-toast';
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() {
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.onClose && 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 * 1000);
}
}
},
{
key: "clearCloseTimer",
value: function clearCloseTimer() {
if (this.closeTimer) {
clearTimeout(this.closeTimer);
this.closeTimer = -1;
}
}
},
{
key: "clickCover",
value: function clickCover() {
var closeOnOverlayClick = this.props.closeOnOverlayClick;
if (closeOnOverlayClick) {
this.close();
}
}
},
{
key: "renderIcon",
value: function renderIcon() {
var icon = this.props.icon;
if (typeof icon === 'string') {
var iconNode = {
success: /*#__PURE__*/ _react.createElement(_iconsreact.Success, null),
fail: /*#__PURE__*/ _react.createElement(_iconsreact.Failure, null),
warn: /*#__PURE__*/ _react.createElement(_iconsreact.Tips, null),
loading: /*#__PURE__*/ _react.createElement(_iconsreact.Loading, {
className: "nut-icon-loading"
})
}[icon];
return /*#__PURE__*/ _react.createElement("p", {
className: "".concat(classPrefix, "-icon-wrapper")
}, iconNode);
}
return icon;
}
},
{
key: "componentDidMount",
value: function componentDidMount() {
this.startCloseTimer();
}
},
{
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.clearCloseTimer();
}
},
{
key: "render",
value: function render() {
var _this = this;
var _this_props = this.props, id = _this_props.id, icon = _this_props.icon, title = _this_props.title, content = _this_props.content, position = _this_props.position, size = _this_props.size, closeOnOverlayClick = _this_props.closeOnOverlayClick, lockScroll = _this_props.lockScroll, style = _this_props.style, className = _this_props.className, contentClassName = _this_props.contentClassName, contentStyle = _this_props.contentStyle, wordBreak = _this_props.wordBreak, zIndex = _this_props.zIndex;
var show = this.state.show;
var classes = (0, _classnames.default)({
'nut-toast-has-icon': icon
});
return /*#__PURE__*/ _react.createElement(_index.default, {
visible: show,
style: style,
zIndex: zIndex,
className: "".concat(classPrefix, "-overlay-default ").concat(className),
onClick: function onClick() {
return _this.clickCover();
},
closeOnOverlayClick: closeOnOverlayClick,
lockScroll: lockScroll
}, /*#__PURE__*/ _react.createElement("div", {
className: "".concat(classPrefix, " ").concat(classes),
id: "toast-".concat(id)
}, /*#__PURE__*/ _react.createElement("div", {
className: (0, _classnames.default)("".concat(classPrefix, "-inner"), "".concat(classPrefix, "-").concat(position), contentClassName, "".concat(classPrefix, "-inner-").concat(size), "".concat(classPrefix, "-inner-").concat(wordBreak), (0, _define_property._)({}, "".concat(classPrefix, "-inner-descrption"), content)),
style: (0, _object_spread._)({}, contentStyle)
}, this.renderIcon(), title && /*#__PURE__*/ _react.createElement("div", {
className: "".concat(classPrefix, "-title")
}, title), content && /*#__PURE__*/ _react.createElement("span", {
className: "".concat(classPrefix, "-text")
}, content))));
}
}
]);
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() {
(0, _render.unmount)(element);
element && element.parentNode && element.parentNode.removeChild(element);
}
});
};
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);
};