UNPKG

@selfcommunity/react-ui

Version:

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

181 lines (173 loc) 5.03 kB
import { CommentObjectProps } from '../CommentObject'; import { SCCommentType, SCContributionType, SCFeedObjectType } from '@selfcommunity/types'; import { CacheStrategies } from '@selfcommunity/utils'; export interface CommentsObjectProps { /** * Id of the CommentsObject * @default `comments_object_<feedObjectType>_<feedObjectId | feedObject.id>` */ id?: string; /** * Overrides or extends the styles applied to the component. * @default null */ className?: string; /** * 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>; /** * CommentComponent component * Usefull to override the single Comment render component * @default CommentObject */ CommentComponent?: (inProps: CommentObjectProps) => JSX.Element; /** * Props to spread to single comment object * @default {variant: 'outlined'} */ CommentComponentProps?: CommentObjectProps; /** * Props to spread to CommentsObjectSkeleton * @default {} */ CommentsObjectSkeletonProps?: any; /** * Props to spread to single comment object skeleton * @default {elevation: 0, WidgetProps: {variant: 'outlined'}}, */ CommentObjectSkeletonProps?: any; /** * Comments to show */ comments?: SCCommentType[]; /** * Next url * If exist show load next button */ next?: string; /** * Is loading next comments * If exist load next button is replaced by comment skeleton */ isLoadingNext?: boolean; /** * Handle load next comments callback */ handleNext?: () => void; /** * Previous url * If exist show load previous button */ previous?: string; /** * Is loading previous comments * If exist load previous button is replaced by comment skeleton */ isLoadingPrevious?: boolean; /** * Handle load previous comments callback */ handlePrevious?: () => void; /** * Number of comments loaded */ totalLoadedComments?: number; /** * Total number of comments */ totalComments?: number; /** * Current page */ page?: number; /** * Previous page */ previousPage?: number; /** * Next page */ nextPage?: number; /** * Add/remove pagination links on top/bottom of items * @default false */ disablePaginationLinks?: boolean; /** * Show/hide pagination links * @default true */ hidePaginationLinks?: boolean; /** * Load more contents in place * rather than opening a new page */ inPlaceLoadMoreContents?: boolean; /** * Page query parameter name * @default 'page' */ paginationLinksPageQueryParam?: string; /** * Props to spread to the pagination Link component * @default {} */ PaginationLinkProps?: Record<string, any>; /** * Add/show other comments at the head of the component * Useful when there is a new comment (reply feed object) */ startComments?: SCCommentType[]; /** * Add/show other comments at the end of the component * Useful when there is a new comment (reply feed object) */ endComments?: SCCommentType[]; /** * Enable/disable infinite scrolling * If there is comments in startCommments/endComments infiniteScrolling will be disabled * @default true */ infiniteScrolling?: boolean; /** * Caching strategies * @default CacheStrategies.CACHE_FIRST */ cacheStrategy?: CacheStrategies; /** * Other props */ [p: string]: any; } /** * > API documentation for the Community-JS Comments Object component. Learn about the available props and the CSS API. #### Import ```jsx import {CommentsObject} from '@selfcommunity/react-ui'; ``` #### Component Name The name `SCCommentsObject` can be used when providing style overrides in the theme. #### CSS |Rule Name|Global class|Description| |---|---|---| |root|.SCCommentsObject-root|Styles applied to the root element.| |pagination|.SCCommentsObject-pagination|Styles applied to the pagination controls.| |paginationLink|.SCCommentsObject-pagination-link|Styles applied to the pagination link.| |loadNextCommentsButton|.SCCommentsObject-load-next-comments-button|Styles applied to the load next comments button.| |loadPreviousCommentsButton|.SCCommentsObject-load-previous-comments-button|Styles applied to the load previous comments button.| |commentsCounter|.SCCommentsObject-comments-counter|Styles applied to the comments counter element.| * @param inProps */ export default function CommentsObject(inProps: CommentsObjectProps): JSX.Element;