@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
77 lines (76 loc) • 4.39 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { Box, Button, Divider, Tooltip, Typography, Icon, styled, Skeleton } from '@mui/material';
import { Link, useSCFetchFeedObject, useSCRouting } from '@selfcommunity/react-core';
import { SCContributionType } from '@selfcommunity/types';
import { SCFeedObjectTemplateType } from '../../../../types/feedObject';
import { getContributionRouteName, getRouteData } from '../../../../utils/contribution';
import classNames from 'classnames';
import { PREFIX } from '../../constants';
const messages = defineMessages({
comments: {
id: 'ui.feedObject.comment.comments',
defaultMessage: 'ui.feedObject.comment.comments'
},
comment: {
id: 'ui.feedObject.comment.comment',
defaultMessage: 'ui.feedObject.comment.comment'
}
});
const classes = {
root: `${PREFIX}-action-comment-root`,
divider: `${PREFIX}-action-comment-divider`,
inline: `${PREFIX}-action-comment-inline`,
button: `${PREFIX}-action-comment-button`,
viewAudienceButton: `${PREFIX}-action-comment-view-audience-button`
};
const Root = styled(Box, {
name: PREFIX,
slot: 'ActionCommentRoot'
})(() => ({}));
export default function Comment(props) {
// PROPS
const { className, feedObjectId, feedObject, feedObjectType = SCContributionType.POST, feedObjectTemplate = SCFeedObjectTemplateType, withAction = true, withAudience = true, inlineAction = false, onViewCommentsAction, onCommentAction } = props, rest = __rest(props, ["className", "feedObjectId", "feedObject", "feedObjectType", "feedObjectTemplate", "withAction", "withAudience", "inlineAction", "onViewCommentsAction", "onCommentAction"]);
// STATE
const { obj, setObj } = useSCFetchFeedObject({ id: feedObjectId, feedObject, feedObjectType });
// CONTEXT
const scRoutingContext = useSCRouting();
// INTL
const intl = useIntl();
/**
* Renders comments counter
* @return {JSX.Element}
*/
function renderAudience() {
let audience;
if (withAudience) {
if (!obj) {
audience = (_jsx(Button, Object.assign({ variant: "text", size: "small", disabled: true, color: "inherit" }, { children: _jsx(Skeleton, { animation: "wave", height: 18, width: 50 }) })));
}
else {
audience = (_jsx(_Fragment, { children: onViewCommentsAction ? (_jsx(Button, Object.assign({ variant: "text", size: "small", onClick: onViewCommentsAction, color: "inherit" }, { children: `${intl.formatMessage(messages.comments, { total: obj.comment_count })}` }))) : (_jsx(_Fragment, { children: feedObjectTemplate === SCFeedObjectTemplateType.DETAIL ? (_jsx(Typography, Object.assign({ variant: 'body2' }, { children: `${intl.formatMessage(messages.comments, { total: obj.comment_count })}` }))) : (_jsx(Button, Object.assign({ variant: "text", size: "small", component: Link, to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)), classes: { root: classes.viewAudienceButton } }, { children: `${intl.formatMessage(messages.comments, { total: obj.comment_count })}` }))) })) }));
}
}
return audience;
}
/**
* Renders commentsCounter
* @return {JSX.Element}
*/
function renderCommentButton() {
let ButtonProps = {};
if (!onCommentAction) {
ButtonProps = {
component: Link,
to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj))
};
}
return (_jsx(_Fragment, { children: withAction && (_jsxs(React.Fragment, { children: [!inlineAction && withAudience && _jsx(Divider, { className: classes.divider }), _jsx(Tooltip, Object.assign({ title: `${intl.formatMessage(messages.comment)}` }, { children: _jsx(Button, Object.assign({ onClick: onCommentAction, className: classes.button }, ButtonProps, { children: _jsx(Icon, { children: "chat_bubble_outline" }) })) }))] })) }));
}
/**
* Renders comment action
*/
return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className, { [classes.inline]: inlineAction }) }, rest, { children: [renderAudience(), renderCommentButton()] })));
}