UNPKG

@selfcommunity/react-ui

Version:

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

53 lines (52 loc) 4.38 kB
import { __rest } from "tslib"; import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; import { useState } from 'react'; import { styled } from '@mui/material/styles'; import { Avatar, Stack, Typography } from '@mui/material'; import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import DateTimeAgo from '../../../shared/DateTimeAgo'; import classNames from 'classnames'; import { SCNotificationObjectTemplateType } from '../../../types'; import NotificationItem from '../../../shared/NotificationItem'; import UserDeletedSnackBar from '../../../shared/UserDeletedSnackBar'; import UserAvatar from '../../../shared/UserAvatar'; import { PREFIX } from '../constants'; const messages = defineMessages({ followUser: { id: 'ui.notification.userFollow.followUser', defaultMessage: 'ui.notification.userFollow.followUser' } }); const classes = { root: `${PREFIX}-user-follow-root`, avatar: `${PREFIX}-avatar`, username: `${PREFIX}-username`, followText: `${PREFIX}-follow-text`, activeAt: `${PREFIX}-active-at` }; const Root = styled(NotificationItem, { name: PREFIX, slot: 'UserFollowRoot' })(() => ({})); /** * This component render the content of the notification of type user follow * @constructor * @param props */ export default function UserFollowNotification(props) { // PROPS const { notificationObject, id = `n_${props.notificationObject['sid']}`, className, template = SCNotificationObjectTemplateType.DETAIL } = props, rest = __rest(props, ["notificationObject", "id", "className", "template"]); // CONTEXT const scRoutingContext = useSCRouting(); // STATE const [openAlert, setOpenAlert] = useState(false); // INTL const intl = useIntl(); /** * Renders root object */ return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: _jsx(Link, Object.assign({}, (!notificationObject.follower.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.follower) }), { onClick: notificationObject.follower.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !notificationObject.follower.community_badge, smaller: true }, { children: _jsx(Avatar, { alt: notificationObject.follower.username, variant: "circular", src: notificationObject.follower.avatar, classes: { root: classes.avatar } }) })) })), primary: _jsxs(Typography, Object.assign({ component: "div", color: "inherit", className: classes.followText }, { children: [_jsx(Link, Object.assign({}, (!notificationObject.follower.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.follower) }), { onClick: notificationObject.follower.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.follower.username })), ' ', intl.formatMessage(messages.followUser, { 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 && (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at }), _jsx(Typography, Object.assign({ color: "primary", component: 'div' }, { children: _jsx(Link, Object.assign({}, (!notificationObject.follower.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.follower) }), { onClick: notificationObject.follower.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(FormattedMessage, { id: "ui.userToastNotifications.goToProfile", defaultMessage: 'ui.userToastNotifications.goToProfile' }) })) }))] }))) }, rest)), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] })); }