Content-Length: 7960 | pFad | http://github.com/lowcoder-org/lowcoder/pull/1818.diff

thub.com diff --git a/client/packages/lowcoder/src/comps/comps/tagsComp/tagsCompView.tsx b/client/packages/lowcoder/src/comps/comps/tagsComp/tagsCompView.tsx new file mode 100644 index 000000000..9979c5a1b --- /dev/null +++ b/client/packages/lowcoder/src/comps/comps/tagsComp/tagsCompView.tsx @@ -0,0 +1,92 @@ +import { AnimationStyle, BoolCodeControl, ButtonEventHandlerControl, CommonNameConfig, DropdownOptionControl, IconControl, LinkStyle, NameConfig, NameConfigDisabled, RefControl, Section, SelectOptionControl, StringControl, TabsOptionControl, TagsOptionControl, UICompBuilder, blurMethod, clickMethod, focusWithOptions, migrateOldData, refMethods, sectionNames, stringExposingStateControl, styleControl, withDefault, withExposingConfigs } from "@lowcoder-ee/index.sdk"; +import React from "react"; +import { trans } from "i18n"; +import { buttonRefMethods } from "../buttonComp/buttonCompConstants"; +import { Tag } from "antd"; +import { autoCompleteRefMethods } from "../autoCompleteComp/autoCompleteConstants"; + + +// const TagsCompView = (function () { +// // const childrenMap = { +// // text: withDefault(StringControl, trans("link.link")), +// // onEvent: ButtonEventHandlerControl, +// // disabled: BoolCodeControl, +// // loading: BoolCodeControl, + +// // // style: migrateOldData(styleControl(LinkStyle, 'style')), +// // animationStyle: styleControl(AnimationStyle, 'animationStyle'), +// // prefixIcon: IconControl, +// // suffixIcon: IconControl, +// // viewRef: RefControl, +// // }; + +// const childrenMap = { +// text: stringExposingStateControl("text", "world"), +// // options: TabsOptionControl, +// }; +// return new UICompBuilder(childrenMap, (props) => { +// return ( +// Tag 1 +// ) +// }) +// .setPropertyViewFn((children) => { +// return( +//

+// {/* {children.options.propertyView({})} */} +// {children.text.propertyView({ label: trans("text") })} +//

+// ) +// }) +// .build(); +// })(); + +const multiTags = (function () { + const childrenMap = { + text: stringExposingStateControl("text", "world"), + options: TagsOptionControl, + }; + + return new UICompBuilder(childrenMap, (props) => { + const text = props.text.value; + console.log(props.options) + return ( + <> + {props.options.map(tag => ( + {tag.label} + ))} + + ); + }) + .setPropertyViewFn((children: any) => { + return ( +

+ {children.options.propertyView({})} + {children.text.propertyView({ label: "Text" })} +

+ ) + }) + .build(); +})() + + +// const childrenMap = { +// text: stringExposingStateControl("text", "world"), +// options: TagsOptionControl, +// }; + +// const TagsCompView = new UICompBuilder(childrenMap, (props: any) => { +// const text = props.text.value; +// return

Hello {text}

; +// }) +// .setPropertyViewFn((children: any) => { +// return ( +//

+// {children.options.propertyView({})} +// {children.text.propertyView({ label: "Text" })} +//

+// ) +// }) +// .build(); + +export const MultiTagsComp = withExposingConfigs(multiTags, [new NameConfig("text", "")]); + diff --git a/client/packages/lowcoder/src/comps/controls/optionsControl.tsx b/client/packages/lowcoder/src/comps/controls/optionsControl.tsx index 1d36ec52c..55e6554c6 100644 --- a/client/packages/lowcoder/src/comps/controls/optionsControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/optionsControl.tsx @@ -557,6 +557,7 @@ const TabsOption = new MultiCompBuilder( )) .build(); + export const TabsOptionControl = manualOptionsControl(TabsOption, { initOptions: [ @@ -567,6 +568,37 @@ export const TabsOptionControl = manualOptionsControl(TabsOption, { autoIncField: "id", }); +const TagsOption = new MultiCompBuilder( + { + id: valueComp(-1), + label: StringControl, + icon: IconControl, + iconPosition: withDefault(LeftRightControl, "left"), + hidden: BoolCodeControl, + }, + (props) => props +) + .setPropertyViewFn((children) => ( + <> + {children.label.propertyView({ label: trans("label") })} + {children.icon.propertyView({ label: trans("icon") })} + {children.iconPosition.propertyView({ + label: trans("tabbedContainer.iconPosition"), + radioButton: true, + })} + {hiddenPropertyView(children)} + + )) + .build(); + +export const TagsOptionControl = optionsControl(TagsOption, { + initOptions: [ + { id: 0, label: "Option 1" }, + { id: 1, label: "Option 2" }, + ], + autoIncField: "id", +}); + const StyledIcon = styled.span` margin: 0 4px 0 14px; `; diff --git a/client/packages/lowcoder/src/comps/index.tsx b/client/packages/lowcoder/src/comps/index.tsx index 2395f4f29..00d54a9b2 100644 --- a/client/packages/lowcoder/src/comps/index.tsx +++ b/client/packages/lowcoder/src/comps/index.tsx @@ -193,6 +193,7 @@ import { DrawerComp } from "./hooks/drawerComp"; import { ModalComp } from "./hooks/modalComp"; import { defaultCollapsibleContainerData } from "./comps/containerComp/collapsibleContainerComp"; import { ContainerComp as FloatTextContainerComp } from "./comps/containerComp/textContainerComp"; +import { MultiTagsComp } from "./comps/tagsComp/tagsCompView"; type Registry = { [key in UICompType]?: UICompManifest; @@ -709,6 +710,19 @@ export var uiCompMap: Registry = { }, defaultDataFn: defaultGridData, }, + multiTags: { + name: trans("tags"), + enName: "tags", + description: "Desc of Tags", + categories: ["layout"], + icon: FloatingButtonCompIcon, + keywords: trans("uiComp.floatButtonCompKeywords"), + comp: MultiTagsComp, + layoutInfo: { + w: 9, + h: 5, + }, + }, modal: { name: trans("uiComp.modalCompName"), enName: "Modal", diff --git a/client/packages/lowcoder/src/comps/uiCompRegistry.ts b/client/packages/lowcoder/src/comps/uiCompRegistry.ts index 4c320de47..07f0e54b4 100644 --- a/client/packages/lowcoder/src/comps/uiCompRegistry.ts +++ b/client/packages/lowcoder/src/comps/uiCompRegistry.ts @@ -106,6 +106,7 @@ export type UICompType = | "container" | "pageLayout" // added by Falk Wolsky | "floatTextContainer" + | "multiTags" // Added by Kamal Qureshi | "tabbedContainer" | "modal" | "listView" diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 44f5f4b1d..31750f789 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -45,6 +45,7 @@ export const en = { "accessControl": "Access Control", "copySuccess": "Copied Successfully", "copyError": "Copy Error", + "tags": "Tags", "api": { "publishSuccess": "Published Successfully", diff --git a/client/packages/lowcoder/src/pages/editor/editorConstants.tsx b/client/packages/lowcoder/src/pages/editor/editorConstants.tsx index a931455d4..9087b1e7d 100644 --- a/client/packages/lowcoder/src/pages/editor/editorConstants.tsx +++ b/client/packages/lowcoder/src/pages/editor/editorConstants.tsx @@ -237,6 +237,7 @@ export const CompStateIcon: { step: , table: , text: , + multiTags: , timeline: , toggleButton: , tour: ,

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!