give / src / Campaigns / Blocks / CampaignComments / resources / shared / components / CommentCard / index.tsx

index.tsx in GiveWP – Donation Plugin and Fundraising Platform 4.17.0, at src/Campaigns/Blocks/CampaignComments/resources/shared/components/CommentCard/index.tsx

38 lines 1.7 KB

Raw Download Zip

1	import {useState} from 'react';
2	import {__} from '@wordpress/i18n';
3	import {Attributes, CommentData} from '../../../types';
4	import './styles.scss';
5
6	export default function CampaignCommentCard({attributes, data}: {attributes: Attributes; data: CommentData}) {
7	const [fullComment, setFullComment] = useState<boolean>(false);
8	const {comment, date, donorName, avatar} = data;
9	const {commentLength, showAvatar, showDate, showName, readMoreText = __('Read More', 'give')} = attributes;
10
11	const truncatedComment = comment.slice(0, commentLength) + (comment.length > commentLength ? '...' : '');
12
13	return (
14	<div className={'givewp-campaign-comment-block-card'}>
15	{showAvatar && (
16	<div className="givewp-campaign-comment-block-card__avatar">
17	<img src={avatar} alt={__('Donor avatar')} />
18	</div>
19	)}
20	<div className={'givewp-campaign-comment-block__content'}>
21	{showName && <p className={'givewp-campaign-comment-block-card__donor-name'}>{donorName}</p>}
22	{showDate && <p className={'givewp-campaign-comment-block-card__details'}>{date}</p>}
23	<p className={'givewp-campaign-comment-block-card__comment'}>
24	{fullComment ? comment : truncatedComment}
25	</p>
26	{comment?.length > commentLength && !fullComment && (
27	<button
28	className={'givewp-campaign-comment-block-card__read-more'}
29	onClick={() => setFullComment(!fullComment)}
30	>
31	{readMoreText}
32	</button>
33	)}
34	</div>
35	</div>
36	);
37	}
38