Cause tour component to not fail on initial load

snowe2010 · snowe2010 · commit b9259400c1ba · 2024-04-17T10:22:51.000-06:00
turns out it just required ?!
diff --git a/client/packages/lowcoder/src/comps/comps/tourComp/tourComp.tsx b/client/packages/lowcoder/src/comps/comps/tourComp/tourComp.tsx
@@ -1,8 +1,7 @@
-import { styleControl } from "comps/controls/styleControl";
-import { SelectStyle } from "comps/controls/styleControlConstants";
 import { trans } from "i18n";
 import {
-  CommonNameConfig, MultiBaseComp,
+  CommonNameConfig,
+  MultiBaseComp,
   NameConfig,
   stringExposingStateControl,
   UICompBuilder,
@@ -13,54 +12,57 @@ import { baseSelectRefMethods, TourChildrenMap, TourPropertyView } from "./tourC
 import { TourInputCommonConfig } from "./tourInputConstants";
 import { Tour, TourProps } from "antd";
 import { PlacementType } from "@lowcoder-ee/comps/controls/tourStepControl";
-import { useContext } from "react";
+import React, { Suspense, useContext } from "react";
 import { EditorContext } from "@lowcoder-ee/comps/editorState";
 import { GridItemComp } from "@lowcoder-ee/comps/comps/gridItemComp";
 import { HookComp } from "@lowcoder-ee/comps/hooks/hookComp";
 import { TemporaryStateItemComp } from "@lowcoder-ee/comps/comps/temporaryStateComp";
-import { delay } from "redux-saga/effects";
 
 /**
  * This component builds the Property Panel and the fake 'UI' for the Tour component
  */
-let TourBasicComp = (function () {
+let TourBasicComp = (function() {
   const childrenMap = {
     ...TourChildrenMap,
     defaultValue: stringExposingStateControl("defaultValue"),
-    value: stringExposingStateControl("value"),
+    value: stringExposingStateControl("value")
     // style: styleControl(SelectStyle),
   };
   return new UICompBuilder(childrenMap, (props, dispatch) => {
     const editorState = useContext(EditorContext);
     const compMap: (GridItemComp | HookComp | InstanceType<typeof TemporaryStateItemComp>)[] = Object.values(editorState.getAllUICompMap());
-    
-    const steps: TourProps['steps'] = props.options.map((step) => {
+
+    const steps: TourProps["steps"] = props.options.map((step) => {
       const targetName = step.target;
       let target = undefined;
       const compListItem = compMap.find((compItem) => compItem.children.name.getView() === targetName);
       if (compListItem) {
-        console.log(`setting selected comp to ${compListItem}`)
+        console.log(`setting selected comp to ${compListItem}`);
         try {
-          target = ((compListItem as MultiBaseComp).children.comp as GridItemComp).getRef();
+          target = ((compListItem as MultiBaseComp).children.comp as GridItemComp).getRef?.();
         } catch (e) {
-          target = ((compListItem as MultiBaseComp).children.comp as HookComp).getRef();
+          target = ((compListItem as MultiBaseComp).children.comp as HookComp).getRef?.();
         }
       }
-      
+
       return {
         title: step.title,
         description: step.description,
         target: target?.current,
         arrow: step.arrow || true,
-        placement: step.placement as PlacementType,
-      }
-    })
+        placement: step.placement as PlacementType
+      };
+    });
 
-    return (<Tour
-      steps={steps}
-      open={props.open.value} 
-      onClose={() => props.open.onChange(false)}
-    />)
+    return (
+      <Suspense fallback={<div>loading</div>}>
+        <Tour
+          steps={steps}
+          open={props.open.value}
+          onClose={() => props.open.onChange(false)}
+        />
+      </Suspense>
+    );
   })
     .setPropertyViewFn((children) => <TourPropertyView {...children} />)
     .setExposeMethodConfigs(baseSelectRefMethods)
@@ -72,17 +74,17 @@ TourBasicComp = withMethodExposing(TourBasicComp, [
     method: {
       name: "startTour",
       description: "Triggers the tour to start",
-      params: [],
+      params: []
     },
     execute: (comp, values) => {
-      comp.children.open.getView().onChange(true)
+      comp.children.open.getView().onChange(true);
     }
   }
-])
+]);
 
 export const TourComp = withExposingConfigs(TourBasicComp, [
   new NameConfig("value", trans("selectInput.valueDesc")),
   new NameConfig("inputValue", trans("select.inputValueDesc")),
   ...TourInputCommonConfig,
-  ...CommonNameConfig,
+  ...CommonNameConfig
 ]);
diff --git a/client/packages/lowcoder/src/comps/controls/tourStepControl.tsx b/client/packages/lowcoder/src/comps/controls/tourStepControl.tsx
@@ -419,7 +419,7 @@ TourStep = class extends TourStep implements TourStepCompProperty {
           placeholder: "Welcome to lowcoder, this is your first tutorial step",
         })}
         {this.children.target.propertyView({
-          label: "TARGET",
+          label: "Component",
           radioButton: false,
         })}
         {this.children.placement.propertyView({
