@abtnode/ux 1.16.20 → 1.16.21-beta-edf184e1

package/lib/notifications/list.js

@@ -0,0 +1,216 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = NotificationsList;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
+var _reactRouterDom = require("react-router-dom");
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Avatar = _interopRequireDefault(require("@mui/material/Avatar"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
+var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
+var _List = _interopRequireDefault(require("@mui/material/List"));
+var _ListItemAvatar = _interopRequireDefault(require("@mui/material/ListItemAvatar"));
+var _ListItemButton = _interopRequireDefault(require("@mui/material/ListItemButton"));
+var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _useTheme = _interopRequireDefault(require("@mui/material/styles/useTheme"));
+var _tag = _interopRequireDefault(require("./tag"));
+var _permission = _interopRequireDefault(require("../permission"));
+var _relativeTime = _interopRequireDefault(require("../relative-time"));
+var _node = require("../contexts/node");
+var _util = require("../util");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+/* eslint-disable operator-linebreak */
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function NotificationsList(_ref) {
+  let {
+    onHide,
+    api,
+    notifications,
+    updateNotifications,
+    viewAllUrl,
+    teamDid
+  } = _ref;
+  const {
+    inService
+  } = (0, _node.useNodeContext)();
+  const {
+    t,
+    locale
+  } = (0, _react.useContext)(_context.LocaleContext);
+  const [showRead, setShowRead] = (0, _react.useState)(true);
+  const [isMarkingAll, setIsMarkingAll] = (0, _react.useState)(false);
+  const navigate = (0, _reactRouterDom.useNavigate)();
+  const theme = (0, _useTheme.default)();
+  let filtered = showRead ? notifications : notifications.filter(x => x.read === false);
+  filtered = filtered.slice(0, 5);
+  const hasUnRead = notifications.filter(x => x.read === false).length > 0;
+  const onUnreadNotifications = async () => {
+    setIsMarkingAll(true);
+    const ids = notifications.filter(x => x.read === false).map(x => x.id).join(',');
+    if (inService) {
+      await api.readBlockletNotifications({
+        input: {
+          id: ids,
+          teamDid
+        }
+      });
+    } else {
+      await api.readNotifications({
+        input: {
+          id: ids
+        }
+      });
+    }
+    updateNotifications();
+    setIsMarkingAll(false);
+  };
+  const handleNotificationClick = (e, notification) => {
+    if (!notification.read) {
+      if (inService) {
+        api.readBlockletNotifications({
+          input: {
+            id: notification.id,
+            teamDid
+          }
+        }).then(() => updateNotifications());
+      } else {
+        api.readNotifications({
+          input: {
+            id: notification.id
+          }
+        }).then(() => updateNotifications());
+      }
+    }
+    onHide(e);
+    navigate(viewAllUrl);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+      component: "h3",
+      variant: "h6",
+      className: "notification-header",
+      children: [t('notification.title'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        component: _reactRouterDom.Link,
+        to: viewAllUrl,
+        "data-cy": "view-all-notifications-btn",
+        onClick: onHide,
+        children: t('notification.viewAll')
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_List.default, {
+      className: "notification-list",
+      style: {
+        maxHeight: 'calc(100vh - 200px)',
+        overflow: 'auto'
+      },
+      children: [filtered.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        component: "p",
+        variant: "body1",
+        className: "notification-tip",
+        children: t('notification.empty')
+      }), filtered.length > 0 && filtered.map(x => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ListItemButton.default, {
+        alignItems: "flex-start",
+        disabled: x.read,
+        onClick: e => handleNotificationClick(e, x),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemAvatar.default, {
+          className: "list-item-avatar",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+              children: x.entityType.substr(0, 1).toUpperCase()
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tag.default, {
+              className: "notification-tag",
+              status: x.severity
+            })]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
+          primary: x.title,
+          secondary: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+            sx: {
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'space-between'
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+              component: "span",
+              sx: {
+                overflow: 'hidden',
+                '-webkit-line-clamp': '3',
+                '-webkit-box-orient': 'vertical',
+                display: '-webkit-box',
+                'text-overflow': 'ellipsis'
+              },
+              children: x.description
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_relativeTime.default, {
+              value: x.createdAt,
+              locale: locale,
+              style: {
+                color: theme.palette.text.secondary,
+                fontSize: '0.875rem',
+                marginTop: '4px'
+              }
+            })]
+          })
+        })]
+      }, x.id))]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+      component: "div",
+      className: "notification-footer",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlLabel.default, {
+        control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+          checked: showRead,
+          onChange: () => setShowRead(!showRead),
+          name: "showRead",
+          color: "primary"
+        }),
+        label: t('notification.showRead')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_permission.default, {
+        permission: inService ? '' : 'mutate_notification',
+        role: inService ? _util.BlockletAdminRoles : [],
+        children: hasUnRead && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+          disabled: isMarkingAll,
+          onClick: onUnreadNotifications,
+          className: "",
+          children: [isMarkingAll && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+            size: 16,
+            style: {
+              marginRight: '1em'
+            }
+          }), t('notification.markAllAsRead')]
+        })
+      })]
+    })]
+  });
+}
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 420px;\n\n  @media (max-width: ", "px) {\n    width: calc(100vw - 10px);\n  }\n\n  .notification-header {\n    padding: 8px 16px;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .notification-tip {\n    padding: 8px 16px;\n  }\n\n  .notification-footer {\n    padding: 8px 16px;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .MuiButtonBase-root {\n    white-space: pre-wrap;\n  }\n\n  .list-item-avatar {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    min-width: 80px;\n\n    .notification-tag {\n      margin-top: 4px;\n    }\n  }\n\n  .MuiButtonBase-root:not(.Mui-disabled) {\n    .MuiAvatar-root {\n      background: ", ";\n    }\n  }\n"])), props => props.theme.breakpoints.values.sm, props => props.theme.palette.primary.light);
+NotificationsList.propTypes = {
+  onHide: _propTypes.default.func,
+  api: _propTypes.default.shape({
+    readNotifications: _propTypes.default.func.isRequired,
+    readBlockletNotifications: _propTypes.default.func.isRequired
+  }).isRequired,
+  notifications: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string,
+    read: _propTypes.default.bool,
+    entityType: _propTypes.default.string,
+    title: _propTypes.default.string,
+    createdAt: _propTypes.default.string,
+    description: _propTypes.default.string
+  }).isRequired).isRequired,
+  updateNotifications: _propTypes.default.func.isRequired,
+  viewAllUrl: _propTypes.default.string.isRequired,
+  teamDid: _propTypes.default.string
+};
+NotificationsList.defaultProps = {
+  onHide: () => {},
+  teamDid: ''
+};

