Initialize tags component

Author: kamalqureshi

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<HTMLElement>,
+//     //   };
+
+//     const childrenMap = {
+//         text: stringExposingStateControl("text", "world"),
+//         // options: TabsOptionControl,
+//     };
+//     return new UICompBuilder(childrenMap, (props) => {
+//         return (
+//             <Tag>Tag 1</Tag>
+//         )
+//     })
+//     .setPropertyViewFn((children) => {
+//         return(
+//             <Section name={sectionNames.basic}>
+//                 {/* {children.options.propertyView({})} */}
+//                 {children.text.propertyView({ label: trans("text") })}
+//             </Section>
+//         )
+//     })
+//     .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>{tag.label}</Tag>
+        ))}
+      </>
+      ); 
+  })
+    .setPropertyViewFn((children: any) => {
+      return (
+      <Section name="Basic">
+        {children.options.propertyView({})} 
+        {children.text.propertyView({ label: "Text" })}
+      </Section>
+      )
+    })
+    .build();
+})()
+
+
+// const childrenMap = {
+//   text: stringExposingStateControl("text", "world"),
+//   options: TagsOptionControl,
+// };
+  
+//   const TagsCompView = new UICompBuilder(childrenMap, (props: any) => {
+//     const text = props.text.value;
+//     return <div>Hello {text}</div>;
+//   })
+//     .setPropertyViewFn((children: any) => {
+//       return (
+//       <Section name="Basic">
+//         {children.options.propertyView({})} 
+//         {children.text.propertyView({ label: "Text" })}
+//       </Section>
+//       )
+//     })
+//     .build();
+
+export const MultiTagsComp = withExposingConfigs(multiTags, [new NameConfig("text", "")]);
+

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<number>(-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;
 `;

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",

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"

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",

client/packages/lowcoder/src/pages/editor/editorConstants.tsx

@@ -237,6 +237,7 @@ export const CompStateIcon: {
   step: <MemoizedIcon Icon={StepCompIconSmall} />,
   table: <MemoizedIcon Icon={TableCompIconSmall} />,
   text: <MemoizedIcon Icon={TextCompIconSmall} />,
+  multiTags: <MemoizedIcon Icon={TextCompIconSmall} />, 
   timeline: <MemoizedIcon Icon={TimeLineCompIconSmall} />,
   toggleButton: <MemoizedIcon Icon={ToggleButtonCompIconSmall} />,
   tour: <MemoizedIcon Icon={TourCompIconSmall} />,