@seafile/sdoc-editor 0.2.27 → 0.2.29-beta

package/dist/basic-sdk/extension/plugins/list/transforms/normalize-list-item.js

@@ -2,15 +2,15 @@ import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIt
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import { Transforms, Editor, Path, Element } from '@seafile/slate';
-import { LIST_LIC } from '../../../constants';
+import { PARAGRAPH } from '../../../constants';
 import { getChildren, getDeepInlineChildren, match } from '../../../core';
 import { getListTypes } from '../queries';
 import { movedListItemUp } from './move-list-item-up';
-import { generateEmptyListLic } from '../model';
+import { generateEmptyListContent } from '../model';
 export var normalizeListItem = function normalizeListItem(editor, _ref) {
   var listItem = _ref.listItem;
   var changed = false;
-  var validLiChildrenTypes = [].concat(_toConsumableArray(getListTypes()), [LIST_LIC]);
+  var validLiChildrenTypes = [].concat(_toConsumableArray(getListTypes()), [PARAGRAPH]);
   var _listItem = _slicedToArray(listItem, 2),
     liPath = _listItem[1];
   var liChildren = getChildren(listItem);
@@ -29,14 +29,14 @@ export var normalizeListItem = function normalizeListItem(editor, _ref) {
     firstLiChildNode = _ref7[0],
     firstLiChildPath = _ref7[1];
   if (!firstLiChild || !Editor.isBlock(editor, firstLiChildNode)) {
-    var emptyLic = generateEmptyListLic();
-    Transforms.insertNodes(editor, emptyLic, {
+    var itemContent = generateEmptyListContent();
+    Transforms.insertNodes(editor, itemContent, {
       at: liPath.concat([0])
     });
     return true;
   }
   if (Editor.isBlock(editor, firstLiChildNode) && !match(firstLiChildNode, [], {
-    type: [LIST_LIC]
+    type: [PARAGRAPH]
   })) {
     if (match(firstLiChildNode, [], {
       type: getListTypes()
@@ -59,7 +59,7 @@ export var normalizeListItem = function normalizeListItem(editor, _ref) {
       return true;
     }
     Transforms.setNodes(editor, {
-      type: LIST_LIC
+      type: PARAGRAPH
     }, {
       at: firstLiChildPath
     });

package/dist/basic-sdk/extension/plugins/list/transforms/toggle-list.js

@@ -1,25 +1,23 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { Node, Range, Transforms, Element, Editor } from '@seafile/slate';
-import { LIST_ITEM, LIST_LIC, PARAGRAPH, INSERT_POSITION } from '../../../constants';
-import { findNode, getNodeEntries, getNodeType, getSelectedNodeEntryByType, isRangeAcrossBlocks, generateEmptyElement } from '../../../core';
+import { LIST_ITEM, PARAGRAPH, INSERT_POSITION } from '../../../constants';
+import { findNode, getNodeEntries, getNodeType, getSelectedNodeEntryByType, isRangeAcrossBlocks } from '../../../core';
 import { getListItemEntry, getListTypes } from '../queries';
 import { unwrapList } from './unwrap-list';
-import { generateEmptyList, generateEmptyListItem } from '../model';
+import { generateEmptyList, generateEmptyListContent, generateEmptyListItem } from '../model';
 var wrapLineList = function wrapLineList(editor, type) {
   var list = generateEmptyList(type);
   Transforms.wrapNodes(editor, list);
   var nodeEntry = getSelectedNodeEntryByType(editor, PARAGRAPH);
   if (!nodeEntry) return;
+
+  // select is paragraph
+  // 1 handle paragraph
+
+  // 2 wrap list_item
   var _nodeEntry = _slicedToArray(nodeEntry, 2),
-    node = _nodeEntry[0],
     path = _nodeEntry[1];
-  if (node.type !== LIST_LIC) {
-    // paragraph to list-lic
-    Transforms.setNodes(editor, {
-      type: LIST_LIC
-    });
-  }
   var listItem = generateEmptyListItem();
   Transforms.wrapNodes(editor, listItem, {
     at: path
@@ -91,17 +89,16 @@ var wrapRangeList = function wrapRangeList(editor, type) {
           mode: 'all'
         });
       } else {
-        if (![LIST_LIC].includes(n[0].type)) {
-          Transforms.setNodes(editor, {
-            type: LIST_LIC
-          }, {
-            at: n[1]
-          });
-        }
+        // select content is paragraph
+        // 1 handle content
+
+        // 2. wrap list_item
         var listItem = generateEmptyListItem();
         Transforms.wrapNodes(editor, listItem, {
           at: n[1]
         });
+
+        // 3. wrap list
         var list = generateEmptyList(type);
         Transforms.wrapNodes(editor, list, {
           at: n[1]
@@ -113,9 +110,9 @@ var wrapRangeList = function wrapRangeList(editor, type) {
 var toggleList = function toggleList(editor, type, insertPosition) {
   if (insertPosition === INSERT_POSITION.AFTER) {
     var list = generateEmptyList(type);
-    var p = generateEmptyElement(PARAGRAPH);
+    var listContent = generateEmptyListContent();
     var path = Editor.path(editor, editor.selection);
-    Transforms.insertNodes(editor, p, {
+    Transforms.insertNodes(editor, listContent, {
       at: [path[0] + 1]
     });
     Transforms.select(editor, [path[0] + 1]);

package/dist/basic-sdk/extension/plugins/list/transforms/unwrap-list.js

@@ -1,6 +1,6 @@
 import { Editor, Transforms, Element, Node } from '@seafile/slate';
-import { LIST_ITEM, LIST_LIC, PARAGRAPH } from '../../../constants';
-import { getAboveBlockNode, getAboveNode, getNodeType } from '../../../core';
+import { LIST_ITEM } from '../../../constants';
+import { getAboveNode, getNodeType } from '../../../core';
 import { getListTypes } from '../queries';
 export var unwrapList = function unwrapList(editor) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
@@ -25,17 +25,7 @@ export var unwrapList = function unwrapList(editor) {
   };
   Editor.withoutNormalizing(editor, function () {
     do {
-      var licEntry = getAboveBlockNode(editor, {
-        at: at,
-        match: {
-          type: LIST_LIC
-        }
-      });
-      if (licEntry) {
-        Transforms.setNodes(editor, {
-          type: PARAGRAPH
-        });
-      }
+      // unwrap list_item
       Transforms.unwrapNodes(editor, {
         at: at,
         match: function match(n) {
@@ -43,6 +33,8 @@ export var unwrapList = function unwrapList(editor) {
         },
         split: true
       });
+
+      // unwrap list
       Transforms.unwrapNodes(editor, {
         at: at,
         match: function match(n) {

package/dist/basic-sdk/extension/plugins/table/helpers.js

@@ -31,7 +31,6 @@ export var isTableMenuDisabled = function isTableMenuDisabled(editor, readonly)
         if (type === ELEMENT_TYPE.UNORDERED_LIST) return true;
         if (type === ELEMENT_TYPE.BLOCKQUOTE) return true;
         if (type === ELEMENT_TYPE.LIST_ITEM) return true;
-        if (type === ELEMENT_TYPE.LIST_LIC) return true;
         if (type === ELEMENT_TYPE.TABLE) return true;
         if (type === ELEMENT_TYPE.TABLE_CELL) return true;
         if (type === ELEMENT_TYPE.TABLE_ROW) return true;

package/dist/basic-sdk/extension/render/custom-element.js

@@ -2,7 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { useCallback } from 'react';
 import { useSlateStatic } from '@seafile/slate-react';
-import { BLOCKQUOTE, LINK, CHECK_LIST_ITEM, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, LIST_ITEM, LIST_LIC, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST, CODE_BLOCK, CODE_LINE, IMAGE, ELEMENT_TYPE, SDOC_LINK, FILE_LINK, TITLE, SUBTITLE } from '../constants';
+import { BLOCKQUOTE, LINK, CHECK_LIST_ITEM, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, LIST_ITEM, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST, CODE_BLOCK, CODE_LINE, IMAGE, ELEMENT_TYPE, SDOC_LINK, FILE_LINK, TITLE, SUBTITLE } from '../constants';
 import { BlockquotePlugin, LinkPlugin, CheckListPlugin, HeaderPlugin, ListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, SdocLinkPlugin, ParagraphPlugin, FileLinkPlugin } from '../plugins';
 import EventBus from '../../utils/event-bus';
 import { INTERNAL_EVENT } from '../../constants';
@@ -19,9 +19,15 @@ var CustomRenderElement = function CustomRenderElement(props) {
   switch (element.type) {
     case PARAGRAPH:
       {
+        var parentNode = getParentNode(editor.children, element.id);
+        if (parentNode && parentNode.type === LIST_ITEM) {
+          var _ParagraphPlugin$rend = _slicedToArray(ParagraphPlugin.renderElements, 1),
+            _renderParagraph = _ParagraphPlugin$rend[0];
+          return _renderParagraph(props);
+        }
         attributes['onMouseEnter'] = onMouseEnter;
-        var _ParagraphPlugin$rend = _slicedToArray(ParagraphPlugin.renderElements, 1),
-          renderParagraph = _ParagraphPlugin$rend[0];
+        var _ParagraphPlugin$rend2 = _slicedToArray(ParagraphPlugin.renderElements, 1),
+          renderParagraph = _ParagraphPlugin$rend2[0];
         return renderParagraph(props);
       }
     case TITLE:
@@ -76,12 +82,6 @@ var CustomRenderElement = function CustomRenderElement(props) {
           renderListItem = _ListPlugin$renderEle2[1];
         return renderListItem(props, editor);
       }
-    case LIST_LIC:
-      {
-        var _ListPlugin$renderEle3 = _slicedToArray(ListPlugin.renderElements, 3),
-          renderListLic = _ListPlugin$renderEle3[2];
-        return renderListLic(props, editor);
-      }
     case CHECK_LIST_ITEM:
       {
         attributes['onMouseEnter'] = onMouseEnter;
@@ -105,8 +105,8 @@ var CustomRenderElement = function CustomRenderElement(props) {
     case IMAGE:
       {
         var _editor$element_comme;
-        var parentNode = getParentNode(editor.children, element.id);
-        var comments = ((_editor$element_comme = editor.element_comments_map) === null || _editor$element_comme === void 0 ? void 0 : _editor$element_comme[parentNode.id]) || [];
+        var _parentNode = getParentNode(editor.children, element.id);
+        var comments = ((_editor$element_comme = editor.element_comments_map) === null || _editor$element_comme === void 0 ? void 0 : _editor$element_comme[_parentNode.id]) || [];
         var unresolvedComments = comments && comments.filter(function (item) {
           return !item.resolved;
         });
@@ -153,9 +153,9 @@ var CustomRenderElement = function CustomRenderElement(props) {
       }
     default:
       {
-        var _ParagraphPlugin$rend2 = _slicedToArray(ParagraphPlugin.renderElements, 1),
-          _renderParagraph = _ParagraphPlugin$rend2[0];
-        return _renderParagraph(props);
+        var _ParagraphPlugin$rend3 = _slicedToArray(ParagraphPlugin.renderElements, 1),
+          _renderParagraph2 = _ParagraphPlugin$rend3[0];
+        return _renderParagraph2(props);
       }
   }
 };

package/dist/basic-sdk/socket/socket-client.js

@@ -143,6 +143,10 @@ var SocketClient = /*#__PURE__*/_createClass(function SocketClient(config) {
     var socketManager = SocketManager.getInstance();
     socketManager.receiveRemoveDocumentError();
   };
+  this.receiveNewNotification = function (notification) {
+    var socketManager = SocketManager.getInstance();
+    socketManager.receiveNewNotification(notification);
+  };
   this.config = config;
   this.isReconnect = false;
   this.socket = io(config.sdocServer, {
@@ -170,6 +174,9 @@ var SocketClient = /*#__PURE__*/_createClass(function SocketClient(config) {
   this.socket.on('doc-removed', this.receiveRemoveDocument);
   this.socket.on('doc-removed-error', this.receiveRemoveDocumentError);
   this.socket.on('update-cursor', this.receiveCursorLocation);
+
+  // notification
+  this.socket.on('new-notification', this.receiveNewNotification);
   this.socket.io.on('reconnect', this.onReconnect);
   this.socket.io.on('reconnect_attempt', this.onReconnectAttempt);
   this.socket.io.on('reconnect_error', this.onReconnectError);

package/dist/basic-sdk/socket/socket-manager.js

@@ -48,6 +48,9 @@ var SocketManager = /*#__PURE__*/_createClass(function SocketManager(editor, _do
   this.receiveDocumentReplacedError = function () {
     _this.eventBus.dispatch(EXTERNAL_EVENT.DOCUMENT_REPLACED_ERROR);
   };
+  this.receiveNewNotification = function (notification) {
+    _this.eventBus.dispatch(EXTERNAL_EVENT.NEW_NOTIFICATION, notification);
+  };
   this.onReceiveLocalOperations = function (operations) {
     _this.pendingOperationList.push(operations);
     var lastOpBeginTime = new Date().getTime();

package/dist/components/doc-operations/index.js

@@ -9,6 +9,7 @@ import CommentsOperation from './comments-operation';
 import ShareOperation from './share-operation';
 import TagOperation from './tag-operation';
 import { isMobile } from '../../utils';
+import NotificationOperation from './notifications-operation';
 import './style.css';
 var DocOperations = function DocOperations(_ref) {
   var isShowChanges = _ref.isShowChanges,
@@ -33,6 +34,6 @@ var DocOperations = function DocOperations(_ref) {
     handleViewChangesToggle: handleViewChangesToggle,
     handleRevisionMerged: handleRevisionMerged,
     handleRevisionPublished: handleRevisionPublished
-  }), !isPublished && /*#__PURE__*/React.createElement(TagOperation, null), !isPublished && /*#__PURE__*/React.createElement(CommentsOperation, null), !isSdocRevision && /*#__PURE__*/React.createElement(ShareOperation, null), /*#__PURE__*/React.createElement(HistoryOperation, null), !isPublished && /*#__PURE__*/React.createElement(CollaboratorsOperation, null), !isSdocRevision && /*#__PURE__*/React.createElement(MoreOperations, null));
+  }), !isPublished && /*#__PURE__*/React.createElement(TagOperation, null), !isPublished && /*#__PURE__*/React.createElement(NotificationOperation, null), !isPublished && /*#__PURE__*/React.createElement(CommentsOperation, null), !isSdocRevision && /*#__PURE__*/React.createElement(ShareOperation, null), /*#__PURE__*/React.createElement(HistoryOperation, null), !isPublished && /*#__PURE__*/React.createElement(CollaboratorsOperation, null), !isSdocRevision && /*#__PURE__*/React.createElement(MoreOperations, null));
 };
 export default withTranslation('sdoc-editor')(DocOperations);

package/dist/components/doc-operations/notifications-operation/index.css

@@ -0,0 +1,14 @@
+.sdoc-notification-icon-container .sdoc-notification-count {
+  position: absolute;
+  color: #fff;
+  font-size: 12px;
+  top: -7px;
+  right: -6px;
+  padding: 2px;
+  background: #fc6440;
+  border-radius: 50%;
+  min-width: 20px;
+  min-height: 20px;
+  transform: scale(.7);
+  text-align: center;
+}

package/dist/components/doc-operations/notifications-operation/index.js

@@ -0,0 +1,170 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { EventBus } from '../../../basic-sdk';
+import { EXTERNAL_EVENT } from '../../../constants';
+import { createNotify, getErrorMsg } from '../../../utils';
+import { useCollaborators } from '../../../hooks';
+import context from '../../../context';
+import { Notification } from '../../../model';
+import NotificationPopover from './notifications-popover';
+import AllNotificationsDialog from './notifications-dialog';
+import toaster from '../../toast';
+import './index.css';
+var PER_PAGE = 25;
+var NotificationOperation = function NotificationOperation() {
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    notifications = _useState2[0],
+    setNotifications = _useState2[1];
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hasMore = _useState4[0],
+    setHasMore = _useState4[1];
+  var _useState5 = useState(1),
+    _useState6 = _slicedToArray(_useState5, 2),
+    page = _useState6[0],
+    setPage = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    showNotificationsDialog = _useState8[0],
+    setShowNotificationsDialog = _useState8[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useCollaborators = useCollaborators(),
+    collaborators = _useCollaborators.collaborators;
+  var id = 'sdoc-notification';
+  var popupBrowserCommentNotification = useCallback(function (notification) {
+    if (!notification) return;
+    var author = notification.author,
+      msgType = notification.msg_type,
+      reply = notification.reply,
+      comment = notification.comment;
+    var authorInfo = collaborators.find(function (collaborator) {
+      return collaborator.email === author;
+    });
+    var notificationContent = comment || reply;
+    var titleKey = msgType === 'comment' ? 'xxx_added_a_new_comment' : 'xxx_added_a_reply';
+    var title = t(titleKey, {
+      author: authorInfo ? authorInfo.name : t('Unknown')
+    });
+    var options = {
+      body: "".concat(notificationContent)
+    };
+    createNotify(title, options);
+  }, [collaborators, t]);
+  var _listNotifications = useCallback(function (page) {
+    var perPage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : PER_PAGE;
+    var forceAcquisition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    if (!forceAcquisition && !hasMore) return;
+    var newNotifications = page === 1 ? [] : notifications.slice(0);
+    context.listNotifications(page, perPage).then(function (res) {
+      var _res$data = res.data,
+        loadedNotifications = _res$data.notifications,
+        total_count = _res$data.total_count;
+      var hasMore = total_count > notifications.length + newNotifications.length;
+      loadedNotifications.forEach(function (n) {
+        var notification = new Notification(n);
+        newNotifications.push(notification);
+      });
+      setHasMore(hasMore);
+      setPage(page + 1);
+      setNotifications(newNotifications);
+    }).catch(function (error) {
+      var errMsg = getErrorMsg(error, true);
+      if (!error.response || error.response.status !== 403) {
+        toaster.danger(t(errMsg));
+      }
+    });
+  }, [notifications, hasMore, t]);
+  var onNewNotification = useCallback(function (notification) {
+    popupBrowserCommentNotification(notification);
+    _listNotifications(1, PER_PAGE, true);
+  }, [popupBrowserCommentNotification, _listNotifications]);
+  useEffect(function () {
+    _listNotifications(1, PER_PAGE);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(function () {
+    var eventBus = EventBus.getInstance();
+    var unsubscribeNewNotification = eventBus.subscribe(EXTERNAL_EVENT.NEW_NOTIFICATION, onNewNotification);
+    return function () {
+      unsubscribeNewNotification();
+    };
+  }, [onNewNotification]);
+  var markAllNotificationsRead = useCallback(function () {
+    context.markAllNotificationsRead().then(function (res) {
+      var newNotifications = notifications.slice(0).map(function (n) {
+        n.seen = true;
+        return n;
+      });
+      setNotifications(newNotifications);
+    }).catch(function (error) {
+      var errMsg = getErrorMsg(error, true);
+      if (!error.response || error.response.status !== 403) {
+        toaster.danger(t(errMsg));
+      }
+    });
+  }, [notifications, t]);
+  var markNotificationRead = useCallback(function (notificationId) {
+    context.markNotificationRead(notificationId).then(function (res) {
+      var newNotifications = notifications.slice(0).map(function (n) {
+        if (n.id === notificationId) {
+          n.seen = true;
+        }
+        return n;
+      });
+      setNotifications(newNotifications);
+    }).catch(function (error) {
+      var errMsg = getErrorMsg(error, true);
+      if (!error.response || error.response.status !== 403) {
+        toaster.danger(t(errMsg));
+      }
+    });
+  }, [notifications, t]);
+  var deleteAllNotifications = useCallback(function () {
+    context.deleteAllNotifications().then(function (res) {
+      setNotifications([]);
+      setPage(1);
+      setHasMore(true);
+    }).catch(function (error) {
+      var errMsg = getErrorMsg(error);
+      if (!error.response || error.response.status !== 403) {
+        toaster.danger(t(errMsg));
+      }
+    });
+  }, [t]);
+  var toggleNotificationsDialog = useCallback(function () {
+    setShowNotificationsDialog(!showNotificationsDialog);
+  }, [showNotificationsDialog]);
+  var unreadNotificationsCount = notifications.filter(function (n) {
+    return !n.seen;
+  }).length;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    className: "op-item sdoc-notification-icon-container",
+    id: id
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-notification"
+  }), unreadNotificationsCount > 0 && /*#__PURE__*/React.createElement("span", {
+    className: "sdoc-notification-count"
+  }, unreadNotificationsCount)), /*#__PURE__*/React.createElement(NotificationPopover, {
+    target: id,
+    notifications: notifications,
+    listNotifications: function listNotifications() {
+      return _listNotifications(page, PER_PAGE);
+    },
+    markAllNotificationsRead: markAllNotificationsRead,
+    markNotificationRead: markNotificationRead,
+    onToggleNotificationsDialog: toggleNotificationsDialog
+  }), showNotificationsDialog && /*#__PURE__*/React.createElement(AllNotificationsDialog, {
+    notifications: notifications,
+    listNotifications: function listNotifications() {
+      return _listNotifications(page, PER_PAGE);
+    },
+    markNotificationRead: markNotificationRead,
+    markAllNotificationsRead: markAllNotificationsRead,
+    deleteAllNotifications: deleteAllNotifications,
+    toggle: toggleNotificationsDialog
+  }));
+};
+export default NotificationOperation;

package/dist/components/doc-operations/notifications-operation/notifications-dialog/index.css

@@ -0,0 +1,97 @@
+.sdoc-all-notifications-dialog {
+  width: 720px;
+  max-width: 720px;
+  height: calc(100% - 56px);
+}
+
+.sdoc-all-notifications-dialog .modal-content {
+  height: 100%;
+}
+
+.sdoc-all-notifications-dialog .sdoc-notification-header-close {
+  display: flex;
+}
+
+.sdoc-all-notifications-dialog .sdoc-notification-dropdown-toggle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 24px;
+  width: 24px;
+}
+
+.sdoc-all-notifications-dialog .sdoc-notification-operation-btn {
+  height: 24px;
+  width: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #000;
+  opacity: .5;
+}
+
+.sdoc-all-notifications-dialog .sdoc-notification-operation-btn:hover {
+  opacity: .75;
+  cursor: pointer;
+}
+
+.sdoc-all-notifications-dialog .sdoc-all-notifications-body  {
+  height: 100%;
+  overflow: hidden;
+  padding: 0;
+}
+
+.sdoc-all-notifications-dialog .sdoc-all-notifications-container {
+  overflow: auto;
+  padding: 2rem 1rem;
+  height: 100%;
+}
+
+.sdoc-all-notifications-dialog .sdoc-all-notifications-container table {
+  width: 100%;
+  table-layout: fixed;
+}
+
+.sdoc-all-notifications-dialog .sdoc-all-notifications-container .sdoc-notifications-table-header-sm {
+  font-size: 13px;
+}
+
+.sdoc-all-notifications-dialog .sdoc-all-notifications-container table thead tr {
+  height: 2.1875rem;
+}
+
+.sdoc-all-notifications-dialog .sdoc-all-notifications-container table th {
+  padding: 0.3125rem 0.1875rem;
+  border-bottom: 1px solid #eee;
+  text-align: left;
+  font-weight: 400;
+  line-height: 1.6;
+  color: #9c9c9c;
+}
+
+.sdoc-all-notifications-dialog .sdoc-all-notifications-container table td {
+  padding: 0.5rem 0.1875rem;
+  border-bottom: 1px solid #eee;
+  color: #333;
+  font-size: 14px;
+  word-break: break-all;
+}
+
+.sdoc-all-notifications-dialog .sdoc-all-notifications-container table tbody tr:hover {
+  background: #f5f5f5;
+  cursor: pointer;
+}
+
+.sdoc-all-notifications-dialog .sdoc-empty-notifications-tip {
+  height: 100%;
+  width: 100%;
+  padding: 5.5em 1em;
+  border-radius: 3px;
+  background-color: #fff;
+  text-align: center;
+}
+
+.sdoc-all-notifications-dialog .sdoc-empty-notifications-tip .sdoc-empty-notifications-img-tip {
+  width: 100px;
+  height: 100px;
+}

package/dist/components/doc-operations/notifications-operation/notifications-dialog/index.js

@@ -0,0 +1,107 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useCallback, useState, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Modal, ModalHeader, ModalBody, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+import context from '../../../../context';
+import Notification from './notification';
+import './index.css';
+var AllNotificationsDialog = function AllNotificationsDialog(_ref) {
+  var notifications = _ref.notifications,
+    toggle = _ref.toggle,
+    markAllNotificationsRead = _ref.markAllNotificationsRead,
+    deleteAllNotifications = _ref.deleteAllNotifications,
+    markNotificationRead = _ref.markNotificationRead,
+    listNotifications = _ref.listNotifications;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isMenuShow = _useState2[0],
+    setMenuShow = _useState2[1];
+  var containerRef = useRef(null);
+  var tableRef = useRef(null);
+  var toggleMenu = useCallback(function () {
+    setMenuShow(!isMenuShow);
+  }, [isMenuShow]);
+  var onScroll = useCallback(function () {
+    if (containerRef.current.offsetHeight + containerRef.current.scrollTop + 1 >= tableRef.current.offsetHeight + 64) {
+      // 64 is padding height
+      listNotifications();
+    }
+  }, [listNotifications, containerRef, tableRef]);
+  var renderHeaderRowBtn = useCallback(function () {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "sdoc-notification-header-close"
+    }, /*#__PURE__*/React.createElement(Dropdown, {
+      isOpen: isMenuShow,
+      toggle: toggleMenu
+    }, /*#__PURE__*/React.createElement(DropdownToggle, {
+      tag: "span",
+      "data-toggle": "dropdown",
+      "aria-expanded": isMenuShow,
+      className: "sdoc-notification-dropdown-toggle"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "sdoc-notification-operation-btn"
+    }, /*#__PURE__*/React.createElement("i", {
+      className: "sdocfont sdoc-more"
+    }))), /*#__PURE__*/React.createElement(DropdownMenu, {
+      right: true,
+      className: "sdoc-dropdown-menu large"
+    }, /*#__PURE__*/React.createElement(DropdownItem, {
+      className: "sdoc-dropdown-menu-item",
+      onClick: markAllNotificationsRead
+    }, t('Mark_all_as_read')), /*#__PURE__*/React.createElement(DropdownItem, {
+      className: "sdoc-dropdown-menu-item",
+      onClick: deleteAllNotifications
+    }, t('Delete_all_notifications')))), /*#__PURE__*/React.createElement("div", {
+      className: "sdoc-notification-operation-btn",
+      onClick: toggle
+    }, /*#__PURE__*/React.createElement("i", {
+      className: "sdocfont sdoc-sm-close"
+    })));
+  }, [deleteAllNotifications, isMenuShow, markAllNotificationsRead, t, toggle, toggleMenu]);
+  var renderNotifications = useCallback(function () {
+    if (!Array.isArray(notifications) || notifications.length === 0) {
+      var mediaUrl = context.getSetting('mediaUrl');
+      return /*#__PURE__*/React.createElement("div", {
+        className: "sdoc-empty-notifications-tip"
+      }, /*#__PURE__*/React.createElement("img", {
+        src: mediaUrl + 'img/no-items-tip.png',
+        className: "sdoc-empty-notifications-img-tip",
+        alt: ""
+      }), /*#__PURE__*/React.createElement("p", null, t('No_notification')));
+    }
+    return /*#__PURE__*/React.createElement("table", {
+      ref: tableRef
+    }, /*#__PURE__*/React.createElement("thead", {
+      className: "sdoc-notifications-table-header-sm"
+    }, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
+      width: "10%"
+    }), /*#__PURE__*/React.createElement("th", {
+      width: "70%"
+    }, t('News')), /*#__PURE__*/React.createElement("th", {
+      width: "20%"
+    }, t('Update_date')))), /*#__PURE__*/React.createElement("tbody", null, notifications.map(function (item) {
+      return /*#__PURE__*/React.createElement(Notification, {
+        key: item.id,
+        notification: item,
+        markNotificationRead: markNotificationRead
+      });
+    })));
+  }, [notifications, t, markNotificationRead]);
+  return /*#__PURE__*/React.createElement(Modal, {
+    isOpen: true,
+    toggle: toggle,
+    className: "sdoc-all-notifications-dialog"
+  }, /*#__PURE__*/React.createElement(ModalHeader, {
+    close: renderHeaderRowBtn(),
+    toggle: toggle
+  }, t('All_notifications')), /*#__PURE__*/React.createElement(ModalBody, {
+    className: "sdoc-all-notifications-body"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-all-notifications-container",
+    ref: containerRef,
+    onScroll: onScroll
+  }, renderNotifications())));
+};
+export default AllNotificationsDialog;