fix: auto-scroll comments to bottom in TaskModal
All checks were successful
Deploy Web Client / deploy (push) Successful in 35s
All checks were successful
Deploy Web Client / deploy (push) Successful in 35s
This commit is contained in:
parent
9064a3be12
commit
51844e61ca
@ -1,6 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useRef, useState } from "react";
|
||||||
import {
|
import {
|
||||||
Task, Member, Step, Message,
|
Task, Member, Step, Message,
|
||||||
updateTask, deleteTask, getMembers,
|
updateTask, deleteTask, getMembers,
|
||||||
@ -53,6 +53,7 @@ export default function TaskModal({ task, projectId, projectSlug, onClose, onUpd
|
|||||||
const [confirmDelete, setConfirmDelete] = useState(false);
|
const [confirmDelete, setConfirmDelete] = useState(false);
|
||||||
const [newStep, setNewStep] = useState("");
|
const [newStep, setNewStep] = useState("");
|
||||||
const [newComment, setNewComment] = useState("");
|
const [newComment, setNewComment] = useState("");
|
||||||
|
const commentsEndRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
getMembers().then(setMembers).catch(() => {});
|
getMembers().then(setMembers).catch(() => {});
|
||||||
@ -60,6 +61,10 @@ export default function TaskModal({ task, projectId, projectSlug, onClose, onUpd
|
|||||||
getMessages({ task_id: task.id }).then(setComments).catch(() => {});
|
getMessages({ task_id: task.id }).then(setComments).catch(() => {});
|
||||||
}, [task.id]);
|
}, [task.id]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
commentsEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||||
|
}, [comments]);
|
||||||
|
|
||||||
const save = async (patch: Partial<Task>) => {
|
const save = async (patch: Partial<Task>) => {
|
||||||
setSaving(true);
|
setSaving(true);
|
||||||
try {
|
try {
|
||||||
@ -252,6 +257,7 @@ export default function TaskModal({ task, projectId, projectSlug, onClose, onUpd
|
|||||||
{comments.length === 0 && (
|
{comments.length === 0 && (
|
||||||
<div className="text-sm text-[var(--muted)] italic">Нет комментариев</div>
|
<div className="text-sm text-[var(--muted)] italic">Нет комментариев</div>
|
||||||
)}
|
)}
|
||||||
|
<div ref={commentsEndRef} />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex gap-2 mt-3">
|
<div className="flex gap-2 mt-3">
|
||||||
<input
|
<input
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user