Add masking to steps along with primary color type

Author: snowe2010

client/packages/lowcoder/src/comps/comps/tourComp/tourComp.tsx

@@ -50,7 +50,9 @@ let TourBasicComp = (function() {
         description: step.description,
         target: target?.current,
         arrow: step.arrow || true,
-        placement: step.placement as PlacementType
+        placement: step.placement as PlacementType,
+        mask: step.mask,
+        type: step.type || "default",
       };
     });
 

client/packages/lowcoder/src/comps/controls/codeControl.tsx

@@ -30,11 +30,11 @@ import {
   toHex,
   wrapperToControlItem,
 } from "lowcoder-design";
-import { lazy, ReactNode, Suspense } from "react";
+import { CSSProperties, lazy, ReactNode, Suspense } from "react";
 import {
   showTransform,
   toArrayJSONObject,
-  toBoolean,
+  toBoolean, toBooleanOrCss,
   toJSONArray,
   toJSONObject,
   toJSONObjectArray,
@@ -318,6 +318,7 @@ export type CodeControlJSONType = ReturnType<typeof tmpFuncForJson>;
 export const StringControl = codeControl<string>(toString);
 export const NumberControl = codeControl<number>(toNumber);
 export const StringOrNumberControl = codeControl<string | number>(toStringOrNumber);
+export const MaskControl = codeControl<boolean | { style?: CSSProperties | undefined; color?: string | undefined; } | undefined>(toBooleanOrCss);
 
 // rangeCheck, don't support Infinity temporarily
 export class RangeControl {

client/packages/lowcoder/src/comps/controls/tourStepControl.tsx

@@ -1,4 +1,4 @@
-import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
+import { BoolCodeControl, MaskControl, StringControl } from "comps/controls/codeControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { MultiCompBuilder, withDefault } from "comps/generators";
 import { list } from "comps/generators/list";
@@ -24,6 +24,7 @@ import { ReactNode, useContext, useEffect, useState } from "react";
 import { EditorContext, EditorState } from "@lowcoder-ee/comps/editorState";
 // import { PlacementType } from "@rc-component"
 export type PlacementType = 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'center';
+export type TourStepType = 'default' | 'primary';
 
 const OptionTypes = [
   {
@@ -281,6 +282,12 @@ const PlacementOptions: {label: string, value: PlacementType}[] = [
 ];
 
 
+const TypeOptions: {label: string, value: TourStepType}[] = [
+  { label: "Default", value: "default"},
+  { label: "Primary", value: "primary"},
+];
+
+
 export function editorStateDropdownControl<T extends OptionsType>(
   options: ((editorState: EditorState) => T),
   defaultValue: ValueFromOption<T>
@@ -329,7 +336,6 @@ function EditorStateDropdownPropertyView<T extends OptionsType>(props: DropdownP
     }
     if (!finalOptions?.length) {
       setFinalOptions(options(editorState))
-        //.then((items) => setFinalOptions(items));
     }
   }, [finalOptions.length, options]);
 
@@ -402,6 +408,8 @@ let TourStep = new MultiCompBuilder(
     description: StringControl,
     placement: dropdownControl(PlacementOptions, "bottom"),
     hidden: BoolCodeControl,
+    mask: MaskControl,
+    type: dropdownControl(TypeOptions, "default"),
   },
   (props) => props
 ).build();
@@ -427,9 +435,15 @@ TourStep = class extends TourStep implements TourStepCompProperty {
           radioButton: false
         })}
         {this.children.arrow.propertyView({
-          label: "Arrow"
+          label: "Arrow",
         })}
         {hiddenPropertyView(this.children)}
+        {this.children.mask.propertyView({
+          label: "Mask",
+        })}
+        {this.children.type.propertyView({
+          label: "Type",
+        })}
       </>
     );
   }

client/packages/lowcoder/src/util/convertUtils.ts

@@ -1,4 +1,5 @@
 import { JSONObject, JSONValue } from "util/jsonTypes";
+import { CSSProperties } from "react";
 
 class EvalTypeError extends TypeError {
   hint?: string;
@@ -245,3 +246,17 @@ export function check(
     )
   );
 }
+
+export function toBooleanOrCss(value: any): boolean | undefined | {
+  style?: CSSProperties | undefined;
+  color?: string | undefined;
+} {
+  if (value === undefined || value === null || value === "") {
+    return undefined;
+  }
+  // if (typeof value === "boolean") {
+  if (value.toLocaleLowerCase() === "true" || value.toLocaleLowerCase() === "false") {
+    return value.toLocaleLowerCase() === "true";
+  }
+  return toJSONObject(value);
+}