UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: локальный emoji popup для комментариев деталей задач
This commit is contained in:
DCCONSTRUCTIONS
@@ -4,7 +4,7 @@
|
||||
* See the LICENSE file for details.
|
||||
*/
|
||||
|
||||
import React, { useEffect, useState, useCallback } from "react";
|
||||
import React, { useEffect, useState, useCallback, useMemo } from "react";
|
||||
import { ArrowUp, Paperclip, SmilePlus } from "lucide-react";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
|
||||
@@ -17,6 +17,7 @@ import { useTranslation } from "@plane/i18n";
|
||||
import { Button } from "@plane/propel/button";
|
||||
import { GlobeIcon, LockIcon } from "@plane/propel/icons";
|
||||
import type { ISvgIcons } from "@plane/propel/icons";
|
||||
import { Popover } from "@plane/propel/popover";
|
||||
import { Tooltip } from "@plane/propel/tooltip";
|
||||
// constants
|
||||
import { cn } from "@plane/utils";
|
||||
@@ -58,12 +59,177 @@ const COMMENT_ACCESS_SPECIFIERS: TCommentAccessType[] = [
|
||||
];
|
||||
|
||||
const toolbarItems = TOOLBAR_ITEMS.lite;
|
||||
const EMOJI_ITEM: ToolbarMenuItem<"emoji"> = {
|
||||
itemKey: "emoji",
|
||||
renderKey: "emoji",
|
||||
name: "Emoji",
|
||||
icon: SmilePlus,
|
||||
editors: ["lite", "document"],
|
||||
const COMMENT_RECENT_EMOJI_STORAGE_KEY = "nodedc-comment-emoji-recent";
|
||||
const COMMENT_RECENT_EMOJI_LIMIT = 8;
|
||||
const COMMENT_EMOJIS = [
|
||||
"😀",
|
||||
"😃",
|
||||
"😄",
|
||||
"😁",
|
||||
"😆",
|
||||
"😅",
|
||||
"🤣",
|
||||
"😂",
|
||||
"🙂",
|
||||
"😉",
|
||||
"😊",
|
||||
"😇",
|
||||
"🥰",
|
||||
"😍",
|
||||
"🤩",
|
||||
"😘",
|
||||
"😗",
|
||||
"😚",
|
||||
"😋",
|
||||
"😛",
|
||||
"😜",
|
||||
"🤪",
|
||||
"🫠",
|
||||
"🤗",
|
||||
"🤔",
|
||||
"🫡",
|
||||
"🤝",
|
||||
"👏",
|
||||
"🙌",
|
||||
"👍",
|
||||
"👎",
|
||||
"🔥",
|
||||
"💯",
|
||||
"✨",
|
||||
"🎉",
|
||||
"❤️",
|
||||
"🧡",
|
||||
"💛",
|
||||
"💚",
|
||||
"💙",
|
||||
"💜",
|
||||
"🤍",
|
||||
"🤎",
|
||||
"🖤",
|
||||
"😎",
|
||||
"🤓",
|
||||
"🥳",
|
||||
"😴",
|
||||
"🤯",
|
||||
"😬",
|
||||
"😌",
|
||||
"🥲",
|
||||
"😭",
|
||||
"😡",
|
||||
"🤮",
|
||||
"🤢",
|
||||
"🤡",
|
||||
"👀",
|
||||
"🙏",
|
||||
"👌",
|
||||
"✅",
|
||||
"❌",
|
||||
];
|
||||
|
||||
const readRecentCommentEmojis = (storageKey: string) => {
|
||||
if (typeof window === "undefined") return [];
|
||||
|
||||
try {
|
||||
const value = window.localStorage.getItem(storageKey);
|
||||
if (!value) return [];
|
||||
|
||||
const parsed = JSON.parse(value);
|
||||
return Array.isArray(parsed) ? parsed.filter((emoji): emoji is string => typeof emoji === "string") : [];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
const writeRecentCommentEmoji = (storageKey: string, emoji: string, limit: number) => {
|
||||
if (typeof window === "undefined") return [];
|
||||
|
||||
const next = [emoji, ...readRecentCommentEmojis(storageKey).filter((value) => value !== emoji)].slice(0, limit);
|
||||
|
||||
try {
|
||||
window.localStorage.setItem(storageKey, JSON.stringify(next));
|
||||
} catch {
|
||||
return next;
|
||||
}
|
||||
|
||||
return next;
|
||||
};
|
||||
|
||||
type CompactCommentEmojiPickerProps = {
|
||||
isOpen: boolean;
|
||||
onEmojiSelect: (emoji: string) => void;
|
||||
onOpenChange: (value: boolean) => void;
|
||||
};
|
||||
|
||||
const CompactCommentEmojiPicker: React.FC<CompactCommentEmojiPickerProps> = ({
|
||||
isOpen,
|
||||
onEmojiSelect,
|
||||
onOpenChange,
|
||||
}) => {
|
||||
const [recentEmojis, setRecentEmojis] = useState<string[]>(() =>
|
||||
readRecentCommentEmojis(COMMENT_RECENT_EMOJI_STORAGE_KEY)
|
||||
);
|
||||
|
||||
const handleEmojiSelect = useCallback(
|
||||
(emoji: string) => {
|
||||
setRecentEmojis(
|
||||
writeRecentCommentEmoji(COMMENT_RECENT_EMOJI_STORAGE_KEY, emoji, COMMENT_RECENT_EMOJI_LIMIT)
|
||||
);
|
||||
onEmojiSelect(emoji);
|
||||
onOpenChange(false);
|
||||
},
|
||||
[onEmojiSelect, onOpenChange]
|
||||
);
|
||||
|
||||
const mainEmojis = useMemo(
|
||||
() => COMMENT_EMOJIS.filter((emoji) => !recentEmojis.includes(emoji)),
|
||||
[recentEmojis]
|
||||
);
|
||||
|
||||
const renderEmojiButton = (emoji: string, isRecent = false) => (
|
||||
<button
|
||||
key={`${isRecent ? "recent" : "main"}-${emoji}`}
|
||||
type="button"
|
||||
onMouseDown={(event) => event.preventDefault()}
|
||||
onClick={() => handleEmojiSelect(emoji)}
|
||||
className={cn(
|
||||
"grid place-items-center rounded-[14px] text-[1.35rem] leading-none transition-colors hover:bg-layer-1",
|
||||
isRecent ? "size-9" : "h-9 w-9"
|
||||
)}
|
||||
>
|
||||
{emoji}
|
||||
</button>
|
||||
);
|
||||
|
||||
return (
|
||||
<Popover open={isOpen} onOpenChange={onOpenChange}>
|
||||
<Popover.Button className="outline-none">
|
||||
<Tooltip tooltipContent="Emoji">
|
||||
<div className="grid size-10 place-items-center rounded-[16px] bg-layer-1/85 text-secondary transition-colors hover:bg-layer-1 focus-visible:outline-none">
|
||||
<SmilePlus className="h-4 w-4" strokeWidth={2} />
|
||||
</div>
|
||||
</Tooltip>
|
||||
</Popover.Button>
|
||||
<Popover.Panel
|
||||
positionerClassName="z-50"
|
||||
className="nodedc-dropdown-surface my-1 w-[22rem] overflow-hidden rounded-[20px] p-3"
|
||||
side="top"
|
||||
align="start"
|
||||
sideOffset={8}
|
||||
data-prevent-outside-click="true"
|
||||
onMouseDown={(event) => event.stopPropagation()}
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
<div className="max-h-80 overflow-y-auto pr-1">
|
||||
{recentEmojis.length > 0 && (
|
||||
<div className="mb-2 flex flex-wrap gap-1.5 border-b border-subtle/60 pb-2">
|
||||
{recentEmojis.map((emoji) => renderEmojiButton(emoji, true))}
|
||||
</div>
|
||||
)}
|
||||
<div className="grid grid-cols-8 gap-1.5">{mainEmojis.map((emoji) => renderEmojiButton(emoji))}</div>
|
||||
</div>
|
||||
</Popover.Panel>
|
||||
</Popover>
|
||||
);
|
||||
};
|
||||
|
||||
export function IssueCommentToolbar(props: Props) {
|
||||
@@ -83,6 +249,7 @@ export function IssueCommentToolbar(props: Props) {
|
||||
} = props;
|
||||
// State to manage active states of toolbar items
|
||||
const [activeStates, setActiveStates] = useState<Record<string, boolean>>({});
|
||||
const [isEmojiPickerOpen, setIsEmojiPickerOpen] = useState(false);
|
||||
|
||||
// Function to update active states
|
||||
const updateActiveStates = useCallback(() => {
|
||||
@@ -125,15 +292,11 @@ export function IssueCommentToolbar(props: Props) {
|
||||
<Paperclip className="h-4 w-4" strokeWidth={2} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
<Tooltip tooltipContent="Emoji">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => executeCommand(EMOJI_ITEM)}
|
||||
className="grid size-10 place-items-center rounded-[16px] bg-layer-1/85 text-secondary transition-colors hover:bg-layer-1 focus-visible:outline-none"
|
||||
>
|
||||
<SmilePlus className="h-4 w-4" strokeWidth={2} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
<CompactCommentEmojiPicker
|
||||
isOpen={isEmojiPickerOpen}
|
||||
onOpenChange={setIsEmojiPickerOpen}
|
||||
onEmojiSelect={(emoji) => editorRef?.setEditorValueAtCursorPosition(emoji)}
|
||||
/>
|
||||
</div>
|
||||
{showSubmitButton && (
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user