diff --git a/src/components/SessionComments.tsx b/src/components/SessionComments.tsx new file mode 100644 index 0000000..fff4ad3 --- /dev/null +++ b/src/components/SessionComments.tsx @@ -0,0 +1,100 @@ +import { useRef } from "react"; +import SendIcon from "./icons/SendIcon"; +import NewButton from "./NewButton"; +import { IComment } from "../types/IComments"; +import { useQueryClient } from "@tanstack/react-query"; + +function SessionComments({ + comments, + sessionId, +}: { + comments: IComment[]; + sessionId: string; +}) { + const textareaRef = useRef(null); + const formRef = useRef(null); + const queryClient = useQueryClient(); + + + const handleTextareaInput = () => { + const textarea = textareaRef.current; + const form = formRef.current; + if (!textarea || !form) return; + + textarea.style.height = "auto"; + form.style.height = "auto"; + + const newHeight = Math.min( + textarea.scrollHeight + (32 / 1440) * innerWidth, + (225 / 1440) * innerWidth + ); + const formHeight = Math.min( + form.clientHeight >= 80 ? newHeight + (32 / 1440) * innerWidth : 80, + (225 / 1440) * innerWidth + ); + textarea.style.height = `${newHeight}px`; + form.style.height = `${formHeight}px`; + + textarea.style.overflowY = + textarea.scrollHeight > (225 / 1440) * innerWidth ? "auto" : "hidden"; + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + + console.log("submit"); + }; + + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === "Enter" && !e.shiftKey) { + e.preventDefault(); + handleSubmit(e as unknown as React.FormEvent); + } + }; + + return ( +
+
+ {comments.length > 0 ? ( +
Комменты
+ ) : ( +
+ ghost +
+

Оставьте заметку

+

+ {`В дальнейшем это поможет быстро найти + клиента и не запутаться.`} +

+
+
+ )} +
+
+