package/lib/notifications/notification.js

@@ -0,0 +1,139 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/styles");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _colors = require("@mui/material/colors");
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
+var _reactRouterDom = require("react-router-dom");
+var _notistack = require("notistack");
+var _useWidth = _interopRequireDefault(require("../hooks/use-width"));
+var _defaultIconVariants = _interopRequireDefault(require("./default-icon-variants"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /* eslint-disable no-unused-vars */ /* eslint-disable operator-linebreak */
+const useStyles = (0, _styles.makeStyles)(theme => {
+  const breakpointsMap = {
+    xl: '400px',
+    lg: '400px',
+    md: '400px',
+    sm: '300px'
+  };
+  // const backgroundColor = emphasize(theme.palette.background.default, theme.palette.mode === 'light' ? 0.8 : 0.98);
+  const backgroundColor = theme.palette.background.default;
+  return {
+    lessPadding: {
+      paddingLeft: 8 * 2.5
+    },
+    contentRoot: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+      display: 'flex',
+      backgroundColor,
+      color: '#fff',
+      alignItems: 'center',
+      padding: '6px 16px',
+      borderRadius: '4px',
+      boxShadow: '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)'
+    }),
+    success: props => ({
+      backgroundColor: "".concat(_colors.green[600], " !important"),
+      width: breakpointsMap[props.breakpoint]
+    }),
+    error: props => ({
+      backgroundColor: "".concat(theme.palette.error.dark, " !important"),
+      width: breakpointsMap[props.breakpoint]
+    }),
+    info: props => ({
+      backgroundColor: "".concat(theme.palette.primary.main, " !important"),
+      width: breakpointsMap[props.breakpoint]
+    }),
+    warning: props => ({
+      backgroundColor: "".concat(_colors.amber[700], " !important"),
+      width: breakpointsMap[props.breakpoint]
+    }),
+    icon: {
+      fontSize: 20
+    },
+    message: {
+      display: 'flex',
+      alignItems: 'center',
+      padding: '8px 0',
+      flex: 1,
+      width: 0
+    },
+    action: {
+      display: 'flex',
+      alignItems: 'center',
+      marginLeft: 'auto',
+      marginRight: -8,
+      width: 44
+    }
+  };
+});
+function NotificationComponent(_ref, ref) {
+  let {
+    keyId: key,
+    notification = {},
+    viewAllUrl
+  } = _ref;
+  const classes = useStyles({
+    breakpoint: (0, _useWidth.default)()
+  });
+  const combinedClassname = [classes.contentRoot, classes.lessPadding, classes[notification.severity]].join(' ');
+  const icon = _defaultIconVariants.default[notification.severity];
+  const {
+    closeSnackbar
+  } = (0, _notistack.useSnackbar)();
+  const onClickDismiss = () => closeSnackbar(key);
+  const navigate = (0, _reactRouterDom.useNavigate)();
+  const onGoNotification = () => {
+    closeSnackbar(key);
+    navigate(viewAllUrl);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_notistack.SnackbarContent, {
+    ref: ref,
+    className: combinedClassname,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: classes.message,
+      children: [icon, /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, {
+        onClick: onGoNotification,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "title",
+          children: notification.title
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "desc",
+          children: notification.description
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classes.action,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+        "aria-label": "close",
+        color: "inherit",
+        onClick: onClickDismiss,
+        size: "large",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {
+          className: classes.icon
+        })
+      }, "close")
+    })]
+  });
+}
+var _default = exports.default = /*#__PURE__*/(0, _react.forwardRef)(NotificationComponent);
+NotificationComponent.propTypes = {
+  viewAllUrl: _propTypes.default.string.isRequired,
+  keyId: _propTypes.default.number.isRequired,
+  notification: _propTypes.default.object.isRequired
+};
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  .title {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    font-weight: bold;\n  }\n  .desc {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n    word-break: break-word;\n  }\n"])));

