Merge pull request #602 from jreyesr/feat/issue-412

Add Select (dropdown) column type to tables

Author: FalkWolsky

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComp.tsx

@@ -14,6 +14,7 @@ import { ProgressComp } from "./columnTypeComps/columnProgressComp";
 import { RatingComp } from "./columnTypeComps/columnRatingComp";
 import { BadgeStatusComp } from "./columnTypeComps/columnStatusComp";
 import { ColumnTagsComp } from "./columnTypeComps/columnTagsComp";
+import { ColumnSelectComp } from "./columnTypeComps/columnSelectComp";
 import { SimpleTextComp } from "./columnTypeComps/simpleTextComp";
 import { ColumnNumberComp } from "./columnTypeComps/ColumnNumberComp";
 
@@ -38,6 +39,10 @@ const actionOptions = [
     label: trans("table.tag"),
     value: "tag",
   },
+  {
+    label: trans("table.select"),
+    value: "select",
+  },
   {
     label: trans("table.badgeStatus"),
     value: "badgeStatus",
@@ -83,6 +88,7 @@ export const ColumnTypeCompMap = {
   badgeStatus: BadgeStatusComp,
   link: LinkComp,
   tag: ColumnTagsComp,
+  select: ColumnSelectComp,
   links: ColumnLinksComp,
   image: ImageComp,
   markdown: ColumnMarkdownComp,

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSelectComp.tsx

@@ -0,0 +1,84 @@
+import { useState } from "react";
+
+import { SelectUIView } from "comps/comps/selectInputComp/selectCompConstants";
+import { SelectOptionControl } from "comps/controls/optionsControl";
+import { StringControl } from "comps/controls/codeControl";
+
+import { trans } from "i18n";
+import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder";
+import { ColumnValueTooltip } from "../simpleColumnTypeComps";
+
+const childrenMap = {
+  text: StringControl,
+  options: SelectOptionControl,
+};
+
+let options: any[] = []
+const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string, string> = (props) => props.text;
+
+type SelectEditProps = {
+  initialValue: string;
+  onChange: (value: string) => void;
+  onChangeEnd: () => void;
+  options: any[];
+};
+
+const SelectEdit = (props: SelectEditProps) => {
+  const [currentValue, setCurrentValue] = useState(props.initialValue);
+
+  return (
+    <SelectUIView 
+      value={currentValue}
+      options={options}
+      onChange={(val) => {
+        props.onChange(val);
+        setCurrentValue(val)
+      }}
+      onEvent={async (eventName)=>{
+        if(eventName==="blur"){
+          props.onChangeEnd()
+        }
+        return []
+      }}
+      // @ts-ignore
+      style={{}}
+    />
+  );
+};
+
+
+export const ColumnSelectComp = (function () {
+  return new ColumnTypeCompBuilder(
+    childrenMap,
+    (props, dispatch) => {
+      options = props.options;
+      const value = props.changeValue ?? getBaseValue(props, dispatch)
+      return props.options.find(x => x.value === value)?.label;
+    },
+    (nodeValue) => nodeValue.text.value,
+    getBaseValue,
+  )
+    .setEditViewFn((props) => {
+      return (
+        <SelectEdit
+          initialValue={props.value}
+          options={options}
+          onChange={props.onChange}
+          onChangeEnd={props.onChangeEnd}
+        />
+    )})
+    .setPropertyViewFn((children) => {
+      return (
+        <>
+          {children.text.propertyView({
+            label: trans("table.columnValue"),
+            tooltip: ColumnValueTooltip,
+          })}
+          {children.options.propertyView({
+            title: trans("optionsControl.optionList"),
+          })}
+        </>
+      );
+    })
+    .build();
+})();

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -1245,6 +1245,7 @@ export const en = {
     "link": "Link",
     "links": "Links",
     "tag": "Tag",
+    "select": "Select",
     "date": "Date",
     "dateTime": "Date Time",
     "badgeStatus": "Status",