@selfcommunity/react-templates
Version:
React Templates Components to integrate a Community created with SelfCommunity.
104 lines (97 loc) • 5.73 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const material_1 = require("@mui/material");
const react_ui_1 = require("@selfcommunity/react-ui");
const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
const system_1 = require("@mui/system");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const react_intl_1 = require("react-intl");
const types_1 = require("@selfcommunity/types");
const react_core_1 = require("@selfcommunity/react-core");
const constants_1 = require("./constants");
const classes = {
root: `${constants_1.PREFIX}-root`
};
const Root = (0, material_1.styled)(material_1.Box, {
name: constants_1.PREFIX,
slot: 'Root'
})(() => ({}));
const PREFERENCES = [react_core_1.SCPreferences.ADVERTISING_CUSTOM_ADV_ENABLED, react_core_1.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
*/
function FeedObjectDetail(inProps) {
// PROPS
const props = (0, system_1.useThemeProps)({
props: inProps,
name: constants_1.PREFIX
});
const { id = 'feed_object_page', className, feedObjectId, feedObject, feedObjectType, FeedObjectProps = {}, FeedSidebarProps = {}, CommentsFeedObjectProps = {}, RelatedFeedObjectProps = { autoHide: false } } = props;
// CONTEXT
const scUserContext = (0, react_core_1.useSCUser)();
const scPreferences = (0, react_core_1.useSCPreferences)();
// RETRIVE OBJECTS
const { obj, error } = (0, react_core_1.useSCFetchFeedObject)({ id: feedObjectId, feedObject, feedObjectType });
const [comments, setComments] = (0, react_1.useState)([]);
const commentsEnabled = react_core_1.SCPreferences.CONFIGURATIONS_COMMENTS_ENABLED in scPreferences.preferences &&
scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_COMMENTS_ENABLED].value;
/**
* Compute preferences
*/
const preferences = (0, react_1.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[react_core_1.SCPreferences.ADVERTISING_CUSTOM_ADV_ENABLED] &&
((preferences[react_core_1.SCPreferences.ADVERTISING_CUSTOM_ADV_ONLY_FOR_ANONYMOUS_USERS_ENABLED] && scUserContext.user === null) ||
!preferences[react_core_1.SCPreferences.ADVERTISING_CUSTOM_ADV_ONLY_FOR_ANONYMOUS_USERS_ENABLED])) {
return ((0, jsx_runtime_1.jsx)(react_ui_1.CustomAdv, Object.assign({ position: types_1.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 ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.feedObjectDetail.contributionNotFound", defaultMessage: "templates.feedObjectDetail.contributionNotFound" }) }));
}
if (!obj) {
return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
}
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, spacing: 2 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 7 }, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.FeedObject, Object.assign({}, FeedObjectProps, { feedObject: obj, template: react_ui_1.SCFeedObjectTemplateType.DETAIL, onReply: handleReply })), renderAdvertising(), commentsEnabled && ((0, jsx_runtime_1.jsx)(react_ui_1.CommentsFeedObject, Object.assign({ showTitle: true, feedObject: obj, comments: comments }, CommentsFeedObjectProps), `comments_${obj.id}`))] })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 5 }, { children: (0, jsx_runtime_1.jsx)(material_1.Hidden, Object.assign({ mdDown: true }, { children: (0, jsx_runtime_1.jsx)(react_ui_1.StickyBox, Object.assign({}, FeedSidebarProps, { children: (0, jsx_runtime_1.jsx)(react_ui_1.RelatedFeedObjectsWidget, Object.assign({ feedObject: obj, feedObjectId: obj.id }, RelatedFeedObjectProps), `related_${obj.id}`) })) })) }))] })) })));
}
exports.default = FeedObjectDetail;