fix: updated timeline

lowcoder-org · FalkWolsky · Jul 28, 2023 · Jul 21, 2023 · Jul 24, 2023 · Jul 24, 2023
commit a19df5959b1a61b26933ce948055d0f22c9df6aa
diff --git a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react";
+import { Button } from "antd";
 // 渲染组件到编辑器
 import {
   changeChildAction,
@@ -87,6 +88,42 @@ const TimelineComp = (
   }
 ) => {
   const { value, dispatch, style, mode, reverse, onEvent } = props;
+  const timelineItems = value.map((value: timelineNode, index: number) => ({
+    key: index,
+    color: value?.color,
+    dot: value?.dot && ANTDICON.hasOwnProperty(value?.dot.toLowerCase())
+      ? ANTDICON[value?.dot.toLowerCase() as keyof typeof ANTDICON]
+      : "",
+    label: (
+      <span style={{ color: value?.lableColor || style?.lableColor }}>
+        {value?.label}
+      </span>
+    ),
+    children: (
+      <>
+        <Button
+          type="link"
+          onClick={(e) => {
+            e.preventDefault();
+            dispatch(changeChildAction("clickedObject", value, false));
+            dispatch(changeChildAction("clickedIndex", index, false));
+            onEvent("click");
+          }}
+          style={{
+            cursor: "pointer",
+            color: value?.titleColor || style?.titleColor,
+          }}
+        >
+          <b>{value?.title}</b>
+        </Button>
+        <p style={{ color: value?.subTitleColor || style?.subTitleColor }}>
+          {value?.subTitle}
+        </p>
+      </>
+    )
+  }
+  ))
+
   // TODO:parse px string
   return (
     <div
@@ -112,43 +149,8 @@ const TimelineComp = (
             </span>
           )
         }
-      >
-        {value.map((value: timelineNode, index: number) => (
-          <Timeline.Item
-            key={index}
-            color={value?.color}
-            dot={
-              value?.dot && ANTDICON.hasOwnProperty(value?.dot.toLowerCase())
-                ? ANTDICON[value?.dot.toLowerCase() as keyof typeof ANTDICON]
-                : ""
-            }
-            label={
-              <span style={{ color: value?.lableColor || style?.lableColor }}>
-                {value?.label}
-              </span>
-            }
-          >
-            <a
-              href=""
-              onClick={(e) => {
-                e.preventDefault();
-                dispatch(changeChildAction("clickedObject", value, false));
-                dispatch(changeChildAction("clickedIndex", index, false));
-                onEvent("click");
-              }}
-              style={{
-                cursor: "pointer",
-                color: value?.titleColor || style?.titleColor,
-              }}
-            >
-              <b>{value?.title}</b>
-            </a>
-            <p style={{ color: value?.subTitleColor || style?.subTitleColor }}>
-              {value?.subTitle}
-            </p>
-          </Timeline.Item>
-        ))}
-      </Timeline>
+        items={timelineItems}
+      />
     </div>
   );
 };

diff --git a/client/packages/lowcoder/src/util/keyUtils.tsx b/client/packages/lowcoder/src/util/keyUtils.tsx
@@ -86,7 +86,7 @@ function normalizeKey(e: React.KeyboardEvent | KeyboardEvent) {
     return v;
   }
   for (const p of codePrefixes) {
-    if (code.length === p.length + 1 && code.startsWith(p)) {
+    if (code?.length === p.length + 1 && code?.startsWith(p)) {
       return code.slice(p.length);
     }
   }