@chaoswise/ui 3.1.2 → 3.1.3

package/lib/CWMessage/index.js

@@ -1,6 +1,7 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 import _Drawer from "@chaoswise/ui/lib/Drawer";
 import _Badge from "@chaoswise/ui/lib/Badge";
+import _Modal from "@chaoswise/ui/lib/Modal";
 import _notification from "@chaoswise/ui/lib/notification";
 var _excluded = ["count"],
   _excluded2 = ["onClickStrongMessageItem"];
@@ -21,16 +22,18 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-import React, { useState, useEffect, useMemo, useRef } from "react";
-import useConfigContext from "../useConfigContext";
-import MessageIcon from "./messageSvg.js";
-import CommonIcon from "./CommonIcon";
-import { getSessionId, getMessageDetailApi, getMessageQuerySettingsApi, readInnerMessageApi } from "./service";
-import MessageContent from "./MessageContent";
-import classnames from "classnames";
-import PropTypes from "prop-types";
-import io from "socket.io-client";
-import useStyle from "./index.style";
+import React, { useState, useEffect, useMemo, useRef } from 'react';
+import useConfigContext from '../useConfigContext';
+import MessageIcon from './messageSvg.js';
+import CommonIcon from './CommonIcon';
+import { getSessionId, getMessageDetailApi, getMessageQuerySettingsApi, readInnerMessageApi } from './service';
+import MessageContent from './MessageContent';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import io from 'socket.io-client';
+import audioMp3 from './audioMp3.wav';
+import useStyle from './index.style';
+import { useIntl } from '../locales';
 function Message(props) {
   var _props$hideOnSinglePa = props.hideOnSinglePage,
     hideOnSinglePage = _props$hideOnSinglePa === void 0 ? false : _props$hideOnSinglePa,
@@ -46,9 +49,9 @@ function Message(props) {
     _props$onTabListAllRe = props.onTabListAllRead,
     onTabListAllRead = _props$onTabListAllRe === void 0 ? function () {} : _props$onTabListAllRe,
     _props$gatewayPrefix = props.gatewayPrefix,
-    gatewayPrefix = _props$gatewayPrefix === void 0 ? "" : _props$gatewayPrefix,
+    gatewayPrefix = _props$gatewayPrefix === void 0 ? '' : _props$gatewayPrefix,
     _props$socketPathPref = props.socketPathPrefix,
-    socketPathPrefix = _props$socketPathPref === void 0 ? "" : _props$socketPathPref,
+    socketPathPrefix = _props$socketPathPref === void 0 ? '' : _props$socketPathPref,
     isClose = props.isClose,
     _props$imgOption = props.imgOption,
     imgOption = _props$imgOption === void 0 ? {} : _props$imgOption,
@@ -60,11 +63,15 @@ function Message(props) {
     _props$onSocketChange = props.onSocketChange,
     onSocketChange = _props$onSocketChange === void 0 ? function () {} : _props$onSocketChange,
     _props$renderMessageD = props.renderMessageDateFormat,
-    renderMessageDateFormat = _props$renderMessageD === void 0 ? function () {} : _props$renderMessageD;
+    renderMessageDateFormat = _props$renderMessageD === void 0 ? function () {} : _props$renderMessageD,
+    customAudioSrc = props.customAudioSrc,
+    _props$enableVoicePro = props.enableVoicePrompt,
+    enableVoicePrompt = _props$enableVoicePro === void 0 ? false : _props$enableVoicePro;
+  var intl = useIntl();
   var _useConfigContext = useConfigContext(),
     getPrefixCls = _useConfigContext.getPrefixCls;
   var prefixCls = getPrefixCls();
-  var messagePrefixCls = getPrefixCls("business-message");
+  var messagePrefixCls = getPrefixCls('business-message');
   var _useStyle = useStyle("".concat(messagePrefixCls, "-wrapper")),
     _useStyle2 = _slicedToArray(_useStyle, 3),
     wrapCSSVar = _useStyle2[0],
@@ -82,7 +89,7 @@ function Message(props) {
   var _strongMessageOption$ = strongMessageOption.onClickStrongMessageItem,
     onClickStrongMessageItem = _strongMessageOption$ === void 0 ? function () {} : _strongMessageOption$,
     restStrongMessageOption = _objectWithoutProperties(strongMessageOption, _excluded2);
-  var _useState = useState("windows"),
+  var _useState = useState('windows'),
     _useState2 = _slicedToArray(_useState, 2),
     mode = _useState2[0],
     setMode = _useState2[1];
@@ -113,18 +120,25 @@ function Message(props) {
     setPageInfo = _useState10[1];
   var _notification$useNoti = _notification.useNotification({
       top: headerHeight,
-      maxCount: mode === "windows" ? 1 : null
+      maxCount: mode === 'windows' ? 1 : null
     }),
     _notification$useNoti2 = _slicedToArray(_notification$useNoti, 2),
     api = _notification$useNoti2[0],
     contextHolder = _notification$useNoti2[1];
+  var _Modal$useModal = _Modal.useModal(),
+    _Modal$useModal2 = _slicedToArray(_Modal$useModal, 2),
+    modalApi = _Modal$useModal2[0],
+    contextHolderModal = _Modal$useModal2[1];
   // 初始化条件
   var conditionsRef = useRef({
     current: 1,
     size: pageInfo.pageSize,
-    clientType: "BROWSER",
+    clientType: 'BROWSER',
     status: 0
   });
+  //初始化提示弹框
+  var modal = useRef(null);
+  var audioRef = useRef(null);
   useEffect(function () {
     getMessageQuerySettings();
     connectSocket();
@@ -132,6 +146,10 @@ function Message(props) {
       if (socketConnectInfo.current) {
         socketConnectInfo.current.disconnect && socketConnectInfo.current.disconnect();
       }
+      var audio = audioRef.current;
+      if (audio) {
+        audio.pause();
+      }
     };
   }, []);
   useEffect(function () {
@@ -149,7 +167,7 @@ function Message(props) {
     return 24;
   }, [hideOnSinglePage, total]);
   var hasOnTabMore = useMemo(function () {
-    return "onTabMore" in props ? true : false;
+    return 'onTabMore' in props ? true : false;
   }, [onTabMore]);
   var onClose = function onClose(e) {
     setVisible(false);
@@ -165,6 +183,30 @@ function Message(props) {
   var onClickBell = function onClickBell() {
     setVisible(true);
   };
+  // 播放音频
+  var playAudio = function playAudio() {
+    var audio = audioRef.current;
+    if (audio) {
+      audio.currentTime = 0; // 重置播放时间
+      audio.play()["catch"](function (err) {
+        var _err$message;
+        if ((err === null || err === void 0 ? void 0 : err.name) === 'NotAllowedError' && err !== null && err !== void 0 && (_err$message = err.message) !== null && _err$message !== void 0 && _err$message.includes('play() failed')) {
+          if (!modal.current) {
+            modal.current = modalApi.warning({
+              title: intl.get('de6eaecc-9d39-41f1-82d3-80694c558028').d('消息提醒需要有交互行为才可以自动播放'),
+              okText: intl.get('4253417c-d699-4eed-8c75-34d2a8b18a68').d('确定'),
+              mask: true,
+              maskClosable: true
+            });
+          } else {
+            modal.current.update(function (prevConfig) {
+              return _objectSpread({}, prevConfig);
+            });
+          }
+        }
+      });
+    }
+  };
   var openNotification = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(time, id) {
       var params, resRequestApi, res, data, _ref2, userMessageId, title, summary;
@@ -173,14 +215,16 @@ function Message(props) {
           case 0:
             params = {
               userMessageId: id,
-              clientType: "BROWSER"
+              clientType: 'BROWSER'
             };
             resRequestApi = _getMessageDetailApi || getMessageDetailApi;
             _context.next = 4;
             return resRequestApi(params, gatewayPrefix);
           case 4:
             res = _context.sent;
-            if (res && res.status == "success") {
+            if (res && res.status == 'success') {
+              // 消息语音提示
+              playAudio();
               data = res.data;
               _ref2 = data || {}, userMessageId = _ref2.userMessageId, title = _ref2.title, summary = _ref2.summary;
               api.open(_objectSpread({
@@ -244,7 +288,7 @@ function Message(props) {
         userMessageId = _ref5.id,
         type = _ref5.type;
       if (!userMessageId) return;
-      if (action && action.mode === "recall") {
+      if (action && action.mode === 'recall') {
         // 销毁强提醒
         api.destroy(userMessageId);
         // 销毁后如果弹窗开启关闭弹窗
@@ -275,21 +319,21 @@ function Message(props) {
             return resRequestApi(gatewayPrefix);
           case 3:
             res = _context4.sent;
-            if (res && res.status == "success") {
+            if (res && res.status == 'success') {
               finalOrigin = socketOrigin ? socketOrigin : "ws://".concat(window.location.host);
               socket = io(finalOrigin, {
-                transports: ["websocket"],
+                transports: ['websocket'],
                 path: "".concat(socketPathPrefix, "/message/socket.io"),
                 query: {
                   sessionId: res.data,
-                  clientType: "BROWSER"
+                  clientType: 'BROWSER'
                 }
               }); // 记录socket连接信息，用于关闭socket连接
               socketConnectInfo.current = socket;
               // 监听从服务器传来的消息
-              socket.on("push", getSocketPostMessage);
+              socket.on('push', getSocketPostMessage);
               // socket重连
-              socket.on("reconnect_attempt", /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+              socket.on('reconnect_attempt', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
                 var res;
                 return _regeneratorRuntime().wrap(function _callee3$(_context3) {
                   while (1) switch (_context3.prev = _context3.next) {
@@ -298,10 +342,10 @@ function Message(props) {
                       return resRequestApi;
                     case 2:
                       res = _context3.sent;
-                      if (res && res.status == "success") {
+                      if (res && res.status == 'success') {
                         socket.io.opts.query = {
                           sessionId: res.data,
-                          clientType: "BROWSER"
+                          clientType: 'BROWSER'
                         };
                       }
                     case 4:
@@ -332,7 +376,7 @@ function Message(props) {
             return resRequestApi(gatewayPrefix);
           case 3:
             res = _context5.sent;
-            if (res && res.status === "success") {
+            if (res && res.status === 'success') {
               data = res.data;
               messageOptionRef.current = data || {};
             }
@@ -348,7 +392,7 @@ function Message(props) {
   }();
   return wrapCSSVar(/*#__PURE__*/React.createElement("div", {
     className: classnames(hashId, cssVarCls, "".concat(messagePrefixCls, "-wrapper"))
-  }, contextHolder, /*#__PURE__*/React.createElement(_Badge, _extends({
+  }, contextHolder, contextHolderModal, /*#__PURE__*/React.createElement(_Badge, _extends({
     count: messageTotal,
     offset: [6, 5]
   }, _badgeOption), /*#__PURE__*/React.createElement(CommonIcon, {
@@ -358,16 +402,16 @@ function Message(props) {
   })), /*#__PURE__*/React.createElement(_Drawer, {
     bodyStyle: {
       height: "calc(100% - ".concat(delHeight, "px)"),
-      overflow: "visible"
+      overflow: 'visible'
     },
-    size: "middle",
+    size: 'middle',
     onClose: onClose,
     open: visible,
     closeIcon: closable,
     headerStyle: {
       height: 0,
-      border: "none",
-      overflow: "hidden"
+      border: 'none',
+      overflow: 'hidden'
     },
     rootClassName: classnames("".concat(messagePrefixCls, "-drawer"), _defineProperty({}, "".concat(messagePrefixCls, "-drawer-has-cloable"), closable)),
     destroyOnClose: true,
@@ -393,16 +437,20 @@ function Message(props) {
     conditionsRef: conditionsRef,
     messagePrefixCls: messagePrefixCls,
     renderMessageDateFormat: renderMessageDateFormat
-  }))));
+  })), enableVoicePrompt && /*#__PURE__*/React.createElement("audio", {
+    ref: audioRef,
+    preload: "auto",
+    src: customAudioSrc || audioMp3
+  })));
 }
 Message.defaultProps = {
   pageSize: 30,
   hideOnSinglePage: false,
   headerHeight: 48,
-  gatewayPrefix: "",
+  gatewayPrefix: '',
   isClose: false,
   timeout: 3000,
-  socketPathPrefix: "",
+  socketPathPrefix: '',
   closable: false
 };
 Message.propTypes = {

package/lib/ConfigProvider/ConfigProvider.js

@@ -34,7 +34,7 @@ var CWConfigProvider = function CWConfigProvider(_ref) {
     locales = _ref$locales === void 0 ? {} : _ref$locales,
     children = _ref.children,
     _ref$hasAppHolder = _ref.hasAppHolder,
-    hasAppHolder = _ref$hasAppHolder === void 0 ? true : _ref$hasAppHolder,
+    hasAppHolder = _ref$hasAppHolder === void 0 ? false : _ref$hasAppHolder,
     resProps = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),

package/lib/SiderMenu/index.style.js

@@ -7,7 +7,7 @@ var genCustomSiderMenuStyle = function genCustomSiderMenuStyle(token) {
   var prefixCls = token.antCls,
     iconCls = token.iconCls;
   var SiderMenuPrefix = "".concat(prefixCls, "-sider-menu");
-  return _defineProperty(_defineProperty(_defineProperty({}, "".concat(SiderMenuPrefix, "-goup-label"), {
+  return _defineProperty({}, "".concat(SiderMenuPrefix, "-cw-menu-box"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(SiderMenuPrefix, "-goup-label"), {
     borderBottom: "1px solid rgb(246, 247, 248)",
     width: "calc(100% + 14px)",
     marginLeft: "-7px",
@@ -29,9 +29,9 @@ var genCustomSiderMenuStyle = function genCustomSiderMenuStyle(token) {
     color: token.colorPrimary
   }, iconCls, {
     transform: "rotate(180deg)"
-  }))), "".concat(SiderMenuPrefix, "-cw-menu-box-collapsed"), _defineProperty({}, "".concat(SiderMenuPrefix, "-expand-arrow"), {
+  }))), "&".concat(SiderMenuPrefix, "-cw-menu-box-collapsed"), _defineProperty({}, "".concat(SiderMenuPrefix, "-expand-arrow"), {
     display: "none"
-  }));
+  })));
 };
 // ============================== Export ==============================
 export default genStyleHooks("SiderMenu", function (token) {

package/lib/locales/en_US.json

@@ -67,7 +67,7 @@
   "d9ef3e74-3325-4272-aa97-2b861fdcf8ff": "Load failed",
   "dd25dcba-5aea-4f44-9653-9ff61442e830": "Back",
   "dd9a42ea-9eca-4315-b925-8cc97cacfd41": "Absolute",
-  "dda16720-d447-4d73-9e71-b5af7b5bbcfd": "Click or drag files to this area",
+  "de6eaecc-9d39-41f1-82d3-80694c558028": "Message alerts can be played automatically only when interactive behavior is required",
   "df9a3bfb-00df-44cd-9761-87dc21ffc0e8": "Smooth forward",
   "e1f25f97-3a00-4e98-b73c-069638e57184": "The browser version is too early.  We recommended that upgrade the browser to avoid potential security risks",
   "e2008629-6fc2-4222-b28c-ada43aa79a74": "Does not match the input format, please re-enter",

package/lib/locales/zh_CN.json

@@ -67,7 +67,7 @@
   "d9ef3e74-3325-4272-aa97-2b861fdcf8ff": "加载失败",
   "dd25dcba-5aea-4f44-9653-9ff61442e830": "上一步",
   "dd9a42ea-9eca-4315-b925-8cc97cacfd41": "绝对",
-  "dda16720-d447-4d73-9e71-b5af7b5bbcfd": "单击或拖动文件到此区域",
+  "de6eaecc-9d39-41f1-82d3-80694c558028": "消息提醒需要有交互行为才可以自动播放",
   "df9a3bfb-00df-44cd-9761-87dc21ffc0e8": "向前平滑",
   "e1f25f97-3a00-4e98-b73c-069638e57184": "浏览器版本过低，为避免可能存在的安全隐患，推荐升级一下浏览器",
   "e2008629-6fc2-4222-b28c-ada43aa79a74": "不符合输入格式,请重新输入",

package/lib/locales/zh_TW.json

@@ -67,7 +67,7 @@
   "d9ef3e74-3325-4272-aa97-2b861fdcf8ff": "加載失敗",
   "dd25dcba-5aea-4f44-9653-9ff61442e830": "上一步",
   "dd9a42ea-9eca-4315-b925-8cc97cacfd41": "絕對",
-  "dda16720-d447-4d73-9e71-b5af7b5bbcfd": "單擊或拖動檔案到此區域",
+  "de6eaecc-9d39-41f1-82d3-80694c558028": "消息提醒需要有交互行爲纔可以自動播放",
   "df9a3bfb-00df-44cd-9761-87dc21ffc0e8": "向前平滑",
   "e1f25f97-3a00-4e98-b73c-069638e57184": "瀏覽器版本過低，爲避免可能存在的安全隱患，推薦升級一下瀏覽器",
   "e2008629-6fc2-4222-b28c-ada43aa79a74": "不符合輸入格式,請重新輸入",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chaoswise/ui",
   "packageName": "chaoswiseUI",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "description": "公共UI库",
   "keywords": [
     "ui",