@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
99 lines (90 loc) • 6.01 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext, useMemo } from 'react';
import { styled } from '@mui/material/styles';
import { Avatar, ListItemButton, ListItemAvatar, ListItemText, Typography, Chip, ListItem } from '@mui/material';
import PrivateMessageSnippetItemSkeleton from './Skeleton';
import { useIntl } from 'react-intl';
import { SCPrivateMessageStatusType } from '@selfcommunity/types';
import { SCUserContext, SCPreferences, useSCPreferences } from '@selfcommunity/react-core';
import classNames from 'classnames';
import { useThemeProps } from '@mui/system';
import UserAvatar from '../../shared/UserAvatar';
import { PREFIX } from './constants';
const classes = {
root: `${PREFIX}-root`,
username: `${PREFIX}-username`,
badgeLabel: `${PREFIX}-badge-label`,
time: `${PREFIX}-time`,
menuItem: `${PREFIX}-menu-item`,
unread: `${PREFIX}-unread`
};
const Root = styled(ListItem, {
name: PREFIX,
slot: 'Root'
})(() => ({}));
const PREFERENCES = [SCPreferences.STAFF_STAFF_BADGE_LABEL, SCPreferences.STAFF_STAFF_BADGE_ICON];
/**
* > API documentation for the Community-JS PrivateMessageSnippetItem component. Learn about the available props and the CSS API.
#### Import
```jsx
import {PrivateMessageSnippetItem} from '@selfcommunity/react-ui';
```
#### Component Name
The name `SCPrivateMessageSnippetItem` can be used when providing style overrides in the theme.
#### CSS
|Rule Name|Global class|Description|
|---|---|---|
|root|.SCPrivateMessageSnippetItem-root|Styles applied to the root element.|
|username|.SCPrivateMessageSnippetItem-username|Styles applied to the username element.|
|badgeLabel|.SCPrivateMessageSnippetItem-badgeLabel|Styles applied to the badgeLabel element.|
|time|.SCPrivateMessageSnippetItem-time|Styles applied to the time element.|
|menuItem|.SCPrivateMessageSnippetItem-menu-item|Styles applied to the menu item element.|
|unread|.SCPrivateMessageSnippetItem-unread|Styles applied to snippet item if there's an unread message.|
* @param inProps
*/
export default function PrivateMessageSnippetItem(inProps) {
var _a, _b, _c, _d;
// PROPS
const props = useThemeProps({
props: inProps,
name: PREFIX
});
const { message = null, className = null, onItemClick = null, secondaryAction = null } = props, rest = __rest(props, ["message", "className", "onItemClick", "secondaryAction"]);
// CONTEXT
const scUserContext = useContext(SCUserContext);
// PREFERENCES
const scPreferences = useSCPreferences();
const preferences = useMemo(() => {
const _preferences = {};
PREFERENCES.map((p) => (_preferences[p] = p in scPreferences.preferences ? scPreferences.preferences[p].value : null));
return _preferences;
}, [scPreferences.preferences]);
// INTL
const intl = useIntl();
// STATE
const hasBadge = () => {
var _a;
if (message.receiver) {
if ((message === null || message === void 0 ? void 0 : message.receiver.id) !== ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id)) {
return message === null || message === void 0 ? void 0 : message.receiver.community_badge;
}
return message === null || message === void 0 ? void 0 : message.sender.community_badge;
}
};
if (!message) {
return _jsx(PrivateMessageSnippetItemSkeleton, { elevation: 0 });
}
/**
* Renders root object
*/
return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { secondaryAction: secondaryAction, disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ onClick: onItemClick, classes: { root: classNames({ [classes.unread]: message.thread_status === SCPrivateMessageStatusType.NEW }) } }, { children: [_jsx(ListItemAvatar, { children: _jsx(UserAvatar, Object.assign({ hide: !hasBadge() }, { children: message.group ? (_jsx(Avatar, { alt: message.group.name, src: message.group.image_big })) : (_jsx(Avatar, { alt: ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.username) === message.receiver.username ? message.sender.username : message.receiver.username, src: ((_b = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _b === void 0 ? void 0 : _b.username) === message.receiver.username ? message.sender.avatar : message.receiver.avatar })) })) }), _jsx(ListItemText, { primary: _jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ component: "span", className: classes.username }, { children: message.group
? message.group.name
: ((_c = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _c === void 0 ? void 0 : _c.username) === message.receiver.username
? message.sender.username
: message.receiver.username })), hasBadge() && preferences && (_jsx(Chip, { component: "span", className: classes.badgeLabel, size: "small", label: preferences[SCPreferences.STAFF_STAFF_BADGE_LABEL] })), _jsx(Typography, Object.assign({ color: "secondary", className: classes.time, component: "span" }, { children: `${intl.formatDate(message.last_message_at, {
day: '2-digit',
month: '2-digit',
year: '2-digit'
})}` }))] }), secondary: _jsx(_Fragment, { children: _jsx(Typography, { component: "span", color: "text.secondary", dangerouslySetInnerHTML: { __html: (_d = message.headline) !== null && _d !== void 0 ? _d : message.message } }) }) })] })) })));
}