UNPKG

@selfcommunity/react-ui

Version:

React UI Components to integrate a Community created with SelfCommunity Platform.

55 lines (54 loc) 3.27 kB
import { __rest } from "tslib"; import { jsx as _jsx } from "react/jsx-runtime"; import { styled } from '@mui/material/styles'; import { Avatar, Stack, Typography } from '@mui/material'; import Icon from '@mui/material/Icon'; import { SCNotificationTypologyType } from '@selfcommunity/types'; import { defineMessages, useIntl } from 'react-intl'; import DateTimeAgo from '../../../shared/DateTimeAgo'; import classNames from 'classnames'; import { SCNotificationObjectTemplateType } from '../../../types'; import NotificationItem from '../../../shared/NotificationItem'; import { PREFIX } from '../constants'; const messages = defineMessages({ accountBlocked: { id: 'ui.notification.userBlocked.accountBlocked', defaultMessage: 'ui.notification.userBlocked.accountBlocked' }, accountReactivated: { id: 'ui.notification.userBlocked.accountReactivated', defaultMessage: 'ui.notification.userBlocked.accountReactivated' } }); const classes = { root: `${PREFIX}-user-blocked-root`, unBlockedIcon: `${PREFIX}-unblocked-icon`, blockedIcon: `${PREFIX}-blocked-icon`, blockedText: `${PREFIX}-blocked-text`, activeAt: `${PREFIX}-active-at` }; const Root = styled(NotificationItem, { name: PREFIX, slot: 'UserBlockedRoot' })(() => ({})); /** * This component render the content of the notification of type user blocked * @constructor * @param props */ export default function UserBlockedNotification(props) { // PROPS const { notificationObject = null, id = `n_${props.notificationObject['sid']}`, template = SCNotificationObjectTemplateType.DETAIL, className } = props, rest = __rest(props, ["notificationObject", "id", "template", "className"]); // INTL const intl = useIntl(); /** * Renders root object */ return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: _jsx(Avatar, Object.assign({ variant: "circular", classes: { root: classNames(classes.unBlockedIcon, { [classes.blockedIcon]: notificationObject.type === SCNotificationTypologyType.BLOCKED_USER }) } }, { children: _jsx(Icon, { children: "outlined_flag" }) })), primary: _jsx(Typography, Object.assign({ component: "div", color: "inherit", className: classes.blockedText }, { children: notificationObject.type === SCNotificationTypologyType.BLOCKED_USER ? intl.formatMessage(messages.accountBlocked, { b: (...chunks) => _jsx("strong", { children: chunks }) }) : intl.formatMessage(messages.accountReactivated, { b: (...chunks) => _jsx("strong", { children: chunks }) }) })), secondary: (template === SCNotificationObjectTemplateType.DETAIL || template === SCNotificationObjectTemplateType.SNIPPET) && (_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt })), footer: template === SCNotificationObjectTemplateType.TOAST && (_jsx(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: _jsx(DateTimeAgo, { date: notificationObject.active_at }) }))) }, rest))); }