@selfcommunity/react-templates
Version:
React Templates Components to integrate a Community created with SelfCommunity.
100 lines (93 loc) • 5.11 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useState } from 'react';
import { Box, Grid, Hidden, styled } from '@mui/material';
import { CommentsFeedObject, CustomAdv, FeedObject, RelatedFeedObjectsWidget, SCFeedObjectTemplateType, StickyBox } from '@selfcommunity/react-ui';
import FeedObjectDetailSkeleton from './Skeleton';
import { useThemeProps } from '@mui/system';
import classNames from 'classnames';
import { FormattedMessage } from 'react-intl';
import { SCCustomAdvPosition } from '@selfcommunity/types';
import { SCPreferences, useSCFetchFeedObject, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
import { PREFIX } from './constants';
const classes = {
root: `${PREFIX}-root`
};
const Root = styled(Box, {
name: PREFIX,
slot: 'Root'
})(() => ({}));
const PREFERENCES = [SCPreferences.ADVERTISING_CUSTOM_ADV_ENABLED, SCPreferences.ADVERTISING_CUSTOM_ADV_ONLY_FOR_ANONYMOUS_USERS_ENABLED];
/**
* > API documentation for the Community-JS Feed Object Detail Template. Learn about the available props and the CSS API.
*
*
* This component renders a specific feed object detail template.
* Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-templates/Components/FeedObjectDetail)
#### Import
```jsx
import {FeedObjectDetail} from '@selfcommunity/react-templates';
```
#### Component Name
The name `SCFeedObjectDetailTemplate` can be used when providing style overrides in the theme.
#### CSS
|Rule Name|Global class|Description|
|---|---|---|
|root|.SCFeedObjectDetailTemplate-root|Styles applied to the root element.|
*
* @param inProps
*/
export default function FeedObjectDetail(inProps) {
// PROPS
const props = useThemeProps({
props: inProps,
name: PREFIX
});
const { id = 'feed_object_page', className, feedObjectId, feedObject, feedObjectType, FeedObjectProps = {}, FeedSidebarProps = {}, CommentsFeedObjectProps = {}, RelatedFeedObjectProps = { autoHide: false } } = props;
// CONTEXT
const scUserContext = useSCUser();
const scPreferences = useSCPreferences();
// RETRIVE OBJECTS
const { obj, error } = useSCFetchFeedObject({ id: feedObjectId, feedObject, feedObjectType });
const [comments, setComments] = useState([]);
const commentsEnabled = SCPreferences.CONFIGURATIONS_COMMENTS_ENABLED in scPreferences.preferences &&
scPreferences.preferences[SCPreferences.CONFIGURATIONS_COMMENTS_ENABLED].value;
/**
* Compute preferences
*/
const preferences = useMemo(() => {
const _preferences = {};
PREFERENCES.map((p) => (_preferences[p] = p in scPreferences.preferences ? scPreferences.preferences[p].value : null));
return _preferences;
}, [scPreferences.preferences]);
/**
* Render advertising above FeedObject Detail
*/
function renderAdvertising() {
if (preferences[SCPreferences.ADVERTISING_CUSTOM_ADV_ENABLED] &&
((preferences[SCPreferences.ADVERTISING_CUSTOM_ADV_ONLY_FOR_ANONYMOUS_USERS_ENABLED] && scUserContext.user === null) ||
!preferences[SCPreferences.ADVERTISING_CUSTOM_ADV_ONLY_FOR_ANONYMOUS_USERS_ENABLED])) {
return (_jsx(CustomAdv, Object.assign({ position: SCCustomAdvPosition.POSITION_BELOW_FEED_OBJECT }, (obj.categories.length && { categoriesId: obj.categories.map((c) => c.id) }))));
}
return null;
}
/**
* Handle add comment
* @param comment
*/
function handleReply(comment) {
setComments([...comments, ...[comment]]);
setTimeout(() => {
const element = document.getElementById(`comment_object_${comment.id}`);
if (element) {
element.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
}
}, 300);
}
if (error) {
return (_jsx(Box, { children: _jsx(FormattedMessage, { id: "templates.feedObjectDetail.contributionNotFound", defaultMessage: "templates.feedObjectDetail.contributionNotFound" }) }));
}
if (!obj) {
return _jsx(FeedObjectDetailSkeleton, {});
}
return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, { children: _jsxs(Grid, Object.assign({ container: true, spacing: 2 }, { children: [_jsxs(Grid, Object.assign({ item: true, xs: 12, md: 7 }, { children: [_jsx(FeedObject, Object.assign({}, FeedObjectProps, { feedObject: obj, template: SCFeedObjectTemplateType.DETAIL, onReply: handleReply })), renderAdvertising(), commentsEnabled && (_jsx(CommentsFeedObject, Object.assign({ showTitle: true, feedObject: obj, comments: comments }, CommentsFeedObjectProps), `comments_${obj.id}`))] })), _jsx(Grid, Object.assign({ item: true, xs: 12, md: 5 }, { children: _jsx(Hidden, Object.assign({ mdDown: true }, { children: _jsx(StickyBox, Object.assign({}, FeedSidebarProps, { children: _jsx(RelatedFeedObjectsWidget, Object.assign({ feedObject: obj, feedObjectId: obj.id }, RelatedFeedObjectProps), `related_${obj.id}`) })) })) }))] })) })));
}