@para-ui/core 4.0.0-rc.4 → 4.0.0-rc.6

package/Message/index.js

@@ -1,51 +1,50 @@
-import { _ as _typeof } from '../_verture/typeof-adeedc13.js';
-import { _ as _toConsumableArray } from '../_verture/toConsumableArray-8f4c9589.js';
 import { jsx } from 'react/jsx-runtime';
 import { useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import WarningCircleF from '@para-ui/icons/WarningCircleF';
-import CompleteIcon from '@para-ui/icons/CheckCircleF';
+import SuccessOutlined from '@para-ui/icons/CheckCircleF';
 import CloseIcon from '@para-ui/icons/Close';
 import CloseCircleF from '@para-ui/icons/CloseCircleF';
-import { $ as $prefixCls } from '../_verture/constant-0d9802f7.js';
+import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
-import '../_verture/unsupportedIterableToArray-cb478f24.js';
 
 var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/1 下午5:48\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-message-box {\n  /*从上到下进入*/\n  /*从上到下*/\n}\n.paraui-v4-message-box--message-float {\n  position: fixed;\n  top: 3%;\n  left: 0;\n  z-index: 9999;\n  text-align: center;\n  width: 100%;\n  pointer-events: none;\n}\n.paraui-v4-message-box .message-no-close .msg-text {\n  max-width: 384px;\n  margin-right: 0;\n}\n.paraui-v4-message-box .msg-icon {\n  position: absolute;\n  top: 11px;\n  left: 16px;\n  line-height: 0;\n}\n.paraui-v4-message-box .msg-icon svg {\n  font-size: 18px;\n  color: currentColor;\n}\n.paraui-v4-message-box .msg-text {\n  display: inline-block;\n  max-width: 352px;\n  word-wrap: break-word;\n  margin-right: 32px;\n  margin-left: 24px;\n  line-height: 20px;\n  word-break: break-all;\n}\n.paraui-v4-message-box .msg-text--title {\n  font-weight: 700;\n}\n.paraui-v4-message-box .msg-text--noicon {\n  margin-left: 0;\n}\n.paraui-v4-message-box .msg-text .msg-desc {\n  display: block;\n  margin-top: 8px;\n  font-weight: 400;\n  word-wrap: break-word;\n}\n.paraui-v4-message-box .msg-close {\n  width: 18px;\n  height: 18px;\n  border-radius: 2px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  right: 16px;\n  top: 11px;\n  cursor: pointer;\n  line-height: 0;\n  pointer-events: auto;\n}\n.paraui-v4-message-box .msg-close svg {\n  font-size: 18px;\n  color: currentColor;\n}\n.paraui-v4-message-box .msg-item-fill .msg-wrapper {\n  width: 100%;\n}\n.paraui-v4-message-box .msg-wrapper {\n  position: relative;\n  display: inline-block;\n  margin: 10px auto;\n  min-height: 40px;\n  padding: 10px 16px;\n  border-radius: 4px;\n  font-size: 14px;\n  text-align: left;\n}\n.paraui-v4-message-box .msg-wrapper.msg-wrapper-title {\n  padding: 16px 16px;\n}\n.paraui-v4-message-box .msg-wrapper.msg-wrapper-title .msg-icon {\n  top: 17px;\n}\n.paraui-v4-message-box .msg-wrapper.msg-wrapper-title .msg-close {\n  top: 17px;\n}\n.paraui-v4-message-box .msg-info {\n  background-color: rgb(240, 245, 255);\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-message-box .msg-info .msg-close {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-message-box .msg-info .msg-close:hover {\n  background-color: rgba(46, 101, 230, 0.1);\n}\n.paraui-v4-message-box .msg-warn {\n  background-color: rgb(255, 246, 235);\n  color: rgb(255, 147, 38);\n}\n.paraui-v4-message-box .msg-warn .msg-close {\n  color: rgb(255, 147, 38);\n}\n.paraui-v4-message-box .msg-warn .msg-close:hover {\n  background-color: rgba(255, 147, 38, 0.1);\n}\n.paraui-v4-message-box .msg-error {\n  background-color: rgb(255, 235, 235);\n  color: rgb(244, 66, 66);\n}\n.paraui-v4-message-box .msg-error .msg-close {\n  color: rgb(244, 66, 66);\n}\n.paraui-v4-message-box .msg-error .msg-close:hover {\n  background-color: rgba(244, 66, 66, 0.1);\n}\n.paraui-v4-message-box .msg-success {\n  background-color: rgb(232, 252, 239);\n  color: rgb(19, 191, 76);\n}\n.paraui-v4-message-box .msg-success .msg-close {\n  color: rgb(19, 191, 76);\n}\n.paraui-v4-message-box .msg-success .msg-close:hover {\n  background-color: rgba(19, 191, 76, 0.1);\n}\n.paraui-v4-message-box .message-fadeInDown {\n  animation-duration: 0.5s;\n  animation-name: messageFadeInDown;\n}\n@keyframes messageFadeInDown {\n  from {\n    opacity: 0;\n    transform: translate(0, -50px); /* 标准语法 */\n  }\n  to {\n    opacity: 1;\n    transform: translate(0, 0); /* 标准语法 */\n  }\n}";
 styleInject(css_248z);
 
 //图标map
-var iconMapping = {
+const iconMapping = {
   info: jsx(WarningCircleF, {}),
   warn: jsx(WarningCircleF, {}),
   error: jsx(CloseCircleF, {}),
-  success: jsx(CompleteIcon, {})
+  success: jsx(SuccessOutlined, {})
 };
 //获取window
-var getMsgWindow = function getMsgWindow() {
+const getMsgWindow = () => {
   return window === window.top ? window : window.top;
 };
 //消息内容模板
-var template = function template(_ref) {
-  var icon = _ref.icon,
-    text = _ref.text,
-    id = _ref.id,
-    type = _ref.type,
-    html = _ref.html,
-    close = _ref.close,
-    desc = _ref.desc,
-    hideIcon = _ref.hideIcon;
-  var item = document.createElement('div');
+const template = _ref => {
+  let {
+    icon,
+    text,
+    id,
+    type,
+    html,
+    close,
+    desc,
+    hideIcon
+  } = _ref;
+  let item = document.createElement('div');
   item.className = "msg-item";
   item.id = id || '';
   item.innerHTML = "<div class=\"msg-wrapper message-fadeInDown ".concat(close ? 'message-close' : 'message-no-close', " msg-").concat(type, "\">\n                ").concat(icon ? "<div class=\"msg-icon\"></div>" : '', "\n                <div class=\"msg-text\"></div>\n                ").concat(close ? "<div class=\"msg-close\"></div>" : '', "\n                </div>\n    ");
-  var msgWrapper = item.querySelector('.msg-wrapper');
-  var msgBox = item.querySelector('.msg-text');
+  const msgWrapper = item.querySelector('.msg-wrapper');
+  const msgBox = item.querySelector('.msg-text');
   if (!msgBox || !msgWrapper) return item;
   if (html) msgBox.innerHTML = text;else msgBox.textContent = text;
   //描述
   if (desc) {
-    var span = document.createElement('span');
+    const span = document.createElement('span');
     span.className = 'msg-desc';
     span.textContent = desc || '';
     msgBox.classList.add('msg-text--title');
@@ -55,10 +54,10 @@ var template = function template(_ref) {
   if (hideIcon) {
     msgBox.classList.add('msg-text--noicon');
   }
-  var msgClose = item.querySelector('.msg-close');
-  if (msgClose) msgClose.addEventListener('click', function () {
+  const msgClose = item.querySelector('.msg-close');
+  if (msgClose) msgClose.addEventListener('click', () => {
     var _a;
-    var hasNode = document.querySelector("#".concat(id));
+    const hasNode = document.querySelector("#".concat(id));
     if (hasNode) {
       (_a = item === null || item === void 0 ? void 0 : item.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(item);
       item = null;
@@ -66,85 +65,87 @@ var template = function template(_ref) {
   });
   return item;
 };
-var MessageBar = function MessageBar(props) {
-  var className = props.className,
-    style = props.style,
-    type = props.type;
-  var pId = createParentId();
-  var mId = getMsgId();
-  var cls = getParentClassName(props.className || '');
+const MessageBar = props => {
+  const {
+    className,
+    style,
+    type
+  } = props;
+  const pId = createParentId();
+  const mId = getMsgId();
+  let cls = getParentClassName(props.className || '');
   if (className) cls += " ".concat(className);
-  useEffect(function () {
-    var parent = document.getElementById(pId);
+  useEffect(() => {
+    const parent = document.getElementById(pId);
     renderContent(parent, Object.assign(Object.assign({}, props), {
       id: mId,
       icon: iconMapping[type]
     }), 0, false, true);
-    return function () {
-      var hasNode = document.querySelector("#".concat(mId));
+    return () => {
+      const hasNode = document.querySelector("#".concat(mId));
       if (hasNode) {
         parent === null || parent === void 0 ? void 0 : parent.removeChild(hasNode);
       }
     };
-  }, _toConsumableArray(Object.values(props)));
+  }, [...Object.values(props)]);
   return jsx("div", {
     id: pId,
     className: cls,
     style: style
   });
 };
-var createParentId = function createParentId() {
-  return "msgbox_".concat(String(Math.random() * 100000 | 0 + new Date().getTime()));
-};
+const createParentId = () => "msgbox_".concat(String(Math.random() * 100000 | 0 + new Date().getTime()));
 //消息box id
-var parentId = createParentId();
+const parentId = createParentId();
 //message mountNode
-var index = (function () {
+var index = (() => {
   return jsx("div", {
     className: "".concat($prefixCls, "-message-box"),
     id: parentId
   });
 });
 //渲染msg 内容
-var renderContent = function renderContent(box, _ref2, removeTime, autoClose, fill) {
-  var icon = _ref2.icon,
-    text = _ref2.text,
-    id = _ref2.id,
-    type = _ref2.type,
-    html = _ref2.html,
-    close = _ref2.close,
-    desc = _ref2.desc,
-    hideIcon = _ref2.hideIcon;
-  var item = template({
-    id: id,
-    text: text,
-    icon: icon,
-    type: type,
-    html: html,
-    close: close,
-    desc: desc,
-    hideIcon: hideIcon
+const renderContent = (box, _ref2, removeTime, autoClose, fill) => {
+  let {
+    icon,
+    text,
+    id,
+    type,
+    html,
+    close,
+    desc,
+    hideIcon
+  } = _ref2;
+  const item = template({
+    id,
+    text,
+    icon,
+    type,
+    html,
+    close,
+    desc,
+    hideIcon
   });
   if (fill && item) item.classList.add('msg-item-fill');
   box === null || box === void 0 ? void 0 : box.appendChild(item);
-  var iconDom = document.querySelector("#".concat(id, " .msg-icon"));
+  const iconDom = document.querySelector("#".concat(id, " .msg-icon"));
   if (iconDom && icon && !hideIcon) ReactDOM.render(icon, iconDom);
-  var closeDom = document.querySelector("#".concat(id, " .msg-close"));
+  const closeDom = document.querySelector("#".concat(id, " .msg-close"));
   if (closeDom) ReactDOM.render(jsx(CloseIcon, {}), closeDom);
   if (!autoClose) return;
-  setTimeout(function () {
-    var hasNode = document.querySelector("#".concat(item.id));
+  setTimeout(() => {
+    const hasNode = document.querySelector("#".concat(item.id));
     if (hasNode) box === null || box === void 0 ? void 0 : box.removeChild(item);
   }, removeTime);
 };
 //message 构造方法
-var Msg = function Msg(config, removeTime, type, parentId) {
+const Msg = (config, removeTime, type, parentId) => {
   var _a, _b;
-  var getMsgConf = function getMsgConf() {
-    var _win = getMsgWindow();
+  const getMsgConf = () => {
+    const _win = getMsgWindow();
     return _win['__msg_conf__'] || {};
   };
-  var icon = iconMapping[type],
+  let icon = iconMapping[type],
     text = '',
     desc = '',
     html = false,
@@ -153,8 +154,8 @@ var Msg = function Msg(config, removeTime, type, parentId) {
     maxCount = (_a = getMsgConf().maxCount) !== null && _a !== void 0 ? _a : Infinity,
     duration = (_b = getMsgConf().duration) !== null && _b !== void 0 ? _b : removeTime,
     className = '';
-  var autoClose = !isNaN(duration) && duration > 0;
-  if (typeof config === 'string') text = config;else if (_typeof(config) === 'object') {
+  const autoClose = !isNaN(duration) && duration > 0;
+  if (typeof config === 'string') text = config;else if (typeof config === 'object') {
     text = config.text || '';
     desc = config.desc;
     icon = config.icon || iconMapping[type];
@@ -162,8 +163,8 @@ var Msg = function Msg(config, removeTime, type, parentId) {
     hideIcon = config.hideIcon || false;
     if (config.maxCount > 0) maxCount = config.maxCount || Infinity;
   }
-  if (_typeof(config) === 'object' && typeof config.close === 'boolean') close = config.close;else close = !autoClose;
-  var parent = document.getElementById(parentId);
+  if (typeof config === 'object' && typeof config.close === 'boolean') close = config.close;else close = !autoClose;
+  let parent = document.getElementById(parentId);
   if (!parent) {
     parent = document.createElement('div');
     parent.id = parentId;
@@ -171,33 +172,29 @@ var Msg = function Msg(config, removeTime, type, parentId) {
   }
   parent.className = getParentClassName(className);
   parent.className += ' ' + "".concat($prefixCls, "-message-box--message-float");
-  var id = getMsgId();
+  const id = getMsgId();
   renderContent(parent, {
-    id: id,
-    text: text,
-    icon: icon,
-    type: type,
-    html: html,
-    close: close,
-    desc: desc,
-    hideIcon: hideIcon
+    id,
+    text,
+    icon,
+    type,
+    html,
+    close,
+    desc,
+    hideIcon
   }, duration, autoClose);
   dropEleWhenExceedLimit(parent, maxCount);
 };
-var getParentClassName = function getParentClassName(className) {
-  return "".concat($prefixCls, "-message-box").concat(className ? " ".concat(className) : '');
-};
-var getMsgId = function getMsgId() {
-  return "msgitem_".concat(String(Math.random() * 100000 | 0 + new Date().getTime()));
-};
+const getParentClassName = className => "".concat($prefixCls, "-message-box").concat(className ? " ".concat(className) : '');
+const getMsgId = () => "msgitem_".concat(String(Math.random() * 100000 | 0 + new Date().getTime()));
 //超出maxCount 删除之前元素
-var dropEleWhenExceedLimit = function dropEleWhenExceedLimit(parent, maxCount) {
+const dropEleWhenExceedLimit = (parent, maxCount) => {
   var _a, _b;
   if (!parent || !((_a = parent.children) === null || _a === void 0 ? void 0 : _a.length)) return;
-  var child = parent.children;
-  var len = child.length;
+  const child = parent.children;
+  const len = child.length;
   if (len > maxCount) {
-    for (var i = 0; i < len; i++) {
+    for (let i = 0; i < len; i++) {
       if (i < maxCount && child[i]) {
         (_b = child[i].parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(child[i]);
       }
@@ -205,44 +202,38 @@ var dropEleWhenExceedLimit = function dropEleWhenExceedLimit(parent, maxCount) {
   }
 };
 //清除所有msg
-var clearFunc = function clearFunc(parentId) {
-  var parent = document.getElementById(parentId);
+const clearFunc = parentId => {
+  const parent = document.getElementById(parentId);
   if (!parent) return;
   parent.innerHTML = '';
 };
 //msg 全局配置
-var msgConfig = function msgConfig() {
-  var conf = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var _win = getMsgWindow();
+const msgConfig = function () {
+  let conf = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const _win = getMsgWindow();
   _win.__msg_conf__ = conf;
 };
 //message
-var Message = {
-  info: function info(config) {
-    var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5000;
+const Message = {
+  info: function (config) {
+    let duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5000;
     return Msg(config, duration, 'info', parentId);
   },
-  warn: function warn(config) {
-    var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5000;
+  warn: function (config) {
+    let duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5000;
     return Msg(config, duration, 'warn', parentId);
   },
-  error: function error(config) {
-    var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5000;
+  error: function (config) {
+    let duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5000;
     return Msg(config, duration, 'error', parentId);
   },
-  success: function success(config) {
-    var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5000;
+  success: function (config) {
+    let duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5000;
     return Msg(config, duration, 'success', parentId);
   },
-  clear: function clear() {
-    return clearFunc(parentId);
-  },
-  destroyAll: function destroyAll() {
-    return clearFunc(parentId);
-  },
-  config: function config(_config) {
-    return msgConfig(_config);
-  }
+  clear: () => clearFunc(parentId),
+  destroyAll: () => clearFunc(parentId),
+  config: config => msgConfig(config)
 };
 
 export { Message, MessageBar, index as default };