Changes for AntIcon, Timeline Component

lowcoder-org · FalkWolsky · Feb 22, 2024 · Feb 20, 2024 · Feb 21, 2024 · Feb 21, 2024
commit f42e8e7c54c08388dae412b8f51a2d9ae8878c3c
diff --git a/client/VERSION b/client/VERSION
@@ -1 +1 @@
-2.3.0
+2.3.1
diff --git a/client/package.json b/client/package.json
@@ -70,6 +70,7 @@
   },
   "dependencies": {
     "@lottiefiles/react-lottie-player": "^3.5.3",
+    "@remixicon/react": "^4.1.1",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
     "@types/styled-components": "^5.1.34",

diff --git a/client/packages/lowcoder-design/src/components/edit.tsx b/client/packages/lowcoder-design/src/components/edit.tsx
@@ -68,7 +68,7 @@ const TextInput = styled(Input)<InputProps & { $hasPrefix?: boolean }>`
   border: none;
   padding: 0 8px 0 4px;
   padding-left: ${(props) => (props.$hasPrefix ? "28px" : "4px")};
-  color: #ffffff;
+  color: #444444;
   line-height: 28px;
   font-size: 14px;
 

diff --git a/.../src/comps/comps/timelineComp/antIcon.tsx → ...ges/lowcoder-design/src/icons/antIcon.tsx b/.../src/comps/comps/timelineComp/antIcon.tsx → ...ges/lowcoder-design/src/icons/antIcon.tsx
@@ -1581,3 +1581,24 @@ export const ANTDICON = {
   zoominoutlined: <ZoomInOutlined />,
   zoomoutoutlined: <ZoomOutOutlined />,
 };
+
+
+// Function to dynamically import icons
+export const loadAntDIcon = async (iconName: string) => {
+  if (!iconName) return null;
+
+  try {
+    const module = await import(`@ant-design/icons`);
+    const IconComponent = (module as any)[iconName];
+    if (IconComponent) {
+      // Return the icon component if found
+      return <IconComponent />;
+    } else {
+      console.error(`Icon ${iconName} not found in @ant-design/icons`);
+      return null;
+    }
+  } catch (error) {
+    console.error(`Error loading icon ${iconName}:`, error);
+    return null;
+  }
+};
diff --git a/client/packages/lowcoder-design/src/index.ts b/client/packages/lowcoder-design/src/index.ts
@@ -49,3 +49,5 @@ export * from "./components/toolTip";
 export * from "./components/video";
 
 export * from "./icons";
+
+export * from "./icons/antIcon";
diff --git a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
@@ -1,26 +1,19 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
 import { default as Button } from "antd/es/button";
-// 渲染组件到编辑器
 import {
   changeChildAction,
   DispatchType,
   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 { stringExposingStateControl } from "comps/controls/codeStateControl"; //文本并暴露值
+import { stringExposingStateControl } from "comps/controls/codeStateControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
-import { styleControl } from "comps/controls/styleControl"; //样式输入框
+import { styleControl } from "comps/controls/styleControl";
 import { alignControl } from "comps/controls/alignControl";
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
 import { jsonValueExposingStateControl } from "comps/controls/codeStateControl";
@@ -34,35 +27,25 @@ import {
   NumberControl,
   StringControl,
 } from "comps/controls/codeControl";
-// 事件控制
 import {
   clickEvent,
   eventHandlerControl,
 } from "comps/controls/eventHandlerControl";
-
-// 引入样式
 import {
   TimeLineStyle,
   heightCalculator,
   widthCalculator,
   marginCalculator,
 } from "comps/controls/styleControlConstants";
-// 初始化暴露值
 import { stateComp, valueComp } from "comps/generators/simpleGenerators";
-// 组件对外暴露属性的api
 import {
   NameConfig,
   NameConfigHidden,
   withExposingConfigs,
 } from "comps/generators/withExposing";
-
 import { timelineDate, timelineNode, TimelineDataTooltip } from "./timelineConstants";
 import { convertTimeLineData } from "./timelineUtils";
 import { default as Timeline } from "antd/es/timeline";
-
-import { ANTDICON } from "./antIcon"; // todo: select icons to not import all icons
-
-import { useContext } from "react";
 import { EditorContext } from "comps/editorState"; 
 
 const EventOptions = [
@@ -86,18 +69,44 @@ const childrenMap = {
   clickedIndex: valueComp<number>(0),
 };
 
+// Utility function to dynamically load Ant Design icons
+const loadIcon = async (iconName: string) => {
+  if (!iconName) return null;
+  try {
+    const module = await import(`@ant-design/icons`);
+    const IconComponent = (module as any)[iconName];
+    return IconComponent ? <IconComponent /> : null;
+  } catch (error) {
+    console.error(`Error loading icon ${iconName}:`, error);
+    return null;
+  }
+};
+
 const TimelineComp = (
   props: RecordConstructorToView<typeof childrenMap> & {
     dispatch: (action: CompAction) => void;
   }
 ) => {
   const { value, dispatch, style, mode, reverse, onEvent } = props;
+  const [icons, setIcons] = useState<React.ReactNode[]>([]);
+
+  useEffect(() => {
+    const loadIcons = async () => {
+      const iconComponents = await Promise.all(
+        value.map((node) =>
+          node.dot ? loadIcon(node.dot) : Promise.resolve(null)
+        )
+      );
+      setIcons(iconComponents);
+    };
+
+    loadIcons();
+  }, [value]);
+
   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]
-      : "",
+    dot: icons[index] || "",
     label: (
       <span style={{ color: value?.lableColor || style?.lableColor }}>
         {value?.label}
@@ -125,10 +134,8 @@ const TimelineComp = (
         </p>
       </>
     )
-  }
-  ))
+  }));
 
-  // TODO:parse px string
   return (
     <div
       style={{

diff --git a/client/packages/lowcoder/src/pages/common/headerStartDropdown.tsx b/client/packages/lowcoder/src/pages/common/headerStartDropdown.tsx
@@ -154,7 +154,7 @@ export function HeaderStartDropdown(props: { setEdit: () => void }) {
         )}
       >
         <EditTextWrapper
-          style={{ width: "fit-content", maxWidth: "288px", padding: "0 8px" }}
+          style={{ width: "fit-content", maxWidth: "288px", padding: "0 8px"}}
           disabled={showAppSnapshot}
         >
           {isModule && (

diff --git a/client/yarn.lock b/client/yarn.lock
@@ -3387,6 +3387,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@remixicon/react@npm:^4.1.1":
+  version: 4.1.1
+  resolution: "@remixicon/react@npm:4.1.1"
+  peerDependencies:
+    react: ">=18.2.0"
+  checksum: 59b05b91ad9335ae531b2927ceb7c5930ec5afcdabb5d96461d3181e1f794ddbdd4a899e85eb66f1a5341f55132898b6f680f51643bd7bd7244a741f44beb0b7
+  languageName: node
+  linkType: hard
+
 "@rjsf/antd@npm:^5.15.1":
   version: 5.15.1
   resolution: "@rjsf/antd@npm:5.15.1"
@@ -11921,6 +11930,7 @@ __metadata:
     "@babel/preset-env": ^7.20.2
     "@babel/preset-typescript": ^7.18.6
     "@lottiefiles/react-lottie-player": ^3.5.3
+    "@remixicon/react": ^4.1.1
     "@rollup/plugin-typescript": ^8.5.0
     "@testing-library/jest-dom": ^5.16.5
     "@testing-library/react": ^14.1.2
Original file line number	Diff line number	Diff line change
Expand Up		@@ -49,3 +49,5 @@ export * from "./components/toolTip";
		export * from "./components/video";

		export * from "./icons";

		export * from "./icons/antIcon";