@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
153 lines (144 loc) • 4.76 kB
TypeScript
import { CardProps } from '@mui/material';
import { SCCommentsOrderBy } from '../../types/comments';
import { CommentsObjectProps } from '../CommentsObject';
import { SCCommentType, SCContributionType, SCFeedObjectType } from '@selfcommunity/types';
import { CacheStrategies } from '@selfcommunity/utils';
export interface CommentObjectProps {
/**
* Overrides or extends the styles applied to the component.
* @default null
*/
className?: string;
/**
* Id of the comment object
* @default null
*/
commentObjectId?: number;
/**
* Comment object
* @default null
*/
commentObject?: SCCommentType;
/**
* Id of feed object
* @default null
*/
feedObjectId?: number;
/**
* Feed object
* @default null
*/
feedObject?: SCFeedObjectType;
/**
* Type of feed object
* @default SCContributionType.POST
*/
feedObjectType?: Exclude<SCContributionType, SCContributionType.COMMENT>;
/**
* comments per page (latest_comments)
* @default null
*/
commentsPageCount?: number;
/**
* comments orderBy
* @default SCCommentsOrderBy.ADDED_AT_DESC
*/
commentsOrderBy?: SCCommentsOrderBy;
/**
* comment to reply
* Used to initial open reply box for that comment
* @default null
*/
commentReply?: SCCommentType;
/**
* Callback on open reply box
* @default null
*/
onOpenReply?: (comment: SCCommentType) => void;
/**
* Callback on vote the comment or a sub-comment (latest_comments)
* @default null
*/
onVote?: (comment: SCCommentType) => void;
/**
* Callback on delete the comment
* @default null
*/
onDelete?: (comment: SCCommentType) => void;
/**
* Callback on restore the comment
* @default null
*/
onRestore?: (comment: SCCommentType) => void;
/**
* Callback on collapsed the comment
* @default null
*/
onCollapsed?: (comment: SCCommentType) => void;
/**
* Show all summary initially (otherwise it will be truncated)
* @default false
*/
truncateContent?: boolean;
/**
* Props to spread to single comment object skeleton
* @default {elevation: 0}
*/
CommentObjectSkeletonProps?: CardProps;
/**
* Props to spread to single comment object CommentObjectReply
* @default {elevation: 0}
*/
CommentObjectReplyProps?: CardProps;
/**
* Props to spread to sub comments object
* @default {elevation: 0, WidgetProps: {variant: 'outlined'} as WidgetProps}
*/
CommentsObjectComponentProps?: CommentsObjectProps;
/**
* If datetime is linkable or not
* @default true
*/
linkableCommentDateTime?: boolean;
/**
* Caching strategies
* @default CacheStrategies.CACHE_FIRST
*/
cacheStrategy?: CacheStrategies;
/**
* Other props
*/
[p: string]: any;
}
/**
* > API documentation for the Community-JS Comment Object component. Learn about the available props and the CSS API.
*
*
* This component renders a comment item.
* Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/CommentObject)
#### Import
```jsx
import {CommentObject} from '@selfcommunity/react-ui';
```
#### Component Name
The name `SCCommentObject` can be used when providing style overrides in the theme.
#### CSS
|Rule Name|Global class|Description|
|---|---|---|
|root|.SCCommentObject-root|Styles applied to the root element.|
|comment|.SCCommentObject-comment|Styles applied to comment element.|
|nestedComments|.SCCommentObject-nestedComments|Styles applied to nested comments element wrapper.|
|avatar|.SCCommentObject-avatar|Styles applied to the avatar element.|
|author|.SCCommentObject-author|Styles applied to the author section.|
|content|.SCCommentObject-content|Styles applied to content section.|
|textContent|.SCCommentObject-text-content|Styles applied to text content section.|
|vote|.SCCommentObject-vote|Styles applied to the votes section.|
|btnVotes|.SCCommentObject-vote-audience|Styles applied to the votes audience section.|
|commentActionsMenu|.SCCommentObject-comment-actions-menu|Styles applied to comment action menu element.|
|deleted|.SCCommentObject-deleted|Styles applied to tdeleted element.|
|activityAt|.SCCommentObject-activity-at|Styles applied to activity at section.|
|reply|.SCCommentObject-reply|Styles applied to the reply element.|
|contentSubSection|.SCCommentObject-content-sub-section|Styles applied to the comment subsection|
* @param inProps
*/
export default function CommentObject(inProps: CommentObjectProps): JSX.Element;