mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-04 23:36:00 -05:00
64460681b8
GitOrigin-RevId: 95d4db64d2f837322d84a81cbd129ec02ee135a2
107 lines
3.3 KiB
TypeScript
107 lines
3.3 KiB
TypeScript
import { memo, useCallback } from 'react'
|
|
import { Change, CommentOperation } from '../../../../../types/change'
|
|
import { ReviewPanelMessage } from './review-panel-message'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { useThreadsContext } from '../context/threads-context'
|
|
import AutoExpandingTextArea from '@/shared/components/auto-expanding-text-area'
|
|
import ReviewPanelResolvedMessage from './review-panel-resolved-message'
|
|
import { ReviewPanelResolvedCommentThread } from '../../../../../types/review-panel/comment-thread'
|
|
import useSubmittableTextInput from '../hooks/use-submittable-text-input'
|
|
import {
|
|
CommentId,
|
|
ThreadId,
|
|
} from '../../../../../types/review-panel/review-panel'
|
|
|
|
export const ReviewPanelCommentContent = memo<{
|
|
comment: Change<CommentOperation>
|
|
isResolved: boolean
|
|
onEdit?: (commentId: CommentId, content: string) => Promise<void>
|
|
onReply?: (content: string) => Promise<void>
|
|
onDeleteMessage?: (commentId: CommentId) => Promise<void>
|
|
onDeleteThread?: (threadId: ThreadId) => Promise<void>
|
|
onResolve?: () => Promise<void>
|
|
onLeave?: () => void
|
|
onEnter?: () => void
|
|
}>(
|
|
({
|
|
comment,
|
|
isResolved,
|
|
onResolve,
|
|
onDeleteMessage,
|
|
onDeleteThread,
|
|
onEdit,
|
|
onReply,
|
|
onLeave,
|
|
onEnter,
|
|
}) => {
|
|
const { t } = useTranslation()
|
|
const threads = useThreadsContext()
|
|
|
|
const handleSubmit = useCallback(
|
|
(content, setContent) => onReply?.(content).then(() => setContent('')),
|
|
[onReply]
|
|
)
|
|
|
|
const { handleChange, handleKeyPress, content } =
|
|
useSubmittableTextInput(handleSubmit)
|
|
|
|
const thread = threads?.[comment.op.t]
|
|
if (!thread) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="review-panel-entry-content"
|
|
onMouseEnter={onEnter}
|
|
onMouseLeave={onLeave}
|
|
>
|
|
{thread.messages.map((message, i) => {
|
|
const isReply = i !== 0
|
|
|
|
return (
|
|
<div key={message.id} className="review-panel-comment-wrapper">
|
|
{isReply && (
|
|
<div className="review-panel-comment-reply-divider" />
|
|
)}
|
|
<ReviewPanelMessage
|
|
message={message}
|
|
isReply={isReply}
|
|
hasReplies={!isReply && thread.messages.length > 1}
|
|
onResolve={onResolve}
|
|
onEdit={onEdit}
|
|
onDelete={() =>
|
|
isReply
|
|
? onDeleteMessage?.(message.id)
|
|
: onDeleteThread?.(comment.op.t)
|
|
}
|
|
isThreadResolved={isResolved}
|
|
/>
|
|
</div>
|
|
)
|
|
})}
|
|
|
|
{isResolved && (
|
|
<div className="review-panel-comment-wrapper">
|
|
<div className="review-panel-comment-reply-divider" />
|
|
<ReviewPanelResolvedMessage
|
|
thread={thread as ReviewPanelResolvedCommentThread}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{!isResolved && (
|
|
<AutoExpandingTextArea
|
|
name="content"
|
|
className="review-panel-comment-input"
|
|
onChange={handleChange}
|
|
onKeyDown={handleKeyPress}
|
|
placeholder={t('reply')}
|
|
value={content}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
)
|
|
ReviewPanelCommentContent.displayName = 'ReviewPanelCommentContent'
|