43 lines
1.2 KiB
JavaScript
43 lines
1.2 KiB
JavaScript
import React from 'react';
|
|
import Comment from './Comment';
|
|
import TextEntryField from './TextEntryField';
|
|
|
|
/**
|
|
* Renders a list of comment bodies, followed by a 'reply' field.
|
|
*/
|
|
const CommentWidget = props => {
|
|
|
|
const commentBodies = props.annotation ?
|
|
props.annotation.bodies.filter(b => // No purpose or 'commenting', 'replying'
|
|
!b.hasOwnProperty('purpose') || b.purpose === 'commenting' || b.purpose === 'replying'
|
|
) : [];
|
|
|
|
return (
|
|
<>
|
|
{ commentBodies.map((body, idx) =>
|
|
<Comment
|
|
key={idx}
|
|
readOnly={props.readOnly}
|
|
body={body}
|
|
onUpdate={props.onUpdateComment}
|
|
onDelete={props.onDeleteComment}
|
|
onOk={props.onOk} />
|
|
)}
|
|
|
|
{ !props.readOnly && props.annotation &&
|
|
<div className="r6o-widget comment editable">
|
|
<TextEntryField
|
|
content={props.currentReply}
|
|
editable={true}
|
|
placeholder={commentBodies.length > 0 ? 'Add a reply...' : 'Add a comment...'}
|
|
onChange={props.onUpdateReply}
|
|
onOk={() => props.onOk()}
|
|
/>
|
|
</div>
|
|
}
|
|
</>
|
|
)
|
|
|
|
}
|
|
|
|
export default CommentWidget; |