Новые изменения
This commit is contained in:
Web-serfer
parent
6f727aae7b
commit
b5b31f8a88
9 changed files with 600 additions and 166 deletions
|
|
@ -1,15 +1,11 @@
|
|||
import { createSignal, Show } from "solid-js";
|
||||
|
||||
interface CommentFormData {
|
||||
content: string;
|
||||
}
|
||||
import { createSignal, Show, For } from "solid-js";
|
||||
|
||||
interface ValidationErrors {
|
||||
content?: string;
|
||||
}
|
||||
|
||||
interface CommentFormProps {
|
||||
onSubmit: (data: CommentFormData) => void;
|
||||
onSubmit: (data: { content: string }) => void;
|
||||
isReply?: boolean;
|
||||
onCancel?: () => void;
|
||||
user?: {
|
||||
|
|
@ -17,10 +13,17 @@ interface CommentFormProps {
|
|||
email: string;
|
||||
avatar?: string;
|
||||
};
|
||||
initialContent?: string;
|
||||
isEdit?: boolean;
|
||||
onUpdate?: (data: { content: string }) => void;
|
||||
onDelete?: () => void;
|
||||
}
|
||||
|
||||
const MAX_MESSAGE_LENGTH = 2000;
|
||||
const MIN_MESSAGE_LENGTH = 10;
|
||||
const EMOJIS = [
|
||||
"👍", "👎", "❤️", "😊", "😂", "🎉", "🔥", "👏",
|
||||
"😢", "😮", "😡", "🙏", "⭐", "💯", "❤️🔥", "🤔",
|
||||
"👀", "💪", "🚀", "✨"
|
||||
];
|
||||
|
||||
const DANGEROUS_PATTERNS = [
|
||||
/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,
|
||||
|
|
@ -34,10 +37,14 @@ const DANGEROUS_PATTERNS = [
|
|||
/url\s*\(\s*['"]*\s*javascript:/gi,
|
||||
];
|
||||
|
||||
const MAX_MESSAGE_LENGTH = 2000;
|
||||
const MIN_MESSAGE_LENGTH = 10;
|
||||
|
||||
export default function CommentForm(props: CommentFormProps) {
|
||||
const [content, setContent] = createSignal("");
|
||||
const [content, setContent] = createSignal(props.initialContent || "");
|
||||
const [errors, setErrors] = createSignal<ValidationErrors>({});
|
||||
const [touched, setTouched] = createSignal<{ [key: string]: boolean }>({});
|
||||
const [showEmojiPicker, setShowEmojiPicker] = createSignal(false);
|
||||
|
||||
const sanitizeInput = (input: string): string => {
|
||||
return input
|
||||
|
|
@ -82,6 +89,11 @@ export default function CommentForm(props: CommentFormProps) {
|
|||
}
|
||||
};
|
||||
|
||||
const addEmoji = (emoji: string) => {
|
||||
setContent((prev) => prev + emoji);
|
||||
setShowEmojiPicker(false);
|
||||
};
|
||||
|
||||
const validateForm = (): boolean => {
|
||||
const contentError = validateContent(content());
|
||||
setErrors({ content: contentError });
|
||||
|
|
@ -93,13 +105,17 @@ export default function CommentForm(props: CommentFormProps) {
|
|||
e.preventDefault();
|
||||
if (!validateForm()) return;
|
||||
|
||||
props.onSubmit({
|
||||
content: sanitizeInput(content().trim()),
|
||||
});
|
||||
if (props.isEdit && props.onUpdate) {
|
||||
props.onUpdate({ content: sanitizeInput(content().trim()) });
|
||||
} else {
|
||||
props.onSubmit({ content: sanitizeInput(content().trim()) });
|
||||
}
|
||||
|
||||
setContent("");
|
||||
setErrors({});
|
||||
setTouched({});
|
||||
if (!props.isEdit) {
|
||||
setContent("");
|
||||
setErrors({});
|
||||
setTouched({});
|
||||
}
|
||||
};
|
||||
|
||||
const handleBlur = () => {
|
||||
|
|
@ -131,33 +147,67 @@ export default function CommentForm(props: CommentFormProps) {
|
|||
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
|
||||
/>
|
||||
</svg>
|
||||
{props.isReply ? "Написать ответ" : "Оставить комментарий"}
|
||||
{props.isEdit ? "Редактировать комментарий" : props.isReply ? "Написать ответ" : "Оставить комментарий"}
|
||||
</h4>
|
||||
|
||||
<form onSubmit={handleSubmit} class="space-y-4">
|
||||
<div class="space-y-1">
|
||||
<textarea
|
||||
placeholder={props.user ? `Написать комментарий как ${props.user.name || props.user.email}...` : "Ваш комментарий... *"}
|
||||
value={content()}
|
||||
onInput={handleContentChange}
|
||||
onBlur={handleBlur}
|
||||
rows={props.isReply ? 3 : 4}
|
||||
class={`w-full px-4 py-3 rounded-xl border transition-all resize-none bg-white text-gray-900 placeholder-gray-400 outline-none ${
|
||||
errors().content && touched().content
|
||||
? "border-red-300 focus:border-red-500 focus:ring-2 focus:ring-red-200"
|
||||
: "border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
|
||||
}`}
|
||||
/>
|
||||
<div class="relative">
|
||||
<textarea
|
||||
placeholder={props.user ? `Написать комментарий как ${props.user.name}...` : "Ваш комментарий... *"}
|
||||
value={content()}
|
||||
onInput={handleContentChange}
|
||||
onBlur={handleBlur}
|
||||
rows={props.isReply ? 3 : props.isEdit ? 3 : 4}
|
||||
class={`w-full px-4 py-3 rounded-xl border transition-all resize-none bg-white text-gray-900 placeholder-gray-400 outline-none ${
|
||||
errors().content && touched().content
|
||||
? "border-red-300 focus:border-red-500 focus:ring-2 focus:ring-red-200"
|
||||
: "border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
|
||||
}`}
|
||||
/>
|
||||
<div class="absolute bottom-3 right-3 flex items-center gap-1">
|
||||
<div class="relative">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowEmojiPicker(!showEmojiPicker())}
|
||||
class="p-2 text-gray-400 hover:text-blue-600 transition-colors rounded-lg hover:bg-gray-100"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<Show when={showEmojiPicker()}>
|
||||
<div class="absolute bottom-full right-0 mb-2 bg-white rounded-xl shadow-lg border border-gray-200 p-3 z-10 w-64">
|
||||
<div class="grid grid-cols-5 gap-2">
|
||||
<For each={EMOJIS}>
|
||||
{(emoji) => (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => addEmoji(emoji)}
|
||||
class="p-2 text-xl hover:bg-gray-100 rounded-lg transition-colors"
|
||||
>
|
||||
{emoji}
|
||||
</button>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<Show when={errors().content && touched().content}>
|
||||
<p class="text-sm text-red-500 flex items-center gap-1">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
{errors().content}
|
||||
</p>
|
||||
</Show>
|
||||
<p class={`text-xs text-right ml-auto ${content().length > MAX_MESSAGE_LENGTH * 0.9 ? "text-orange-500" : "text-gray-400"}`}>
|
||||
<p
|
||||
class={`text-xs text-right ml-auto ${content().length > MAX_MESSAGE_LENGTH * 0.9 ? "text-orange-500" : "text-gray-400"}`}
|
||||
>
|
||||
{content().length}/{MAX_MESSAGE_LENGTH}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -166,11 +216,11 @@ export default function CommentForm(props: CommentFormProps) {
|
|||
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 pt-2">
|
||||
<p class="text-sm text-gray-500">
|
||||
{props.user
|
||||
? `Вы авторизованы как ${props.user.name || props.user.email}`
|
||||
? `Вы авторизованы как ${props.user.name}`
|
||||
: "Ваш email не будет опубликован"}
|
||||
</p>
|
||||
<div class="flex gap-2">
|
||||
<Show when={props.isReply && props.onCancel}>
|
||||
<Show when={props.isEdit && props.onCancel}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={props.onCancel}
|
||||
|
|
@ -182,12 +232,17 @@ export default function CommentForm(props: CommentFormProps) {
|
|||
<button
|
||||
type="submit"
|
||||
disabled={!isValid()}
|
||||
class="px-8 py-3 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-medium rounded-xl transition-colors shadow-lg shadow-blue-200 flex items-center gap-2 hover:cursor-pointer group"
|
||||
class="px-8 py-3 bg-gradient-to-b from-blue-600 to-blue-800 hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed text-white font-medium rounded-xl transition-all flex items-center gap-2 hover:cursor-pointer group"
|
||||
>
|
||||
<svg class="w-5 h-5 transition-transform duration-300 group-hover:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
|
||||
<svg
|
||||
class="w-5 h-5 transition-transform duration-300 group-hover:rotate-90"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
|
||||
</svg>
|
||||
{props.isReply ? "Отправить" : "Отправить комментарий"}
|
||||
{props.isEdit ? "Сохранить" : props.isReply ? "Отправить" : "Отправить комментарий"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue