Add custom control for variable header

Author: Imiss-U1025

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

@@ -0,0 +1,13 @@
+import { CompAction } from "lowcoder-core";
+import SimpleStringControl from "../controls/simpleStringControl";
+
+export class SimpleVariableHeaderComp extends SimpleStringControl {
+  override reduce(action: CompAction): this {
+    // if (isBroadcastAction<RenameAction>(action, CompActionTypes.RENAME)) {
+    //   if (this.getView() === action.action.oldName) {
+    //     return super.reduce(this.changeValueAction(action.action.name));
+    //   }
+    // }
+    return super.reduce(action);
+  }
+}

client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx

@@ -99,7 +99,7 @@ const ExecuteQueryPropertyView = ({
 const ExecuteQueryTmpAction = (function () {
   const childrenMap = {
     queryName: SimpleNameComp,
-    queryVariables: withDefault(keyValueListControl(false, [], "string"), [])
+    queryVariables: withDefault(keyValueListControl(false, [], "variable"), [])
   };
   return new MultiCompBuilder(childrenMap, () => {
     return () => Promise.resolve(undefined as unknown);

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

@@ -6,6 +6,7 @@ import { StringControl } from "./codeControl";
 import { ControlParams } from "./controlParams";
 import { dropdownControl } from "./dropdownControl";
 import { ParamsStringControl } from "./paramsControl";
+import { SimpleVariableHeaderComp } from "../comps/simpleVariableHeaderComp";
 
 const KeyValueWrapper = styled.div`
   display: flex;
@@ -58,13 +59,20 @@ export type KeyValueControlParams = ControlParams & {
 export function keyValueControl<T extends OptionsType>(
   hasType: boolean = false,
   types: T,
-  controlType: "params" | "string" = "params"
+  controlType: "params" | "string" | "variable" = "params"
 ) {
-  const childrenMap = {
+  let childrenMap = {
     key: controlType === "params" ? ParamsStringControl : StringControl,
     value: controlType === "params" ? ParamsStringControl : StringControl,
     type: dropdownControl(types, types[0]?.value),
   };
+  if(controlType === "variable") {
+    childrenMap = {
+      key: SimpleVariableHeaderComp as any,
+      value: SimpleVariableHeaderComp as any,
+      type: dropdownControl(types, types[0]?.value),
+    };
+  }
   return class extends new MultiCompBuilder(childrenMap, (props) => {
     return hasType
       ? {

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

@@ -14,7 +14,7 @@ import { keyValueControl, KeyValueControlParams } from "./keyValueControl"
 export function keyValueListControl<T extends OptionsType>(
   hasType: boolean = false,
   types: T | OptionsType = [],
-  controlType: "params" | "string" = "params"
+  controlType: "params" | "string" | "variable" = "params"
 ) {
   return class extends list(keyValueControl(hasType, types, controlType)) {
     getQueryParams() {

client/packages/lowcoder/src/comps/queries/queryComp/variablesComp.tsx

@@ -3,7 +3,7 @@ import { keyValueListControl } from "../../controls/keyValueListControl";
 
 export const VariablesComp = new MultiCompBuilder(
   {
-    variables: withDefault(keyValueListControl(false, [], "string"), [{ key: "", value: "" }]),
+    variables: withDefault(keyValueListControl(false, [], "variable"), [{ key: "", value: "" }]),
   },
   (props) => props //props.variables
   )