From ce759070874d980efe45c611d715720448f905be Mon Sep 17 00:00:00 2001 From: kazachilo Date: Mon, 17 Mar 2025 15:51:10 +0300 Subject: [PATCH] =?UTF-8?q?=D0=BB=D1=83=D1=87=D1=88=D0=B5=D0=BD=20=D0=B2?= =?UTF-8?q?=D1=8B=D0=B1=D0=BE=D1=80=20=D1=8D=D0=BC=D0=BE=D0=B4=D0=B7=D0=B8?= =?UTF-8?q?=20=D0=B4=D0=BB=D1=8F=20=D1=81=D1=82=D0=B8=D0=BA=D0=B5=D1=80?= =?UTF-8?q?=D0=BE=D0=B2:=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=20=D0=BC=D0=BE=D0=B4=D0=B0=D0=BB=D1=8C=D0=BD=D1=8B=D0=B9?= =?UTF-8?q?=20=D0=BF=D0=B8=D0=BA=D0=B5=D1=80=20=D1=8D=D0=BC=D0=BE=D0=B4?= =?UTF-8?q?=D0=B7=D0=B8,=20=D0=BE=D0=BF=D1=82=D0=B8=D0=BC=D0=B8=D0=B7?= =?UTF-8?q?=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=20=D1=81=D0=BF=D0=B8=D1=81?= =?UTF-8?q?=D0=BE=D0=BA=20=D1=8D=D0=BC=D0=BE=D0=B4=D0=B7=D0=B8,=20=D1=83?= =?UTF-8?q?=D0=BB=D1=83=D1=87=D1=88=D0=B5=D0=BD=20UX?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../shared/EmojiPickerModal.module.css | 34 ++++++ src/components/shared/EmojiPickerModal.tsx | 102 ++++++++++++++++++ src/screens/CreateStickerPack.module.css | 4 +- src/screens/CreateStickerPack.tsx | 48 +++++++-- 4 files changed, 179 insertions(+), 9 deletions(-) create mode 100644 src/components/shared/EmojiPickerModal.module.css create mode 100644 src/components/shared/EmojiPickerModal.tsx diff --git a/src/components/shared/EmojiPickerModal.module.css b/src/components/shared/EmojiPickerModal.module.css new file mode 100644 index 0000000..3dc89ed --- /dev/null +++ b/src/components/shared/EmojiPickerModal.module.css @@ -0,0 +1,34 @@ +.emojiContainer { + margin-bottom: var(--spacing-medium); + max-height: 300px; + overflow-y: auto; +} + +.emojiGrid { + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: 8px; +} + +.emojiItem { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + background: none; + border: 2px solid transparent; + border-radius: 8px; + cursor: pointer; + transition: border-color 0.2s; + font-size: 1.5rem; +} + +.emojiItem:hover { + background-color: rgba(0, 0, 0, 0.05); +} + +.selected { + border-color: var(--color-primary); + background-color: rgba(var(--color-primary-rgb), 0.1); +} diff --git a/src/components/shared/EmojiPickerModal.tsx b/src/components/shared/EmojiPickerModal.tsx new file mode 100644 index 0000000..d8ca31d --- /dev/null +++ b/src/components/shared/EmojiPickerModal.tsx @@ -0,0 +1,102 @@ +import React, { useState } from 'react'; +import styles from './NotificationModal.module.css'; +import emojiStyles from './EmojiPickerModal.module.css'; + +interface EmojiPickerModalProps { + isVisible: boolean; + onCancel: () => void; + onSelect: (emoji: string) => void; + initialEmoji?: string; +} + +const emojiList = [ + // Смайлы и эмоции + '😀', '😃', '😄', '😁', '😆', '😅', '🤣', '😂', '🙂', '🙃', '😉', '😊', + '😇', '😍', '😘', '😗', '😚', '😙', '😋', '😛', '😜', '😝', '😐', '😑', + '😶', '😏', '😒', '🙄', '😬', '😌', '😔', '😪', '😴', '😷', + + // Жесты и люди + '👍', '👎', '👌', '✌️', '👈', '👉', '👆', '👇', '👋', '✋', '👏', '🙌', + '👐', '🙏', '💪', '👂', '👃', '👀', '👄', '💋', '❤️', '💔', '💕', '💯', + + // Животные + '🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯', '🦁', + '🐮', '🐷', '🐸', '🐵', '🙈', '🙉', '🙊', '🐒', '🐔', '🐧', '🐦', + '🐤', '🐣', '🦆', '🦅', '🦉', '🐺', '🐗', '🐴', '🦄', '🐝', + '🐛', '🦋', '🐌', '🐞', '🐜', '🕷️', '🕸️', + + // Еда и напитки + '🍏', '🍎', '🍐', '🍊', '🍋', '🍌', '🍉', '🍇', '🍓', '🍈', '🍒', + '🍑', '🍍', '🍅', '🍆', '🌽', '🍞', '🧀', '🍳', '🍗', '🍖', '🌭', + '🍔', '🍟', '🍕', '🍝', '🍜', '🍲', '🍛', '🍣', '🍱', '🍤', '🍙', + + // Активности и объекты + '⚽', '🏀', '🏈', '⚾', '🎾', '🏐', '🏉', '🎱', '🏓', '🏸', '🏒', '🏑', + '⛳', '🏹', '🎣', '🏊', '🏄', '🏆', '🥇', '🥈', '🥉', '🏅', + + // Символы + '❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍', '🤎', '💔', '❣️', '💕', + '💞', '💓', '💗', '💖', '💘', '💝', '💟', '☮️', '✝️', '☪️', '🕉️', '☸️', + '✡️', '🔯', '🕎', '☯️', '☦️', '🛐', '⛎', '♈', '♉', '♊', '♋', '♌', '♍', + '♎', '♏', '♐', '♑', '♒', '♓', '❌', '⭕', '🛑' +]; + +const EmojiPickerModal: React.FC = ({ + isVisible, + onCancel, + onSelect, + initialEmoji = '😊' +}) => { + const [selectedEmoji, setSelectedEmoji] = useState(initialEmoji); + + if (!isVisible) return null; + + const handleEmojiClick = (emoji: string) => { + setSelectedEmoji(emoji); + }; + + const handleApply = () => { + onSelect(selectedEmoji); + }; + + return ( +
+
+
+
Выберите эмодзи
+
+ +
+
+ {emojiList.map((emoji, index) => ( + + ))} +
+
+ +
+ + +
+
+
+ ); +}; + +export default EmojiPickerModal; diff --git a/src/screens/CreateStickerPack.module.css b/src/screens/CreateStickerPack.module.css index 605e64f..4f93212 100644 --- a/src/screens/CreateStickerPack.module.css +++ b/src/screens/CreateStickerPack.module.css @@ -102,13 +102,15 @@ padding: 2px; } -.emojiInput { +.emojiButton { width: 2.5rem; + height: 2.5rem; background: none; border: none; color: white; font-size: 1.2rem; text-align: center; + cursor: pointer; } .actions { diff --git a/src/screens/CreateStickerPack.tsx b/src/screens/CreateStickerPack.tsx index 2e4d6f9..4d67c38 100644 --- a/src/screens/CreateStickerPack.tsx +++ b/src/screens/CreateStickerPack.tsx @@ -5,6 +5,7 @@ import { stickerService } from '../services/stickerService'; import apiService from '../services/api'; import { GeneratedImage } from '../types/api'; import { getCurrentUserId } from '../constants/user'; +import EmojiPickerModal from '../components/shared/EmojiPickerModal'; /** * Транслитерирует кириллический текст в латиницу. @@ -46,6 +47,7 @@ function transliterate(text: string): string { return result.substring(0, 30); } + const CreateStickerPack: React.FC = () => { const navigate = useNavigate(); const [title, setTitle] = useState(''); @@ -56,6 +58,8 @@ const CreateStickerPack: React.FC = () => { const [creating, setCreating] = useState(false); const [error, setError] = useState(null); const titleInputRef = useRef(null); + const [isEmojiPickerVisible, setIsEmojiPickerVisible] = useState(false); + const [activeEmojiIndex, setActiveEmojiIndex] = useState(null); // Функция для сворачивания клавиатуры const dismissKeyboard = () => { @@ -71,6 +75,28 @@ const CreateStickerPack: React.FC = () => { dismissKeyboard(); } }; + + // Функция для открытия пикера эмодзи + const openEmojiPicker = (index: number, e: React.MouseEvent) => { + e.stopPropagation(); + setActiveEmojiIndex(index); + setIsEmojiPickerVisible(true); + }; + + // Функция для закрытия пикера эмодзи без выбора + const handleCancelEmojiPicker = () => { + setIsEmojiPickerVisible(false); + setActiveEmojiIndex(null); + }; + + // Функция для выбора эмодзи + const handleSelectEmoji = (emoji: string) => { + if (activeEmojiIndex !== null) { + handleEmojiChange(activeEmojiIndex, emoji); + } + setIsEmojiPickerVisible(false); + setActiveEmojiIndex(null); + }; // Загрузка доступных изображений useEffect(() => { @@ -230,14 +256,12 @@ const CreateStickerPack: React.FC = () => { {isSelected && (
- handleEmojiChange(selectedIndex, e.target.value)} - className={styles.emojiInput} - maxLength={2} - onClick={(e) => e.stopPropagation()} - /> +
)} @@ -259,6 +283,14 @@ const CreateStickerPack: React.FC = () => { + + {/* Модальное окно выбора эмодзи */} + ); };