UNPKG

@selfcommunity/react-ui

Version:

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

153 lines (144 loc) 4.76 kB
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;