diff --git a/client/packages/lowcoder/src/comps/controls/actionSelector/goToURLAction.tsx b/client/packages/lowcoder/src/comps/controls/actionSelector/goToURLAction.tsx index aab608c6c..462cd6213 100644 --- a/client/packages/lowcoder/src/comps/controls/actionSelector/goToURLAction.tsx +++ b/client/packages/lowcoder/src/comps/controls/actionSelector/goToURLAction.tsx @@ -1,35 +1,65 @@ -import { StringControl } from "comps/controls/codeControl"; -import { BoolControl } from "comps/controls/boolControl"; import { MultiCompBuilder } from "comps/generators/multi"; +import { withDefault } from "comps/generators/simpleGenerators"; import { BranchDiv } from "lowcoder-design"; +import { KeyValue } from "types/common"; +import { BoolControl } from "comps/controls/boolControl"; +import { StringControl } from "comps/controls/codeControl"; +import { keyValueListControl } from "../keyValueControl"; +import { keyValueListToSearchStr } from "../../../util/appUtils"; import { trans } from "i18n"; -export const GoToURLAction = (function () { - const childrenMap = { - url: StringControl, - inNewTab: BoolControl, +const childrenMap = { + url: StringControl, + query: withDefault(keyValueListControl(false, [], "string"), [ + { key: "", value: "" }, + ]), + hash: withDefault(keyValueListControl(false, [], "string"), [ + { key: "", value: "" }, + ]), + inNewTab: BoolControl, +}; + +export const GoToURLAction = new MultiCompBuilder(childrenMap, (props) => { + return () => { + const queryParams = keyValueListToSearchStr( + props.query.map((i) => i.getView() as KeyValue) + ); + const hashParams = keyValueListToSearchStr( + props.hash.map((i) => i.getView() as KeyValue) + ); + const urlWithParams = `${props.url}${queryParams ? `?${queryParams}` : ""}${hashParams ? `#${hashParams}` : ""}`; + + window.open(urlWithParams, props.inNewTab ? "_blank" : "_self"); }; - return new MultiCompBuilder(childrenMap, (props) => { - return () => { - window.open(props.url, props.inNewTab ? "_blank" : "_self"); - }; +}) + .setPropertyViewFn((children) => { + return ( + <> + + {children.url.propertyView({ + label: "URL", + layout: "vertical", + })} + + + {children.query.propertyView({ + label: trans("eventHandler.queryParams"), + layout: "vertical", + })} + + + {children.hash.propertyView({ + label: trans("eventHandler.hashParams"), + layout: "vertical", + })} + + + {children.inNewTab.propertyView({ + label: trans("eventHandler.openInNewTab"), + layout: "vertical", + })} + + + ); }) - .setPropertyViewFn((children) => { - return ( - <> - - {children.url.propertyView({ - label: "URL", - layout: "vertical", - })} - - - {children.inNewTab.propertyView({ - label: trans("eventHandler.openInNewTab"), - })} - - - ); - }) - .build(); -})(); + .build();