@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
192 lines (183 loc) • 11.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styles_1 = require("@mui/material/styles");
const material_1 = require("@mui/material");
const react_core_1 = require("@selfcommunity/react-core");
const types_1 = require("@selfcommunity/types");
const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
const notistack_1 = require("notistack");
const constants_1 = require("./constants");
const types_2 = require("../../types");
const CustomSnackMessage_1 = tslib_1.__importDefault(require("../../shared/CustomSnackMessage"));
const Comment_1 = tslib_1.__importDefault(require("../Notification/Comment"));
const ContributionFollow_1 = tslib_1.__importDefault(require("../Notification/ContributionFollow"));
const UserFollow_1 = tslib_1.__importDefault(require("../Notification/UserFollow"));
const UserConnection_1 = tslib_1.__importDefault(require("../Notification/UserConnection"));
const VoteUp_1 = tslib_1.__importDefault(require("../Notification/VoteUp"));
const PrivateMessage_1 = tslib_1.__importDefault(require("../Notification/PrivateMessage"));
const Mention_1 = tslib_1.__importDefault(require("../Notification/Mention"));
const KindlyNoticeFlag_1 = tslib_1.__importDefault(require("../Notification/KindlyNoticeFlag"));
const IncubatorApproved_1 = tslib_1.__importDefault(require("../Notification/IncubatorApproved"));
const UserBlocked_1 = tslib_1.__importDefault(require("../Notification/UserBlocked"));
const Message_1 = tslib_1.__importDefault(require("../BroadcastMessages/Message"));
const system_1 = require("@mui/system");
const Contribution_1 = tslib_1.__importDefault(require("../Notification/Contribution"));
const Group_1 = tslib_1.__importDefault(require("../Notification/Group"));
const Event_1 = tslib_1.__importDefault(require("../Notification/Event/Event"));
const LiveStream_1 = tslib_1.__importDefault(require("../Notification/LiveStream"));
const Root = (0, styles_1.styled)(material_1.Box, {
name: constants_1.PREFIX,
slot: 'Root'
})(() => ({}));
/**
* > API documentation for the Community-JS Toast Notifications component. Learn about the available props and the CSS API.
#### Import
```jsx
import {ToastNotifications} from '@selfcommunity/react-ui';
```
#### Component Name
The name `SCToastNotifications` can be used when providing style overrides in the theme.
#### CSS
|Rule Name|Global class|Description|
|---|---|---|
|root|.SCUserNotifications-root|Styles applied to the root element.|
|toastMessage|.SCUserToastNotifications-toast-message|Styles applied to the toast message element.|
|toastContent|.SCUserToastNotifications-toast-content|Styles applied to the toast content element.|
|toastActions|.SCUserToastNotifications-toast-actions|Styles applied to the toast actions section.|
* @param inProps
*/
function UserToastNotifications(inProps) {
// PROPS
const props = (0, system_1.useThemeProps)({
props: inProps,
name: constants_1.PREFIX
});
const { handleNotification, disableToastNotification = false } = props;
// CONTEXT
const scContext = (0, react_core_1.useSCContext)();
const scUserContext = (0, react_core_1.useSCUser)();
// REFS
const notificationSubscription = (0, react_1.useRef)(null);
// CONTEXT
const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
const { options, setOptions } = (0, react_core_1.useSCAlertMessages)();
/**
* Render every single notification content
* @param n
*/
const getContent = (n) => {
let content;
let type;
if (n.notification_obj) {
/** Notification of types: comment, nested_comment, etc... */
type = react_core_1.SCNotification.SCNotificationMapping[n.activity_type];
if (type === types_1.SCNotificationTypologyType.COMMENT || type === types_1.SCNotificationTypologyType.NESTED_COMMENT) {
content = (0, jsx_runtime_1.jsx)(Comment_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
}
else if (type === types_1.SCNotificationTypologyType.FOLLOW) {
content = (0, jsx_runtime_1.jsx)(ContributionFollow_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
}
else if (type === types_1.SCNotificationTypologyType.USER_FOLLOW) {
content = (0, jsx_runtime_1.jsx)(UserFollow_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
}
else if (type === types_1.SCNotificationTypologyType.CONNECTION_REQUEST || type === types_1.SCNotificationTypologyType.CONNECTION_ACCEPT) {
content = (0, jsx_runtime_1.jsx)(UserConnection_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
}
else if (type === types_1.SCNotificationTypologyType.VOTE_UP) {
content = (0, jsx_runtime_1.jsx)(VoteUp_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
}
else if (type === types_1.SCNotificationTypologyType.PRIVATE_MESSAGE) {
content = (0, jsx_runtime_1.jsx)(PrivateMessage_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
}
else if (type === types_1.SCNotificationTypologyType.BLOCKED_USER || type === types_1.SCNotificationTypologyType.UNBLOCKED_USER) {
return (0, jsx_runtime_1.jsx)(UserBlocked_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
}
else if (type === types_1.SCNotificationTypologyType.MENTION) {
content = (0, jsx_runtime_1.jsx)(Mention_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
}
else if (type === types_1.SCNotificationTypologyType.KINDLY_NOTICE_FLAG) {
content = (0, jsx_runtime_1.jsx)(KindlyNoticeFlag_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
}
else if (type === types_1.SCNotificationTypologyType.INCUBATOR_APPROVED) {
content = (0, jsx_runtime_1.jsx)(IncubatorApproved_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
}
else if (type === types_1.SCNotificationTypologyType.CONTRIBUTION) {
content = (0, jsx_runtime_1.jsx)(Contribution_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
}
else if (type === types_1.SCNotificationTypologyType.USER_ADDED_TO_GROUP ||
type === types_1.SCNotificationTypologyType.USER_INVITED_TO_JOIN_GROUP ||
type === types_1.SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_GROUP ||
type === types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_GROUP) {
content = (0, jsx_runtime_1.jsx)(Group_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
}
else if (type === types_1.SCNotificationTypologyType.USER_ADDED_TO_EVENT ||
type === types_1.SCNotificationTypologyType.USER_INVITED_TO_JOIN_EVENT ||
type === types_1.SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_EVENT ||
type === types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT) {
content = (0, jsx_runtime_1.jsx)(Event_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
}
else if (type === types_1.SCNotificationTypologyType.LIVE_STREAM_STARTED) {
content = (0, jsx_runtime_1.jsx)(LiveStream_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
}
}
if (n.activity_type && n.activity_type === types_1.SCNotificationTypologyType.NOTIFICATION_BANNER) {
/** Notification of type: 'notification_banner' */
content = (0, jsx_runtime_1.jsx)(Message_1.default, { message: n.notification_obj, elevation: 0, template: types_2.SCBroadcastMessageTemplateType.TOAST }, n.notification_obj.id);
}
if (handleNotification && type) {
/** Override content */
content = handleNotification(type, n, content);
}
return content;
};
/**
* Notification subscriber
* @param msg
* @param data
*/
const notificationSubscriber = (msg, data) => {
if (data &&
data.type === types_1.SCNotificationTopicType.INTERACTION &&
(data.data.activity_type === types_1.SCNotificationTypologyType.NOTIFICATION_BANNER || react_core_1.SCNotification.SCNotificationMapping[data.data.activity_type]) &&
!react_core_1.SCNotification.SCSilentToastNotifications.includes(data.data.activity_type) &&
!disableToastNotification &&
!scContext.settings.notifications.webSocket.disableToastMessage &&
scUserContext.managers.settings.get(react_core_1.SCNotification.NOTIFICATIONS_SETTINGS_SHOW_TOAST)) {
/**
* !IMPORTANT
* - messageKey for the notification_banner is 'id', for others type 'feed_serialization_id'
* - the enqueue message is persistent (it remains on the screen while the others replace each other) if type notification_banner
*/
const messageKey = data.data.feed_serialization_id ? data.data.feed_serialization_id : data.data.id;
enqueueSnackbar(getContent(data.data), {
preventDuplicate: true,
key: messageKey,
variant: 'notification',
persist: data.data.activity_type === types_1.SCNotificationTypologyType.NOTIFICATION_BANNER ? true : false,
anchorOrigin: { horizontal: 'left', vertical: 'bottom' },
action: null,
SnackbarProps: {
id: messageKey
}
});
}
};
/**
* On mount, fetches first page of notifications
* On mount, subscribe to receive notification updates
*/
(0, react_1.useEffect)(() => {
notificationSubscription.current = pubsub_js_1.default.subscribe(types_1.SCNotificationTopicType.INTERACTION, notificationSubscriber);
return () => {
pubsub_js_1.default.unsubscribe(notificationSubscription.current);
};
}, [scUserContext.managers.settings.all]);
(0, react_1.useEffect)(() => {
setOptions(Object.assign(Object.assign({}, options), { Components: Object.assign(Object.assign({}, options === null || options === void 0 ? void 0 : options.Components), { notification: CustomSnackMessage_1.default }) }));
}, [scUserContext.managers.settings.all]);
return (0, jsx_runtime_1.jsx)(Root, {});
}
exports.default = UserToastNotifications;