UNPKG

@selfcommunity/react-ui

Version:

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

54 lines (53 loc) 4.36 kB
import { __rest } from "tslib"; import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime"; import { styled } from '@mui/material/styles'; import { Avatar, Box, Typography } from '@mui/material'; import Icon from '@mui/material/Icon'; import { Link, useSCRouting, SCRoutes } from '@selfcommunity/react-core'; import { camelCase } from '@selfcommunity/utils'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import { getContributionType, getContributionSnippet, getRouteData } from '../../../utils/contribution'; 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({ kindlyNoticeFlag: { id: 'ui.notification.kindlyNoticeFlag.kindlyNoticeFlag', defaultMessage: 'ui.notification.kindlyNoticeFlag.kindlyNoticeFlag' } }); const classes = { root: `${PREFIX}-kindly-notice-flag-root`, flagIcon: `${PREFIX}-flag-icon`, flagText: `${PREFIX}-flag-text`, activeAt: `${PREFIX}-active-at`, contributionWrap: `${PREFIX}-contribution-wrap`, contributionYouWroteLabel: `${PREFIX}-contribution-you-wrote-label`, contributionText: `${PREFIX}-contribution-text` }; const Root = styled(NotificationItem, { name: PREFIX, slot: 'KindlyNoticeFlagRoot' })(() => ({})); /** * This component render the content of the notification of type kindly notice flag * @constructor * @param props */ export default function KindlyNoticeFlagNotification(props) { // PROPS const { notificationObject, id = `n_${props.notificationObject['sid']}`, className, template = SCNotificationObjectTemplateType.DETAIL } = props, rest = __rest(props, ["notificationObject", "id", "className", "template"]); // ROUTING const scRoutingContext = useSCRouting(); // CONST const isSnippetTemplate = template === SCNotificationObjectTemplateType.SNIPPET; const contributionType = getContributionType(notificationObject); //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: classes.flagIcon } }, { children: _jsx(Icon, { children: "outlined_flag" }) })), primary: _jsx(_Fragment, { children: isSnippetTemplate ? (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])) }, { children: _jsx(Typography, Object.assign({ component: "div", color: "inherit", className: classes.flagText }, { children: _jsx(FormattedMessage, { id: `ui.notification.kindlyNoticeFlag.kindlyNoticeFlagSnippet`, defaultMessage: `ui.notification.kindlyNoticeFlag.kindlyNoticeFlagSnippet` }) })) }))) : (_jsx(Typography, Object.assign({ component: "div", color: "inherit", className: classes.flagText }, { children: intl.formatMessage(messages[camelCase(notificationObject.type)], { b: (...chunks) => _jsx("strong", { children: chunks }) }) }))) }), secondary: (template === SCNotificationObjectTemplateType.DETAIL || template === SCNotificationObjectTemplateType.SNIPPET) && (_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt })), footer: !isSnippetTemplate && (_jsxs(Box, Object.assign({ className: classes.contributionWrap }, { children: [_jsx(Typography, Object.assign({ variant: 'body2', color: 'inherit', component: 'div', classes: { root: classes.contributionYouWroteLabel } }, { children: _jsx(FormattedMessage, { id: "ui.notification.undeletedFor.youWrote", defaultMessage: "ui.notification.undeletedFor.youWrote" }) })), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])), className: classes.contributionText }, { children: _jsx(Typography, Object.assign({ component: 'span', variant: "body2" }, { children: getContributionSnippet(notificationObject[contributionType]) })) }))] }))) }, rest))); }