@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
177 lines (168 loc) • 8.18 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 classnames_1 = tslib_1.__importDefault(require("classnames"));
const system_1 = require("@mui/system");
const types_1 = require("@selfcommunity/types");
const PrivateMessageThread_1 = tslib_1.__importDefault(require("../PrivateMessageThread"));
const PrivateMessageSnippets_1 = tslib_1.__importDefault(require("../PrivateMessageSnippets"));
const constants_1 = require("./constants");
const classes = {
root: `${constants_1.PREFIX}-root`,
snippetsBox: `${constants_1.PREFIX}-snippets-box`,
threadBox: `${constants_1.PREFIX}-thread-box`,
hide: `${constants_1.PREFIX}-hide`
};
const Root = (0, styles_1.styled)(material_1.Grid, {
name: constants_1.PREFIX,
slot: 'Root'
})(() => ({}));
/**
*
* > API documentation for the Community-JS Private Messages component. Learn about the available props and the CSS API.
*
*
* This component renders the private messages section.
* Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/PrivateMessages)
#### Import
```jsx
import {PrivateMessageComponent} from '@selfcommunity/react-ui';
```
#### Component Name
The name `SCPrivateMessageComponent` can be used when providing style overrides in the theme.
#### CSS
|Rule Name|Global class|Description|
|---|---|---|
|root|.SCPrivateMessageComponent-root|Styles applied to the root element.|
|snippetsBox|.SCPrivateMessageComponent-snippets-box|Styles applied to the snippets box element.|
|threadBox|.SCPrivateMessageComponent-thread-box|Styles applied to the thread box element.|
|hide|.SCPrivateMessageComponent-hide|Styles applied to the snippetBox or threadBox grid item element on mobile view.|
* @param inProps
*/
function PrivateMessageComponent(inProps) {
//PROPS
const props = (0, system_1.useThemeProps)({
props: inProps,
name: constants_1.PREFIX
});
const { id = null, type = null, className = null, onItemClick = null, onThreadBack = null, onSingleMessageOpen = null } = props, rest = tslib_1.__rest(props, ["id", "type", "className", "onItemClick", "onThreadBack", "onSingleMessageOpen"]);
// CONTEXT
const scUserContext = (0, react_core_1.useSCUser)();
const scPreferences = (0, react_core_1.useSCPreferences)();
// STATE
const theme = (0, material_1.useTheme)();
const [clear, setClear] = (0, react_1.useState)(false);
const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
const [layout, setLayout] = (0, react_1.useState)('default');
const [obj, setObj] = (0, react_1.useState)(id !== null && id !== void 0 ? id : null);
const [_type, _setType] = (0, react_1.useState)(type);
const isNew = obj && obj === types_1.SCPrivateMessageStatusType.NEW;
const [openNewMessage, setOpenNewMessage] = (0, react_1.useState)(isNew !== null && isNew !== void 0 ? isNew : false);
const mobileSnippetsView = (layout === 'default' && !obj) || (layout === 'mobile' && !obj);
const mobileThreadView = (layout === 'default' && obj) || (layout === 'mobile' && obj);
const messageReceiver = (item, loggedUserId) => {
var _a, _b, _c;
if (typeof item === 'number') {
return item;
}
return ((_a = item === null || item === void 0 ? void 0 : item.receiver) === null || _a === void 0 ? void 0 : _a.id) !== loggedUserId ? (_b = item === null || item === void 0 ? void 0 : item.receiver) === null || _b === void 0 ? void 0 : _b.id : (_c = item === null || item === void 0 ? void 0 : item.sender) === null || _c === void 0 ? void 0 : _c.id;
};
// MEMO
const privateMessagingEnabled = (0, react_1.useMemo)(() => scPreferences.features.includes(types_1.SCFeatureName.PRIVATE_MESSAGING), [scPreferences.features]);
const authUserId = (0, react_1.useMemo)(() => (scUserContext.user ? scUserContext.user.id : null), [scUserContext.user]);
(0, react_1.useEffect)(() => {
setObj(id !== null && id !== void 0 ? id : null);
}, [id]);
(0, react_1.useEffect)(() => {
_setType(type !== null && type !== void 0 ? type : null);
}, [type]);
// HANDLERS
/**
* Handles thread opening on click
* @param item
* @param type
*/
const handleThreadOpening = (item, type) => {
onItemClick && onItemClick(item.group ? item.group.id : messageReceiver(item, authUserId), type);
_setType(type);
setObj(item.group ? item : messageReceiver(item, authUserId));
setOpenNewMessage(false);
};
/**
* Handles thread closing after delete
*/
const handleThreadClosing = () => {
setObj(null);
onThreadBack && onThreadBack();
};
/**
* Handles new message opening on button action click
*/
const handleOpenNewMessage = () => {
setOpenNewMessage(!openNewMessage);
setObj(types_1.SCPrivateMessageStatusType.NEW);
_setType(types_1.SCPrivateMessageType.NEW);
onItemClick && onItemClick(types_1.SCPrivateMessageStatusType.NEW, types_1.SCPrivateMessageType.NEW);
};
/**
* Handles new messages open from user profile page or notifications section
*/
const handleSingleMessage = (open) => {
open && onSingleMessageOpen(types_1.SCPrivateMessageStatusType.NEW);
};
/**
* Handles Layout update when new message section gets closed
*/
const handleMessageBack = () => {
setLayout('default');
id && setLayout('mobile');
setOpenNewMessage(false);
setObj(null);
_setType(null);
onThreadBack && onThreadBack();
};
/**
* Handles state update when a new message is sent
*/
const handleOnNewMessageSent = (msg, isOne) => {
onItemClick && onItemClick(isOne ? messageReceiver(msg, authUserId) : '', msg.group ? types_1.SCPrivateMessageType.GROUP : types_1.SCPrivateMessageType.USER);
setObj(isOne ? messageReceiver(msg, authUserId) : null);
setOpenNewMessage(false);
};
/**
* Handles thread deletion
*/
function handleDeleteThread(deletingThread) {
deletingThread === messageReceiver(obj, authUserId) && handleThreadClosing();
setClear(true);
}
/**
* Renders snippets section
*/
function renderSnippets() {
return ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 5, className: (0, classnames_1.default)(classes.snippetsBox, { [classes.hide]: isMobile && mobileThreadView }) }, { children: (0, jsx_runtime_1.jsx)(PrivateMessageSnippets_1.default, { snippetActions: {
onSnippetClick: handleThreadOpening,
onNewMessageClick: handleOpenNewMessage,
onDeleteConfirm: handleDeleteThread
}, threadObj: obj, clearSearch: clear, elevation: 0, type: _type }) })));
}
/**
* Renders thread section
*/
function renderThread() {
return ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 7, className: (0, classnames_1.default)(classes.threadBox, { [classes.hide]: isMobile && mobileSnippetsView }) }, { children: (0, jsx_runtime_1.jsx)(PrivateMessageThread_1.default, { threadObj: obj, type: _type, openNewMessage: openNewMessage, onNewMessageClose: handleMessageBack, onNewMessageSent: handleOnNewMessageSent, onSingleMessageOpen: handleSingleMessage, elevation: 0 }) })));
}
/**
* Renders the component (if not hidden by autoHide prop)
*/
if (!authUserId || !privateMessagingEnabled) {
return null;
}
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ container: true }, rest, { className: (0, classnames_1.default)(classes.root, className) }, { children: [renderSnippets(), renderThread()] })));
}
exports.default = PrivateMessageComponent;