From 8a0884ebf93da44c10e22096417602f41d083f98 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Wed, 5 Feb 2025 04:42:13 -0500 Subject: [PATCH 1/4] Add custom control for variable header --- .../src/comps/comps/simpleVariableHeaderComp.tsx | 13 +++++++++++++ .../controls/actionSelector/executeQueryAction.tsx | 2 +- .../lowcoder/src/comps/controls/keyValueControl.tsx | 12 ++++++++++-- .../src/comps/controls/keyValueListControl.tsx | 2 +- .../src/comps/queries/queryComp/variablesComp.tsx | 2 +- 5 files changed, 26 insertions(+), 5 deletions(-) create mode 100644 client/packages/lowcoder/src/comps/comps/simpleVariableHeaderComp.tsx diff --git a/client/packages/lowcoder/src/comps/comps/simpleVariableHeaderComp.tsx b/client/packages/lowcoder/src/comps/comps/simpleVariableHeaderComp.tsx new file mode 100644 index 000000000..7875058d7 --- /dev/null +++ b/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(action, CompActionTypes.RENAME)) { + // if (this.getView() === action.action.oldName) { + // return super.reduce(this.changeValueAction(action.action.name)); + // } + // } + return super.reduce(action); + } +} diff --git a/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx b/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx index e337ac869..7946d93ab 100644 --- a/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx +++ b/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); diff --git a/client/packages/lowcoder/src/comps/controls/keyValueControl.tsx b/client/packages/lowcoder/src/comps/controls/keyValueControl.tsx index 86e02a1a4..0455d9d3f 100644 --- a/client/packages/lowcoder/src/comps/controls/keyValueControl.tsx +++ b/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( 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 ? { diff --git a/client/packages/lowcoder/src/comps/controls/keyValueListControl.tsx b/client/packages/lowcoder/src/comps/controls/keyValueListControl.tsx index 6beb5eddc..fab6b0d0e 100644 --- a/client/packages/lowcoder/src/comps/controls/keyValueListControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/keyValueListControl.tsx @@ -14,7 +14,7 @@ import { keyValueControl, KeyValueControlParams } from "./keyValueControl" export function keyValueListControl( hasType: boolean = false, types: T | OptionsType = [], - controlType: "params" | "string" = "params" + controlType: "params" | "string" | "variable" = "params" ) { return class extends list(keyValueControl(hasType, types, controlType)) { getQueryParams() { diff --git a/client/packages/lowcoder/src/comps/queries/queryComp/variablesComp.tsx b/client/packages/lowcoder/src/comps/queries/queryComp/variablesComp.tsx index 94ce13f03..ec271e28f 100644 --- a/client/packages/lowcoder/src/comps/queries/queryComp/variablesComp.tsx +++ b/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 ) From ffbe25a954c738956b8d9cbcb73e0323a8ba657e Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Wed, 5 Feb 2025 08:53:23 -0500 Subject: [PATCH 2/4] apply name checking to control --- .../comps/comps/simpleVariableHeaderComp.tsx | 70 +++++++++++++++++-- 1 file changed, 66 insertions(+), 4 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/simpleVariableHeaderComp.tsx b/client/packages/lowcoder/src/comps/comps/simpleVariableHeaderComp.tsx index 7875058d7..6741f17ef 100644 --- a/client/packages/lowcoder/src/comps/comps/simpleVariableHeaderComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/simpleVariableHeaderComp.tsx @@ -1,7 +1,56 @@ -import { CompAction } from "lowcoder-core"; -import SimpleStringControl from "../controls/simpleStringControl"; - -export class SimpleVariableHeaderComp extends SimpleStringControl { +import { CompAction, SimpleComp } from "lowcoder-core"; +import { ControlParams, ControlPropertyViewWrapper, EditorContext, EditText, PopupCard } from "@lowcoder-ee/index.sdk"; +import { useEffect, useState } from "react"; +import { trans } from "@lowcoder-ee/i18n"; +import { Input } from "lowcoder-design/src/components/Input"; +import { checkName } from "../utils/rename"; +const SimpleVariableHeaderPropertyView = ({params, comp}: any) => { + const [error, setError] = useState(""); + const [value, setValue] = useState(comp.value); + useEffect(() => { + setValue(comp.value); + setError(undefined); + }, [comp]); + return ( + + { + const error = checkName(e.target.value); + setError(error || undefined); + setValue(e.target.value); + }} + onBlur={(e) => { + if(!error) comp.dispatchChangeValueAction(value); + else { + setValue(comp.value); + setError(undefined); + } + }} + /> + {/* { + if (editorState.rename(comp.value, value)) { + // editorState.setSelectedBottomRes(value, type); + setError(""); + } + }} + onChange={(value) => setError(editorState.checkRename(comp.value, value))} + style={{ maxWidth: '100%', width: '100%' }} + /> */} + + + ); +} +export class SimpleVariableHeaderComp extends SimpleComp { override reduce(action: CompAction): this { // if (isBroadcastAction(action, CompActionTypes.RENAME)) { // if (this.getView() === action.action.oldName) { @@ -10,4 +59,17 @@ export class SimpleVariableHeaderComp extends SimpleStringControl { // } return super.reduce(action); } + + readonly IGNORABLE_DEFAULT_VALUE = ""; + protected getDefaultValue(): string { + return ""; + } + + getPropertyView() { + return this.propertyView({}); + } + + propertyView(params: ControlParams) { + return + } } From f1f03b02f875b642fc404590099f42d4599a9ec2 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Wed, 5 Feb 2025 09:04:29 -0500 Subject: [PATCH 3/4] Check only key --- .../comps/comps/simpleVariableHeaderComp.tsx | 68 ++++++++----------- .../src/comps/controls/keyValueControl.tsx | 4 +- 2 files changed, 31 insertions(+), 41 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/simpleVariableHeaderComp.tsx b/client/packages/lowcoder/src/comps/comps/simpleVariableHeaderComp.tsx index 6741f17ef..22e962446 100644 --- a/client/packages/lowcoder/src/comps/comps/simpleVariableHeaderComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/simpleVariableHeaderComp.tsx @@ -1,15 +1,15 @@ import { CompAction, SimpleComp } from "lowcoder-core"; -import { ControlParams, ControlPropertyViewWrapper, EditorContext, EditText, PopupCard } from "@lowcoder-ee/index.sdk"; +import { ControlParams, ControlPropertyViewWrapper, PopupCard } from "@lowcoder-ee/index.sdk"; import { useEffect, useState } from "react"; import { trans } from "@lowcoder-ee/i18n"; import { Input } from "lowcoder-design/src/components/Input"; import { checkName } from "../utils/rename"; -const SimpleVariableHeaderPropertyView = ({params, comp}: any) => { - const [error, setError] = useState(""); +const SimpleVariableHeaderPropertyView = ({params, comp, isCheck}: any) => { + const [error, setError] = useState(); const [value, setValue] = useState(comp.value); useEffect(() => { setValue(comp.value); - setError(undefined); + isCheck && setError(undefined); }, [comp]); return ( @@ -17,59 +17,49 @@ const SimpleVariableHeaderPropertyView = ({params, comp}: any) => { value={value} placeholder={params.placeholder} onChange={(e) => { - const error = checkName(e.target.value); - setError(error || undefined); + const error = isCheck && checkName(e.target.value); + isCheck && setError(error || undefined); setValue(e.target.value); }} onBlur={(e) => { - if(!error) comp.dispatchChangeValueAction(value); + if(!isCheck || !error) comp.dispatchChangeValueAction(value); else { setValue(comp.value); setError(undefined); } }} /> - {/* { - if (editorState.rename(comp.value, value)) { - // editorState.setSelectedBottomRes(value, type); - setError(""); - } - }} - onChange={(value) => setError(editorState.checkRename(comp.value, value))} - style={{ maxWidth: '100%', width: '100%' }} - /> */} - + />} ); } -export class SimpleVariableHeaderComp extends SimpleComp { - override reduce(action: CompAction): this { - // if (isBroadcastAction(action, CompActionTypes.RENAME)) { - // if (this.getView() === action.action.oldName) { - // return super.reduce(this.changeValueAction(action.action.name)); - // } - // } - return super.reduce(action); - } +export const SimpleVariableHeaderComp = (isCheck: boolean = false) => { + return class SimpleVariableHeaderComp extends SimpleComp { + override reduce(action: CompAction): this { + // if (isBroadcastAction(action, CompActionTypes.RENAME)) { + // if (this.getView() === action.action.oldName) { + // return super.reduce(this.changeValueAction(action.action.name)); + // } + // } + return super.reduce(action); + } - readonly IGNORABLE_DEFAULT_VALUE = ""; - protected getDefaultValue(): string { - return ""; - } + readonly IGNORABLE_DEFAULT_VALUE = ""; + protected getDefaultValue(): string { + return ""; + } - getPropertyView() { - return this.propertyView({}); - } + getPropertyView() { + return this.propertyView({}); + } - propertyView(params: ControlParams) { - return + propertyView(params: ControlParams) { + return + } } } diff --git a/client/packages/lowcoder/src/comps/controls/keyValueControl.tsx b/client/packages/lowcoder/src/comps/controls/keyValueControl.tsx index 0455d9d3f..319d8ac0a 100644 --- a/client/packages/lowcoder/src/comps/controls/keyValueControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/keyValueControl.tsx @@ -68,8 +68,8 @@ export function keyValueControl( }; if(controlType === "variable") { childrenMap = { - key: SimpleVariableHeaderComp as any, - value: SimpleVariableHeaderComp as any, + key: SimpleVariableHeaderComp(true) as any, + value: SimpleVariableHeaderComp() as any, type: dropdownControl(types, types[0]?.value), }; } From 3e410045c3456e8522ea1e23019a405bd43ef7c7 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Wed, 5 Feb 2025 13:34:33 -0500 Subject: [PATCH 4/4] fix import statement --- .../lowcoder/src/comps/comps/simpleVariableHeaderComp.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/simpleVariableHeaderComp.tsx b/client/packages/lowcoder/src/comps/comps/simpleVariableHeaderComp.tsx index 22e962446..a709da485 100644 --- a/client/packages/lowcoder/src/comps/comps/simpleVariableHeaderComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/simpleVariableHeaderComp.tsx @@ -1,8 +1,8 @@ +import { ControlParams } from "comps/controls/controlParams"; import { CompAction, SimpleComp } from "lowcoder-core"; -import { ControlParams, ControlPropertyViewWrapper, PopupCard } from "@lowcoder-ee/index.sdk"; +import { ControlPropertyViewWrapper, PopupCard, Input } from "lowcoder-design"; import { useEffect, useState } from "react"; -import { trans } from "@lowcoder-ee/i18n"; -import { Input } from "lowcoder-design/src/components/Input"; +import { trans } from "i18n"; import { checkName } from "../utils/rename"; const SimpleVariableHeaderPropertyView = ({params, comp, isCheck}: any) => { const [error, setError] = useState();