@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
174 lines (165 loc) • 7.54 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useMemo, useState } from 'react';
import { styled } from '@mui/material/styles';
import { Grid, useMediaQuery, useTheme } from '@mui/material';
import { useSCPreferences, useSCUser } from '@selfcommunity/react-core';
import classNames from 'classnames';
import { useThemeProps } from '@mui/system';
import { SCFeatureName, SCPrivateMessageStatusType, SCPrivateMessageType } from '@selfcommunity/types';
import PrivateMessageThread from '../PrivateMessageThread';
import PrivateMessageSnippets from '../PrivateMessageSnippets';
import { PREFIX } from './constants';
const classes = {
root: `${PREFIX}-root`,
snippetsBox: `${PREFIX}-snippets-box`,
threadBox: `${PREFIX}-thread-box`,
hide: `${PREFIX}-hide`
};
const Root = styled(Grid, {
name: 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
*/
export default function PrivateMessageComponent(inProps) {
//PROPS
const props = useThemeProps({
props: inProps,
name: PREFIX
});
const { id = null, type = null, className = null, onItemClick = null, onThreadBack = null, onSingleMessageOpen = null } = props, rest = __rest(props, ["id", "type", "className", "onItemClick", "onThreadBack", "onSingleMessageOpen"]);
// CONTEXT
const scUserContext = useSCUser();
const scPreferences = useSCPreferences();
// STATE
const theme = useTheme();
const [clear, setClear] = useState(false);
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
const [layout, setLayout] = useState('default');
const [obj, setObj] = useState(id !== null && id !== void 0 ? id : null);
const [_type, _setType] = useState(type);
const isNew = obj && obj === SCPrivateMessageStatusType.NEW;
const [openNewMessage, setOpenNewMessage] = 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 = useMemo(() => scPreferences.features.includes(SCFeatureName.PRIVATE_MESSAGING), [scPreferences.features]);
const authUserId = useMemo(() => (scUserContext.user ? scUserContext.user.id : null), [scUserContext.user]);
useEffect(() => {
setObj(id !== null && id !== void 0 ? id : null);
}, [id]);
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(SCPrivateMessageStatusType.NEW);
_setType(SCPrivateMessageType.NEW);
onItemClick && onItemClick(SCPrivateMessageStatusType.NEW, SCPrivateMessageType.NEW);
};
/**
* Handles new messages open from user profile page or notifications section
*/
const handleSingleMessage = (open) => {
open && onSingleMessageOpen(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 ? SCPrivateMessageType.GROUP : 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 (_jsx(Grid, Object.assign({ item: true, xs: 12, md: 5, className: classNames(classes.snippetsBox, { [classes.hide]: isMobile && mobileThreadView }) }, { children: _jsx(PrivateMessageSnippets, { snippetActions: {
onSnippetClick: handleThreadOpening,
onNewMessageClick: handleOpenNewMessage,
onDeleteConfirm: handleDeleteThread
}, threadObj: obj, clearSearch: clear, elevation: 0, type: _type }) })));
}
/**
* Renders thread section
*/
function renderThread() {
return (_jsx(Grid, Object.assign({ item: true, xs: 12, md: 7, className: classNames(classes.threadBox, { [classes.hide]: isMobile && mobileSnippetsView }) }, { children: _jsx(PrivateMessageThread, { 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 (_jsxs(Root, Object.assign({ container: true }, rest, { className: classNames(classes.root, className) }, { children: [renderSnippets(), renderThread()] })));
}