package/lib/notifications/page.js

@@ -0,0 +1,267 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = NotificationsPage;
+var _react = require("react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _reactRouterDom = require("react-router-dom");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _timeago = require("timeago.js");
+var _List = _interopRequireDefault(require("@mui/material/List"));
+var _ListItem = _interopRequireDefault(require("@mui/material/ListItem"));
+var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _ListItemAvatar = _interopRequireDefault(require("@mui/material/ListItemAvatar"));
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _Avatar = _interopRequireDefault(require("@mui/material/Avatar"));
+var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
+var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
+var _ListItemSecondaryAction = _interopRequireDefault(require("@mui/material/ListItemSecondaryAction"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _VisibilityOff = _interopRequireDefault(require("@mui/icons-material/VisibilityOff"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Pagination = _interopRequireDefault(require("@mui/lab/Pagination"));
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _tag = _interopRequireDefault(require("./tag"));
+var _util = require("../util");
+var _permission = _interopRequireDefault(require("../permission"));
+var _node = require("../contexts/node");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+/* eslint-disable react/jsx-one-expression-per-line */
+/* eslint-disable operator-linebreak */
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function NotificationsPage(_ref) {
+  let {
+    api,
+    paging,
+    loading,
+    notifications,
+    updateNotifications,
+    teamDid
+  } = _ref;
+  const {
+    inService
+  } = (0, _node.useNodeContext)();
+  const [showRead, setShowRead] = (0, _react.useState)(true);
+  const [isMarkingAll, setIsMarkingAll] = (0, _react.useState)(false);
+  const {
+    t,
+    locale
+  } = (0, _react.useContext)(_context.LocaleContext);
+  const onUnreadNotifications = async () => {
+    setIsMarkingAll(true);
+    const ids = notifications.filter(x => x.read === false).map(x => x.id).join(',');
+    if (inService) {
+      await api.readBlockletNotifications({
+        input: {
+          id: ids,
+          teamDid
+        }
+      });
+    } else {
+      await api.readNotifications({
+        input: {
+          id: ids
+        }
+      });
+    }
+    updateNotifications();
+    setIsMarkingAll(false);
+  };
+  const markAsRead = async id => {
+    if (inService) {
+      await api.readBlockletNotifications({
+        input: {
+          id,
+          teamDid
+        }
+      });
+    } else {
+      await api.readNotifications({
+        input: {
+          id
+        }
+      });
+    }
+    updateNotifications();
+  };
+  const filtered = showRead ? notifications : notifications.filter(x => x.read === false);
+  const hasUnRead = notifications.filter(x => x.read === false).length > 0;
+  const itemTitle = x => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "title",
+    children: [x.title, ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "time-ago",
+      title: (0, _util.formatToDatetime)(x.createdAt, locale),
+      children: (0, _timeago.format)(new Date(x.createdAt), (0, _util.formatLocale)(locale))
+    })]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+      component: "h2",
+      variant: "h4",
+      className: "page-header",
+      color: "textPrimary",
+      children: [t('notification.title'), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+        component: "span",
+        className: "notification-actions",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlLabel.default, {
+          control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+            checked: showRead,
+            onChange: () => setShowRead(!showRead),
+            name: "showRead",
+            color: "primary"
+          }),
+          label: t('notification.showRead')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_permission.default, {
+          permission: inService ? '' : 'mutate_notification',
+          role: inService ? _util.BlockletAdminRoles : [],
+          children: hasUnRead && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+            disabled: isMarkingAll,
+            onClick: onUnreadNotifications,
+            className: "",
+            children: [isMarkingAll && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+              size: 16,
+              style: {
+                marginRight: '1em'
+              }
+            }), t('notification.markAllAsRead')]
+          })
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_List.default, {
+      className: "notification-list",
+      children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+        size: [32, 20],
+        style: {
+          opacity: '0.8',
+          zIndex: 10000,
+          position: 'fixed',
+          top: 30,
+          left: '50%',
+          marginLeft: -16
+        }
+      }), filtered.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        component: "p",
+        variant: "body1",
+        className: "notification-tip",
+        children: t('notification.empty')
+      }), filtered.length > 0 && filtered.map(x => {
+        if (x.action) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ListItem.default, {
+            component: _reactRouterDom.Link,
+            to: x.action,
+            alignItems: "flex-start",
+            disabled: x.read,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemAvatar.default, {
+              className: "list-item-avatar",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+                  children: x.entityType.substr(0, 1).toUpperCase()
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tag.default, {
+                  className: "notification-tag",
+                  status: x.severity
+                })]
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
+              className: "list-item-text",
+              classes: {
+                secondary: 'list-item-secondary-text'
+              },
+              primary: itemTitle(x),
+              secondary: x.description
+            }), x.read === false && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemSecondaryAction.default, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+                title: t('notification.markAsRead'),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+                  edge: "end",
+                  "aria-label": "delete",
+                  onClick: () => markAsRead(x.id),
+                  size: "large",
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VisibilityOff.default, {})
+                })
+              })
+            })]
+          }, x.id);
+        }
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ListItem.default, {
+          alignItems: "flex-start",
+          disabled: x.read,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemAvatar.default, {
+            className: "list-item-avatar",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+                children: x.entityType.substr(0, 1).toUpperCase()
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tag.default, {
+                className: "notification-tag",
+                status: x.severity
+              })]
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
+            className: "list-item-text",
+            classes: {
+              secondary: 'list-item-secondary-text'
+            },
+            primary: itemTitle(x),
+            secondary: x.description
+          }), x.read === false && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemSecondaryAction.default, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+              title: t('notification.markAsRead'),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+                edge: "end",
+                "aria-label": "delete",
+                onClick: () => markAsRead(x.id),
+                size: "large",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VisibilityOff.default, {})
+              })
+            })
+          })]
+        }, x.id);
+      })]
+    }), !!filtered.length && paging.pageCount > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      mt: 2,
+      display: "flex",
+      justifyContent: "flex-end",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pagination.default, {
+        disabled: loading,
+        count: paging.pageCount,
+        page: paging.page,
+        onChange: (e, value) => {
+          updateNotifications({
+            page: value
+          });
+        }
+      })
+    })]
+  });
+}
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-height: 60vh;\n\n  .page-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    .notification-actions {\n      width: auto;\n      display: flex;\n      justify-content: space-between;\n    }\n  }\n\n  .page-content {\n    margin-top: 16px;\n  }\n\n  .list-item-avatar {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    min-width: 80px;\n\n    .notification-tag {\n      margin-top: 4px;\n    }\n  }\n\n  .MuiListItem-root:not(.Mui-disabled) {\n    .MuiAvatar-root {\n      background: ", ";\n    }\n  }\n\n  .list-item-text {\n    .title {\n      display: flex;\n      align-items: center;\n      .time-ago {\n        background: #bdbdbd;\n        font-size: 11px;\n        margin-left: 8px;\n        color: #f7f8f8;\n        border-radius: 3px;\n        padding: 1px 4px;\n      }\n    }\n  }\n  .Mui-disabled .list-item-text .title .time-ago {\n    background: #666;\n  }\n\n  .list-item-secondary-text {\n    word-break: break-word;\n  }\n"])), props => props.theme.palette.primary.light);
+NotificationsPage.propTypes = {
+  loading: _propTypes.default.bool,
+  paging: _propTypes.default.objectOf(_propTypes.default.any),
+  api: _propTypes.default.shape({
+    readNotifications: _propTypes.default.func.isRequired,
+    readBlockletNotifications: _propTypes.default.func.isRequired
+  }).isRequired,
+  notifications: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string,
+    read: _propTypes.default.bool,
+    entityType: _propTypes.default.string,
+    title: _propTypes.default.string,
+    createdAt: _propTypes.default.string,
+    description: _propTypes.default.string
+  }).isRequired).isRequired,
+  updateNotifications: _propTypes.default.func.isRequired,
+  teamDid: _propTypes.default.string
+};
+NotificationsPage.defaultProps = {
+  paging: false,
+  loading: false,
+  teamDid: ''
+};

package/lib/notifications/tag.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = NotificationTag;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Tag = _interopRequireDefault(require("@arcblock/ux/lib/Tag"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["status"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function NotificationTag(_ref) {
+  let {
+      status
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const map = {
+    warning: 'warning',
+    error: 'error',
+    info: 'primary'
+  };
+  if (!status || status === 'info' || status === 'success') {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, _objectSpread(_objectSpread({
+    type: map[status],
+    style: {
+      borderRadius: 5,
+      border: '1px solid #ccc'
+    }
+  }, rest), {}, {
+    children: status
+  }));
+}
+NotificationTag.propTypes = {
+  status: _propTypes.default.string.isRequired
+};