lole-ui
Version:
React UI Component which like a love letter
89 lines (88 loc) • 4.14 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 { AiOutlineClose, AiOutlineCloseCircle, AiOutlineExclamationCircle, AiOutlineSmile, AiOutlineWarning } from "react-icons/ai";
import ReactDOM from "react-dom";
import { judgeDOMExitAndCreateDOM } from "../utils/judgeDOMExitAndCreateDOM";
var Message = function (props) {
var content = props.content, onClose = props.onClose, icon = props.icon, type = props.type, duration = props.duration, showIcon = props.showIcon, className = props.className, style = props.style;
var _a = useState(true), isShowMessage = _a[0], setMessage = _a[1];
useEffect(function () {
setTimeout(function () {
setMessage(false);
}, duration);
}, []);
useEffect(function () {
setTimeout(function () {
var _a;
var hiddenDiv = document.querySelector(".hiddenMessage");
(_a = hiddenDiv === null || hiddenDiv === void 0 ? void 0 : hiddenDiv.parentElement) === null || _a === void 0 ? void 0 : _a.remove();
}, 200);
}, [isShowMessage]);
var handleClose = function () {
setMessage(false);
onClose && onClose();
};
var classes = classnames("lole-message", className, {
'hiddenMessage': !isShowMessage
});
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)" });
};
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: classes, style: style },
React.createElement("div", { className: "toast_main" },
React.createElement("div", { className: "main_left" },
(icon != null && showIcon) ? React.createElement("div", { className: "icon" }, icon) : (React.createElement("div", { className: "icon" }, renderIcon())),
React.createElement("div", { className: "content" }, content)),
React.createElement("div", { className: "main_right" }, onClose && (React.createElement("div", { className: "close", onClick: handleClose },
React.createElement(AiOutlineClose, null))))))));
};
Message.defaultProps = {
duration: 2000,
showIcon: true,
};
var isMessageWrapperExist = function () {
// 判断是否有节点,没有则创建返回
var messageWrapper = judgeDOMExitAndCreateDOM("lole-message-wrapper");
var messageInner = document.createElement("div");
messageWrapper.append(messageInner);
};
var renderDom = function (content, options, type) {
ReactDOM.render(React.createElement(Message, __assign({}, options, { content: content, type: type })), document.querySelector("#lole-message-wrapper>div:last-child"));
};
Message.info = function (content, options) {
isMessageWrapperExist();
renderDom(content, options, "info");
};
Message.success = function (content, options) {
isMessageWrapperExist();
renderDom(content, options, "success");
};
Message.error = function (content, options) {
isMessageWrapperExist();
renderDom(content, options, "error");
};
Message.warning = function (content, options) {
isMessageWrapperExist();
renderDom(content, options, "warning");
};
export default Message;