diff options
Diffstat (limited to 'src')
3 files changed, 56 insertions, 4 deletions
diff --git a/src/components/organisms/comments-list/comments-list.stories.tsx b/src/components/organisms/comments-list/comments-list.stories.tsx index f6ad58e..afebfb7 100644 --- a/src/components/organisms/comments-list/comments-list.stories.tsx +++ b/src/components/organisms/comments-list/comments-list.stories.tsx @@ -175,3 +175,14 @@ WithReplies.args = { depth: 2, onSubmit: saveComment, }; + +/** + * Layout Stories - With nested comments and forbidden replies + */ +export const WithForbiddenReplies = Template.bind({}); +WithForbiddenReplies.args = { + areRepliesForbidden: true, + comments, + depth: 3, + onSubmit: saveComment, +}; diff --git a/src/components/organisms/comments-list/comments-list.test.tsx b/src/components/organisms/comments-list/comments-list.test.tsx index 6706362..8feb97c 100644 --- a/src/components/organisms/comments-list/comments-list.test.tsx +++ b/src/components/organisms/comments-list/comments-list.test.tsx @@ -261,4 +261,30 @@ describe('CommentsList', () => { expect(rtlScreen.queryByRole('form')).not.toBeInTheDocument(); }); + + it('does not render a reply button when replies are forbidden', () => { + const comments = [ + { + author: { name: 'Milan0' }, + content: 'Fugit veniam quas qui dolor explicabo.', + id: 1, + isApproved: true, + publicationDate: '2023-01-23', + }, + { + author: { name: 'Haskell42' }, + content: 'Error quas accusamus nesciunt enim quae a.', + id: 2, + isApproved: true, + publicationDate: '2023-02-04', + }, + ] satisfies CommentData[]; + + render(<CommentsList areRepliesForbidden comments={comments} depth={2} />); + + expect(rtlScreen.queryAllByRole('button', { name: /Reply/ })).toHaveLength( + 0 + ); + expect(rtlScreen.queryByRole('form')).not.toBeInTheDocument(); + }); }); diff --git a/src/components/organisms/comments-list/comments-list.tsx b/src/components/organisms/comments-list/comments-list.tsx index 0470f99..657c558 100644 --- a/src/components/organisms/comments-list/comments-list.tsx +++ b/src/components/organisms/comments-list/comments-list.tsx @@ -36,6 +36,12 @@ export type CommentsListProps = Omit< > & Pick<ReplyCommentFormProps, 'onSubmit'> & { /** + * Should we forbid replies on comments when depth is not exceed? + * + * @default false + */ + areRepliesForbidden?: boolean; + /** * The comments. */ comments: CommentData[]; @@ -50,7 +56,10 @@ export type CommentsListProps = Omit< const CommentsListWithRef: ForwardRefRenderFunction< HTMLOListElement, CommentsListProps -> = ({ comments, depth = 0, onSubmit, ...props }, ref) => { +> = ( + { areRepliesForbidden = false, comments, depth = 0, onSubmit, ...props }, + ref +) => { const [replyingTo, setReplyingTo] = useState<Nullable<number>>(null); const intl = useIntl(); @@ -93,8 +102,14 @@ const CommentsListWithRef: ForwardRefRenderFunction< <> <ApprovedComment {...comment} - onReply={toggleReply} - replyBtn={isLastLevel ? undefined : replyBtnLabel} + onReply={ + isLastLevel || areRepliesForbidden ? undefined : toggleReply + } + replyBtn={ + isLastLevel || areRepliesForbidden + ? undefined + : replyBtnLabel + } /> {replyingTo === comment.id ? ( <ReplyCommentForm @@ -122,7 +137,7 @@ const CommentsListWithRef: ForwardRefRenderFunction< ); }); }, - [depth, intl, onSubmit, replyingTo, toggleReply] + [areRepliesForbidden, depth, intl, onSubmit, replyingTo, toggleReply] ); return ( |