From c3132a4a602d79cef2e37a6cc824cc2a2cd06005 Mon Sep 17 00:00:00 2001 From: mou <10402885@qq.com> Date: Mon, 31 Jul 2023 20:32:53 +0800 Subject: [PATCH 1/2] add comment component: 1. Display avatar: supports custom images (high priority), setting avatar text (low priority), and automatically setting avatar colors. The avatar color rules are the same as the low coder, and the color list will be expanded in the future 2. Support custom user information 3. Supports custom mention lists, automatically merging chat lists and names from mention lists 4. Support shift+enter quick submission 5. Support for deleting comments 6. Supports clicking, submitting, deleting, and mentioning events --- .../src/icons/icon-comment-comp.svg | 1 + .../lowcoder-design/src/icons/index.ts | 3 +- .../comps/comps/commentComp/commentComp.tsx | 413 ++++++++++++++++++ .../comps/commentComp/commentConstants.tsx | 106 +++++ .../comps/controls/eventHandlerControl.tsx | 10 + .../comps/controls/styleControlConstants.tsx | 13 + client/packages/lowcoder/src/comps/index.tsx | 15 + .../lowcoder/src/comps/uiCompRegistry.ts | 1 + .../packages/lowcoder/src/i18n/locales/en.ts | 32 ++ .../packages/lowcoder/src/i18n/locales/zh.ts | 34 +- .../src/pages/editor/editorConstants.tsx | 2 + 11 files changed, 628 insertions(+), 2 deletions(-) create mode 100644 client/packages/lowcoder-design/src/icons/icon-comment-comp.svg create mode 100644 client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx create mode 100644 client/packages/lowcoder/src/comps/comps/commentComp/commentConstants.tsx diff --git a/client/packages/lowcoder-design/src/icons/icon-comment-comp.svg b/client/packages/lowcoder-design/src/icons/icon-comment-comp.svg new file mode 100644 index 000000000..b6828e6a0 --- /dev/null +++ b/client/packages/lowcoder-design/src/icons/icon-comment-comp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/packages/lowcoder-design/src/icons/index.ts b/client/packages/lowcoder-design/src/icons/index.ts index dd55eb897..27d676d45 100644 --- a/client/packages/lowcoder-design/src/icons/index.ts +++ b/client/packages/lowcoder-design/src/icons/index.ts @@ -288,4 +288,5 @@ export { ReactComponent as ExpandIcon } from "icons/icon-expand.svg"; export { ReactComponent as CompressIcon } from "icons/icon-compress.svg"; export { ReactComponent as TableCellsIcon } from "icons/icon-table-cells.svg"; // Added By Aqib Mirza export { ReactComponent as TimeLineIcon } from "icons/icon-timeline-comp.svg" -export { ReactComponent as LottieIcon } from "icons/icon-lottie.svg"; \ No newline at end of file +export { ReactComponent as LottieIcon } from "icons/icon-lottie.svg"; +export { ReactComponent as CommentIcon } from "icons/icon-comment-comp.svg"; \ No newline at end of file diff --git a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx new file mode 100644 index 000000000..0f0e4fe15 --- /dev/null +++ b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx @@ -0,0 +1,413 @@ +import React, { useEffect, useState, useRef } from "react"; +// 渲染组件到编辑器 +import { + changeChildAction, + CompAction, + RecordConstructorToView, +} from "lowcoder-core"; +// 文字国际化转换api +import { trans } from "i18n"; +// 右侧属性栏总框架 +import { UICompBuilder, withDefault } from "../../generators"; +// 右侧属性子框架 +import { Section, sectionNames } from "lowcoder-design"; +// 指示组件是否隐藏的开关 +import { hiddenPropertyView } from "comps/utils/propertyUtils"; +// 右侧属性开关 + +import { BoolControl } from "comps/controls/boolControl"; +import { styleControl } from "comps/controls/styleControl"; //样式输入框 +import { jsonValueExposingStateControl } from "comps/controls/codeStateControl"; +import { jsonControl, StringControl } from "comps/controls/codeControl"; +// 事件控制 +import { + clickEvent, + submitEvent, + eventHandlerControl, + deleteEvent, + mentionEvent, +} from "comps/controls/eventHandlerControl"; + +// 引入样式 +import { + CommentStyle, + heightCalculator, + widthCalculator, +} from "comps/controls/styleControlConstants"; +// 初始化暴露值 +import { stateComp, valueComp } from "comps/generators/simpleGenerators"; +// 组件对外暴露属性的api +import { + NameConfig, + NameConfigHidden, + withExposingConfigs, +} from "comps/generators/withExposing"; + +import { + commentDate, + commentDataTYPE, + CommentDataTooltip, + CommentUserDataTooltip, + convertCommentData, + checkUserInfoData, + checkMentionListData, +} from "./commentConstants"; +import { Avatar, List, Button, Mentions, Tooltip } from "antd"; +import VirtualList, { ListRef } from "rc-virtual-list"; +import _ from "lodash"; +import relativeTime from "dayjs/plugin/relativeTime"; +import dayjs from "dayjs"; +import "dayjs/locale/zh-cn"; +import { getInitialsAndColorCode } from "util/stringUtils"; +import { CloseOutlined } from "@ant-design/icons"; +dayjs.extend(relativeTime); +dayjs.locale("zh-cn"); + +const EventOptions = [ + clickEvent, + submitEvent, + deleteEvent, + mentionEvent, +] as const; + +const childrenMap = { + value: jsonControl(convertCommentData, commentDate), + title: withDefault(StringControl, trans("comment.titledDefaultValue")), + placeholder: withDefault(StringControl, trans("comment.placeholder")), + buttonText: withDefault(StringControl, trans("comment.buttonText")), + sendCommentAble: BoolControl.DEFAULT_TRUE, + deleteAble: BoolControl, + userInfo: jsonControl(checkUserInfoData, { + name: "{{currentUser.name}}", + email: "{{currentUser.email}}", + }), + mentionList: jsonControl(checkMentionListData, { + "@": ["Li Lei", "Han Meimei"], + "#": ["123", "456", "789"], + }), + onEvent: eventHandlerControl(EventOptions), + style: styleControl(CommentStyle), + commentList: jsonValueExposingStateControl("commentList", []), + deletedItem: jsonValueExposingStateControl("deletedItem", []), + submitedItem: jsonValueExposingStateControl("submitedItem", []), + mentionName: valueComp(""), +}; + +const CommentCompBase = ( + props: RecordConstructorToView & { + dispatch: (action: CompAction) => void; + } +) => { + // const VirtualListRef = useRef(null); + const divRef = useRef(null); + const { + value, + dispatch, + style, + title, + sendCommentAble, + buttonText, + onEvent, + mentionList, + userInfo, + placeholder, + deleteAble, + } = props; + type PrefixType = "@" | keyof typeof mentionList; + // 用于保存整合后的提及列表 + const [MentionListData, setMentionList] = useState([]); + const [commentListData, setCommentListData] = useState([]); + const [prefix, setPrefix] = useState("@"); + const [context, setContext] = useState(""); + // 将评论列表与原提及列表中的名字进行整合 + const mergeAllMentionList = (mentionList: any) => { + setMentionList( + _.merge(mentionList, { + "@": _.union( + _.concat( + mentionList["@"], + _.map(commentListData, (item, index) => { + return item?.user?.name; + }) + ) + ), + }) + ); + }; + useEffect(() => { + setCommentListData(value); + }, [value]); + + useEffect(() => { + mergeAllMentionList(mentionList); + }, [mentionList]); + + useEffect(() => { + props.commentList.onChange(commentListData); + mergeAllMentionList(mentionList); + // Used to scroll the list to the bottom after submission + setTimeout(() => { + // VirtualListRef?.current?.scrollTo(999999); + if (divRef.current) divRef.current.scrollTop = 999999; + }, 50); + }, [commentListData]); + + // 获取提及搜索关键字 + const onSearch = (_: string, newPrefix: PrefixType) => { + setPrefix(newPrefix); + }; + // 生成评论头像 + const generateCommentAvatar = (item: commentDataTYPE) => { + return ( + props.onEvent("click")} + // 如果有头像，则不设置背景色，如果displayName不为空，则使用getInitialsAndColorCode调用displayName + style={{ + backgroundColor: item?.user?.avatar + ? "" + : getInitialsAndColorCode( + item?.user?.displayName === undefined + ? item?.user?.name + : item?.user?.displayName + )[1], + verticalAlign: "middle", + }} + src={item?.user?.avatar} + > + {" "} + {item?.user?.displayName + ? item?.user?.displayName + : /^([\u4e00-\u9fa5]{2,4})$/gi.test(item?.user?.name) + ? item?.user?.name.slice(-2) + : item?.user?.name[0]} + + ); + }; + const onChange = (value: string) => { + setContext(value); + }; + + const handleSubmit = () => { + let subObject = { + user: userInfo, + value: context, + createdAt: dayjs().format(), + }; + props.submitedItem.onChange(subObject); + setCommentListData(_.concat(commentListData, [subObject])); + setContext(""); + mergeAllMentionList(mentionList); + props.onEvent("submit"); + }; + + const handleDelete = (index: number) => { + let temp = _.cloneDeep(commentListData); + props.deletedItem.onChange(temp.splice(index, 1)); + setCommentListData(temp); + props.onEvent("delete"); + }; + + const onPressEnter = (e: any) => { + if (e.shiftKey) { + e.preventDefault(); + handleSubmit(); + } + }; + return ( +
+ + {commentListData.length > 1 + ? title + .replaceAll("%d", commentListData.length.toString()) + .replace("comment", "comments") + : title.replaceAll("%d", commentListData.length.toString())} +
+ ) : ( + "" + ) + } + size="small" + > + + {(item, index) => ( + handleDelete(index)} + />, + ] + : undefined + } + > + props.onEvent("click")}> + {item?.user?.name} + + + {dayjs(item?.createdAt).isValid() + ? dayjs(item?.createdAt).fromNow() + : trans("comment.dateErr")} + + + + } + description={{item?.value}} + /> + + )} + + + {sendCommentAble ? ( + <> + { + dispatch(changeChildAction("mentionName", option?.value, false)); + props.onEvent("mention"); + }} + value={context} + rows={2} + onPressEnter={onPressEnter} + placeholder={placeholder} + > + {(MentionListData[prefix] || []).map( + (value: string, index: number) => ( + + {value} + + ) + )} + + + + ) : ( + "" + )} + + ); +}; + +let CommentBasicComp = (function () { + return new UICompBuilder(childrenMap, (props, dispatch) => ( + + )) + .setPropertyViewFn((children) => ( + <> +
+ {children.title.propertyView({ + label: trans("comment.title"), + })} + {children.value.propertyView({ + label: trans("comment.value"), + tooltip: CommentDataTooltip, + placeholder: "[]", + })} + {children.userInfo.propertyView({ + label: trans("comment.userInfo"), + tooltip: CommentUserDataTooltip, + })} + {children.mentionList.propertyView({ + label: trans("comment.mentionList"), + tooltip: trans("comment.mentionListDec"), + })} + {children.sendCommentAble.propertyView({ + label: trans("comment.showSendButton"), + })} + {children.sendCommentAble.getView() && + children.buttonText.propertyView({ + label: trans("comment.buttonTextDec"), + })} + {children.placeholder.propertyView({ + label: trans("comment.placeholderDec"), + })} + {children.deleteAble.propertyView({ + label: trans("comment.deleteAble"), + })} +
+
+ {children.onEvent.getPropertyView()} + {hiddenPropertyView(children)} +
+
+ {children.style.getPropertyView()} +
+ + )) + .build(); +})(); + +CommentBasicComp = class extends CommentBasicComp { + override autoHeight(): boolean { + return false; + } +}; +export const CommentComp = withExposingConfigs(CommentBasicComp, [ + new NameConfig("commentList", trans("comment.commentList")), + new NameConfig("deletedItem", trans("comment.deletedItem")), + new NameConfig("submitedItem", trans("comment.submitedItem")), + new NameConfig("mentionName", trans("comment.submitedItem")), + NameConfigHidden, +]); diff --git a/client/packages/lowcoder/src/comps/comps/commentComp/commentConstants.tsx b/client/packages/lowcoder/src/comps/comps/commentComp/commentConstants.tsx new file mode 100644 index 000000000..ab4a71f40 --- /dev/null +++ b/client/packages/lowcoder/src/comps/comps/commentComp/commentConstants.tsx @@ -0,0 +1,106 @@ +import { trans } from "i18n"; +import { check } from "util/convertUtils"; + +export type userTYPE = { + name: string; + avatar?: string; + displayName?: string; + email?: string; +}; +export type commentDataTYPE = { + user: userTYPE; + value?: string; + createdAt?: string; +}; + +export type userInfoType = Record; + +export const CommentDataTooltip = ( +
  • + {trans("comment.Introduction")}: +
    + 1. user - {trans("comment.helpUser")} +
    +  .name - {trans("comment.helpname")} +
    +  .avatar - {trans("comment.helpavatar")} +
    +  .displayName - {trans("comment.helpdisplayName")} +
    + 2. value - {trans("comment.helpvalue")} +
    + 3. createdAt - {trans("comment.helpcreatedAt")} +
    • +); + +export const CommentUserDataTooltip = ( +
  • + {trans("comment.Introduction")}: +
    + 1.name - {trans("comment.helpname")} +
    + 2.avatar - {trans("comment.helpavatar")} +
    + 3.displayName - {trans("comment.helpdisplayName")} +
    • +) + +export const commentDate = [ + { + user: { + name: "Li Lei", + avatar: + "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png", + }, + value: "What is the use of this component?", + createdAt: "2023-06-15T08:40:41.658Z", + }, + { + user: { name: "mou" }, + value: "This component allows you to post or delete comments, as well as mention people who appear in the chat.", + createdAt: "2023-06-16T08:43:42.658Z", + }, + { + user: { name: "Han Meimei", displayName: "Han" }, + value: "I want to give it a try", + createdAt: "2023-06-17T08:49:01.658Z", + }, + { + user: { name: "mou" }, + value: "Enter the content in the input box below and press shift+enter to send it immediately", + createdAt: "2023-06-18T08:50:11.658Z", + }, +]; + +export function convertCommentData(data: any) { + return data === "" ? [] : checkDataNodes(data) ?? []; +} + +function checkDataNodes( + value: any, + key?: string +): commentDataTYPE[] | undefined { + return check(value, ["array", "undefined"], key, (node, k) => { + check(node, ["object"], k); + check(node["user"], ["object"], "user"); + check(node["value"], ["string", "undefined"], "value"); + check(node["createdAt"], ["string", "undefined"], "createdAt"); + return node; + }); +} +export function checkUserInfoData(data: any) { + check(data?.name, ["string"], "name") + check(data?.avatar, ["string","undefined"], "avatar") + return data +} + +export function checkMentionListData(data: any) { + if(data === "") return {} + for(const key in data) { + check(data[key], ["array"], key,(node)=>{ + check(node, ["string"], ); + return node + }) + } + return data +} \ No newline at end of file diff --git a/client/packages/lowcoder/src/comps/controls/eventHandlerControl.tsx b/client/packages/lowcoder/src/comps/controls/eventHandlerControl.tsx index f940759f9..ad6144277 100644 --- a/client/packages/lowcoder/src/comps/controls/eventHandlerControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/eventHandlerControl.tsx @@ -305,6 +305,16 @@ export const successEvent: EventConfigType = { value: "success", description: trans("event.successDesc"), }; +export const deleteEvent: EventConfigType = { + label: trans("event.delete"), + value: "delete", + description: trans("event.deleteDesc"), +}; +export const mentionEvent: EventConfigType = { + label: trans("event.mention"), + value: "mention", + description: trans("event.mentionDesc"), +}; export const InputEventHandlerControl = eventHandlerControl([ changeEvent, diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 5d650faea..be4947079 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -905,6 +905,19 @@ export const LottieStyle = [ ] as const; ///////////////////// +export const CommentStyle = [ + { + name: "background", + label: trans("style.background"), + depTheme: "canvas", + depType: DEP_TYPE.SELF, + transformer: toSelf, + }, + MARGIN, + PADDING, + RADIUS, +] as const + export const CarouselStyle = [getBackground("canvas")] as const; export const RichTextEditorStyle = [getStaticBorder(), RADIUS] as const; diff --git a/client/packages/lowcoder/src/comps/index.tsx b/client/packages/lowcoder/src/comps/index.tsx index e2bdd418c..e5494f9b2 100644 --- a/client/packages/lowcoder/src/comps/index.tsx +++ b/client/packages/lowcoder/src/comps/index.tsx @@ -93,6 +93,7 @@ import { VideoCompIcon, TimeLineIcon, LottieIcon, + CommentIcon, } from "lowcoder-design"; import { defaultFormData, FormComp } from "./comps/formComp/formComp"; @@ -119,6 +120,7 @@ import { RemoteCompInfo } from "types/remoteComp"; import { ScannerComp } from "./comps/buttonComp/scannerComp"; import { SignatureComp } from "./comps/signatureComp"; import { TimeLineComp } from "./comps/timelineComp/timelineComp"; +import { CommentComp } from "./comps/commentComp/commentComp"; //Added by Aqib Mirza import { JsonLottieComp } from "./comps/jsonComp/jsonLottieComp"; @@ -855,6 +857,19 @@ const uiCompMap: Registry = { h: 55, }, }, + comment: { + name: trans("uiComp.commentCompName"), + enName: "comment", + description: trans("uiComp.commentCompDesc"), + categories: ["dataDisplay"], + icon: CommentIcon, + keywords: trans("uiComp.commentCompKeywords"), + comp: CommentComp, + layoutInfo: { + w: 13, + h: 55, + }, + }, }; export function loadComps() { diff --git a/client/packages/lowcoder/src/comps/uiCompRegistry.ts b/client/packages/lowcoder/src/comps/uiCompRegistry.ts index bba81c125..4931d4f37 100644 --- a/client/packages/lowcoder/src/comps/uiCompRegistry.ts +++ b/client/packages/lowcoder/src/comps/uiCompRegistry.ts @@ -112,6 +112,7 @@ export type UICompType = | "signature" | "jsonLottie" //Added By Aqib Mirza | "timeline" + | "comment" export const uiCompRegistry = {} as Record; diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 160955098..e414aa7d7 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -262,6 +262,10 @@ export const en = { parseDesc: "Triggers on parse", success: "Success", successDesc: "Triggers on success", + delete: "Delete", + deleteDesc: "Triggers on delete", + mention: "mention", + mentionDesc: "Triggers on mention", }, themeDetail: { primary: "Brand color", @@ -845,6 +849,9 @@ export const en = { timelineCompName: "Time Line", timelineCompDesc: "Time Line", timelineCompKeywords: "", + commentCompName: "Comment", + commentCompDesc: "Comment", + commentCompKeywords: "", }, comp: { menuViewDocs: "View documentation", @@ -2467,5 +2474,30 @@ export const en = { valueDesc: "data of timeline", clickedObjectDesc: "clicked item data", clickedIndexDesc: "clicked item index", + }, + comment: { + value: "comment list data", + showSendButton: "Allowing Comments", + title: "title", + titledDefaultValue: "%d comment in total", + placeholder: "shift + enter to comment;Enter @ or # for quick input", + placeholderDec: "placeholder", + buttonTextDec: "button title", + buttonText: "comment", + mentionList: "mention list data", + mentionListDec: "key-Mention keywords;value-Mention list data", + userInfo: "user info", + dateErr: "date error", + commentList: "comment list", + deletedItem: "deleted item", + submitedItem: "submited item", + deleteAble: "show delete button", + Introduction: "Introduction keys", + helpUser: "user info(Required)", + helpname: "user name(Required)", + helpavatar: "avatar url(high priority)", + helpdisplayName: "display name(low priority)", + helpvalue: "Comment content", + helpcreatedAt: "create date", } }; diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts index f92dff893..a1e97ad3d 100644 --- a/client/packages/lowcoder/src/i18n/locales/zh.ts +++ b/client/packages/lowcoder/src/i18n/locales/zh.ts @@ -258,7 +258,11 @@ event: { parse: "解析", parseDesc: "在解析时触发", success: "成功", - successDesc: "在成功时触发" + successDesc: "在成功时触发", + delete: "删除", + deleteDesc: "在删除时触发", + mention: "提及", + mentionDesc: "在提及时触发", }, themeDetail: { primary: "颜色主题", @@ -828,6 +832,9 @@ uiComp: { timelineCompName: "时间线", timelineCompDesc: "时间线组件", timelineCompKeywords: "sjx", + commentCompName: "评论", + commentCompDesc: "评论组件", + commentCompKeywords: "pl", }, comp: { menuViewDocs: "查看文档", @@ -2458,5 +2465,30 @@ timeLine: { endlessLoop: "循环播放", keepLastFrame: "冻结最后一帧", }, + comment: { + value: "评论列表数据", + showSendButton: "允许评论", + title: "标题", + titledDefaultValue: "共有%d条评论", + placeholder: "shift + enter 快捷发送评论;输入@或#可快速输入", + placeholderDec: "占位符", + buttonTextDec: "按钮文本", + buttonText: "发表", + mentionList: "提及列表数据", + mentionListDec: "key-提及关键字;value-提及列表", + userInfo: "用户信息", + dateErr: "日期错误", + commentList: "评论列表数据", + deletedItem: "已删除的数据", + submitedItem: "已提交的数据", + deleteAble: "显示删除按钮", + Introduction: "属性介绍", + helpUser: "用户信息(必填)", + helpname: "用户名(必填)", + helpavatar: "头像地址(高优先)", + helpdisplayName: "头像文字(低优先)", + helpvalue: "评论内容", + helpcreatedAt: "创建时间", + } }; diff --git a/client/packages/lowcoder/src/pages/editor/editorConstants.tsx b/client/packages/lowcoder/src/pages/editor/editorConstants.tsx index 7e23f6d99..533c981db 100644 --- a/client/packages/lowcoder/src/pages/editor/editorConstants.tsx +++ b/client/packages/lowcoder/src/pages/editor/editorConstants.tsx @@ -37,6 +37,7 @@ import { LeftVideo, LeftSignature, TimeLineIcon, + CommentIcon, } from "lowcoder-design"; export const CompStateIcon: { @@ -103,4 +104,5 @@ export const CompStateIcon: { signature: , jsonLottie: , //Added By Aqib Mirza timeline: , + comment: , }; From 639d6e0436a3b4970a672a314ce6286b7d65fae6 Mon Sep 17 00:00:00 2001 From: Aqib Mirza Date: Thu, 3 Aug 2023 12:55:01 +0530 Subject: [PATCH 2/2] fix: comment component --- .../comps/comps/commentComp/commentComp.tsx | 243 +++++++++--------- 1 file changed, 121 insertions(+), 122 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx index 0f0e4fe15..74168ec9e 100644 --- a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx @@ -214,138 +214,137 @@ const CommentCompBase = ( } }; return ( -
    - - {commentListData.length > 1 - ? title - .replaceAll("%d", commentListData.length.toString()) - .replace("comment", "comments") - : title.replaceAll("%d", commentListData.length.toString())} -
    - ) : ( - "" - ) - } - size="small" + }}> +
    - + {commentListData.length > 1 + ? title + .replaceAll("%d", commentListData.length.toString()) + .replace("comment", "comments") + : title.replaceAll("%d", commentListData.length.toString())} +
    + ) : ( + "" + ) + } + size="small" > - {(item, index) => ( - handleDelete(index)} - />, - ] - : undefined - } - > - props.onEvent("click")}> - {item?.user?.name} - - - {dayjs(item?.createdAt).isValid() - ? dayjs(item?.createdAt).fromNow() - : trans("comment.dateErr")} - - - - } - description={{item?.value}} - /> - - )} - - - {sendCommentAble ? ( - <> - { - dispatch(changeChildAction("mentionName", option?.value, false)); - props.onEvent("mention"); - }} - value={context} - rows={2} - onPressEnter={onPressEnter} - placeholder={placeholder} + - {(MentionListData[prefix] || []).map( - (value: string, index: number) => ( - - {value} - - ) + {(item, index) => ( + handleDelete(index)} + />, + ] + : undefined + } + > + props.onEvent("click")}> + {item?.user?.name} + + + {dayjs(item?.createdAt).isValid() + ? dayjs(item?.createdAt).fromNow() + : trans("comment.dateErr")} + + + + } + description={{item?.value}} + /> + )} - - - - ) : ( - "" - )} + + + {sendCommentAble ? ( +
    + { + dispatch(changeChildAction("mentionName", option?.value, false)); + props.onEvent("mention"); + }} + value={context} + rows={2} + onPressEnter={onPressEnter} + placeholder={placeholder} + > + {(MentionListData[prefix] || []).map( + (value: string, index: number) => ( + + {value} + + ) + )} + + +
    + ) : ( + "" + )} + ); };