feat(timeline): allow to define icon

gisce · Nov 19, 2024 · fa5b515 · fa5b515
1 parent 6364d58
commit fa5b515
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/src/widgets/custom/Timeline.tsx b/src/widgets/custom/Timeline.tsx
@@ -9,6 +9,7 @@ import ConnectionProvider from "@/ConnectionProvider";
 import { Spin, Alert, Timeline as AntTimeline } from "antd";
 import { readObjectValues } from "@/helpers/one2manyHelper";
 import { FormModal } from "../modals/FormModal";
+import iconMapper from "@/helpers/iconMapper";
 
 type TimelineItemProps = {
   title: string;
@@ -105,7 +106,8 @@ export const TimelineInput = (props: TimelineInputProps) => {
   const [error, setError] = useState<string>();
   const [showFormModal, setShowFormModal] = useState<boolean>(false);
   const [modalItem, setModalItem] = useState<One2manyItem>();
-  const { relation, context, readOnly, summaryField, titleField } = ooui;
+  const { relation, context, readOnly, summaryField, titleField, iconField } =
+    ooui;
   const itemsToShow = items.filter((item) => item.values);
 
   const formContext = useContext(FormContext) as FormContextType;
@@ -156,6 +158,11 @@ export const TimelineInput = (props: TimelineInputProps) => {
     return <Spin />;
   }
 
+  const getIcon = (icon: string): React.ReactElement => {
+    const Icon: React.ElementType = iconMapper(icon) as any;
+    return Icon && <Icon />;
+  };
+
   const timelineItems = itemsToShow.map((item) => ({
     children: (
       <TimelineItem
@@ -169,6 +176,7 @@ export const TimelineInput = (props: TimelineInputProps) => {
         }}
       />
     ),
+    dot: item.values?.[iconField] && getIcon(item.values?.[iconField]),
   }));
 
   return (