Merge pull request #826 from gisce/68871/icones-comments-timeline

Comments: allow icon in timeline
gisce · Jan 20, 2025 · c17feb3 · c17feb3
2 parents 0928377 + 8a6b50b
commit c17feb3
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 11 deletions.
diff --git a/src/stories/custom/Comments.stories.tsx b/src/stories/custom/Comments.stories.tsx
@@ -1,11 +1,11 @@
 // @ts-ignore
 import React from "react";
-import LocaleProvider from "../../context/LocaleContext";
 import {
   Comments,
   CommentsTimeline,
   EventsType,
 } from "../../widgets/custom/Comments";
+import { Comments as CommentsOOui } from "@gisce/ooui";
 
 export default {
   title: "Components/Widgets/Custom/Comments",
@@ -88,11 +88,7 @@ export const Default = (): React.ReactElement => {
       isAuthor: false,
     },
   ];
-  return (
-    <LocaleProvider lang="es_ES">
-      <Comments data={data} />
-    </LocaleProvider>
-  );
+  return <Comments data={data} />;
 };
 
 export const Timeline = () => {
@@ -154,6 +150,7 @@ export const Timeline = () => {
     },
     {
       type: "comment",
+      icon: "mail",
       event: {
         id: 4,
         text:
@@ -183,15 +180,17 @@ export const Timeline = () => {
     },
     {
       type: "action",
+      icon: "close",
       event: {
         action: "Close",
         date: "2023-04-01 13:35:00",
       },
     },
   ] as EventsType[];
-  return (
-    <LocaleProvider lang="es_ES">
-      <CommentsTimeline value={data} />
-    </LocaleProvider>
-  );
+  const ooui = new CommentsOOui({
+    props: {
+      name: "comments",
+    },
+  });
+  return <CommentsTimeline value={data} ooui={ooui} />;
 };
diff --git a/src/widgets/custom/Comments.tsx b/src/widgets/custom/Comments.tsx
@@ -15,6 +15,7 @@ import { useLocale } from "@gisce/react-formiga-components";
 
 import dayjs from "@/helpers/dayjs";
 import md5 from "md5";
+import iconMapper from "@/helpers/iconMapper";
 
 const { Meta } = Card;
 const { Text } = Typography;
@@ -60,6 +61,7 @@ type EventActionType = {
 
 export type EventsType = {
   type: "action" | "comment";
+  icon?: string;
   event: EventActionType | CommentDataType;
 };
 
@@ -125,19 +127,26 @@ export const Comments = (props: CommentsTypeProps) => {
   );
 };
 
+const getIcon = (icon: string): React.ReactElement => {
+  const Icon: React.ElementType = iconMapper(icon) as any;
+  return Icon && <Icon />;
+};
+
 export const CommentsTimeline = (props: CommentsTimelineProps) => {
   const { value, ooui } = props;
   const items = (value || []).map((i) => {
     if (i.type === "action") {
       return {
         children: `${i.event.date} - ${(i.event as EventActionType).action}`,
+        dot: i.icon ? getIcon(i.icon) : undefined,
       };
     } else if (i.type === "comment") {
       return {
         color: "gray",
         position: (i.event as CommentDataType).isSender ? "left" : "right",
         label: i.event.date,
         children: <Comment data={i.event as CommentDataType} />,
+        dot: i.icon ? getIcon(i.icon) : undefined,
       };
     }
   });