lole-ui
Version:
React UI Component which like a love letter
121 lines (120 loc) • 6.25 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import React, { useEffect, useState } from "react";
import classnames from "classnames";
import { AiOutlineApi, AiOutlineClose, AiOutlineCloseCircle, AiOutlineExclamationCircle, AiOutlineSmile, AiOutlineWarning } from "react-icons/ai";
import { judgeDOMExitAndCreateDOM } from "../utils/judgeDOMExitAndCreateDOM";
import ReactDOM from "react-dom";
var Notice = function (props) {
var message = props.message, description = props.description, duration = props.duration, type = props.type, icon = props.icon, placement = props.placement, onClose = props.onClose, className = props.className, style = props.style;
var _a = useState(true), isShowNotification = _a[0], setNotification = _a[1];
var classes = classnames("lole-notification", className, {
hiddenNotification: !isShowNotification,
});
useEffect(function () {
if (duration) {
if (duration === 0)
return;
setTimeout(function () {
setNotification(false);
}, duration);
}
}, [duration]);
useEffect(function () {
setTimeout(function () {
var _a;
var hiddenDiv = document.querySelector(".hiddenNotification");
(_a = hiddenDiv === null || hiddenDiv === void 0 ? void 0 : hiddenDiv.parentElement) === null || _a === void 0 ? void 0 : _a.remove();
}, 250);
}, [isShowNotification]);
useEffect(function () {
var notificationWrapper = document.querySelector("#le-notification-wrapper");
removeAllClasses(notificationWrapper);
notificationWrapper === null || notificationWrapper === void 0 ? void 0 : notificationWrapper.classList.add("lole-notification-wrapper-".concat(placement));
}, [placement]);
var removeAllClasses = function (notificationWrapper) {
if (document.querySelector(".le-notification-wrapper-topLeft")) {
notificationWrapper === null || notificationWrapper === void 0 ? void 0 : notificationWrapper.classList.remove("lole-notification-wrapper-topLeft");
}
if (document.querySelector(".le-notification-wrapper-topRight")) {
notificationWrapper === null || notificationWrapper === void 0 ? void 0 : notificationWrapper.classList.remove("lole-notification-wrapper-topRight");
}
if (document.querySelector(".le-notification-wrapper-bottomLeft")) {
notificationWrapper === null || notificationWrapper === void 0 ? void 0 : notificationWrapper.classList.remove("lole-notification-wrapper-bottomLeft");
}
if (document.querySelector(".le-notification-wrapper-bottomRight")) {
notificationWrapper === null || notificationWrapper === void 0 ? void 0 : notificationWrapper.classList.remove("lole-notification-wrapper-bottomRight");
}
};
var handleClose = function () {
setNotification(false);
onClose && onClose();
};
var renderIcon = function () {
var type = props.type;
if (type === 'warning')
return React.createElement(AiOutlineWarning, { fill: "#e69b2b" });
if (type === 'success')
return React.createElement(AiOutlineSmile, { fill: '#67c23a' });
if (type === 'error')
return React.createElement(AiOutlineCloseCircle, { fill: '#f56c6c' });
if (type === 'info')
return React.createElement(AiOutlineExclamationCircle, { fill: "rgb(249, 204, 226)" });
if (type === 'open')
return React.createElement(AiOutlineApi, { fill: '#409ef' });
};
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: classes, style: style },
React.createElement("div", { className: "toast_main" },
icon != null ? React.createElement("div", { className: "icon" }, icon) : (React.createElement("div", { className: "main_left" }, renderIcon())),
React.createElement("div", { className: "main_right" },
React.createElement("div", { className: "main_header" },
React.createElement("div", { className: "main_header_title" }, message),
React.createElement("div", { className: "main_header_icon", onClick: handleClose },
React.createElement(AiOutlineClose, null))),
React.createElement("div", { className: "main_content" }, description))))));
};
Notice.defaultProps = {
duration: 4000,
type: "open",
placement: 'topRight',
};
var isNotificationExist = function (placement) {
// 判断是否有节点,没有则创建返回
var notificationWrapper = judgeDOMExitAndCreateDOM("lole-notification-wrapper-".concat(placement ? placement : "topRight"));
var messageInner = document.createElement("div");
notificationWrapper.append(messageInner);
};
var renderDom = function (options, type) {
ReactDOM.render(React.createElement(Notice, __assign({}, options, { type: type })), document.querySelector("#lole-notification-wrapper-".concat(options.placement ? options.placement : "topRight", ">div:last-child")));
};
Notice.open = function (options) {
isNotificationExist(options.placement);
renderDom(options, "open");
};
Notice.success = function (options) {
isNotificationExist(options.placement);
renderDom(options, "success");
};
Notice.error = function (options) {
isNotificationExist(options.placement);
renderDom(options, "error");
};
Notice.warning = function (options) {
isNotificationExist(options.placement);
renderDom(options, "warning");
};
Notice.info = function (options) {
isNotificationExist(options.placement);
renderDom(options, "info");
};
export default Notice;