@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
158 lines (157 loc) • 6.68 kB
JavaScript
import { _ as _call_super } from "@swc/helpers/_/_call_super";
import { _ as _class_call_check } from "@swc/helpers/_/_class_call_check";
import { _ as _create_class } from "@swc/helpers/_/_create_class";
import { _ as _define_property } from "@swc/helpers/_/_define_property";
import { _ as _inherits } from "@swc/helpers/_/_inherits";
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import * as React from "react";
import classNames from "classnames";
import { CSSTransition } from "react-transition-group";
import { Close } from "@nutui/icons-react";
import { render as reactRender, unmount } from "../../utils/render";
var classPrefix = 'nut-notify';
var _React_PureComponent;
var Notification = /*#__PURE__*/ function(_superClass) {
"use strict";
_inherits(Notification, _superClass);
function Notification(props) {
_class_call_check(this, Notification);
var _this;
_this = _call_super(this, Notification, [
props
]), _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;
}
_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 = classNames(classPrefix, className);
var getDistance = function() {
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(CSSTransition, {
in: show,
timeout: 300,
classNames: "fade",
unmountOnExit: true,
appear: true,
position: position,
id: id
}, /*#__PURE__*/ React.createElement("div", {
className: classes,
style: _object_spread({}, style, getDistance()),
onClick: this.clickCover
}, leftIcon ? /*#__PURE__*/ React.createElement("div", {
className: "".concat(classPrefix, "-left-icon")
}, leftIcon) : null, /*#__PURE__*/ React.createElement("div", {
className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-content"), true), _define_property(_obj, "".concat(classPrefix, "-ellipsis"), closeable || rightIcon), _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(Close, null) : null)) : null)));
}
}
]);
return Notification;
}(_React_PureComponent = React.PureComponent);
_define_property(Notification, "newInstance", void 0);
export { Notification as default };
Notification.newInstance = function(properties, callback) {
var ref = function ref(instance) {
if (called) {
return;
}
called = true;
callback({
component: instance,
destroy: function destroy() {
setTimeout(function() {
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;
reactRender(/*#__PURE__*/ React.createElement(Notification, _object_spread_props(_object_spread({}, properties), {
ref: ref
})), element);
};