Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 5692cc6

Browse files
Merge pull request #602 from jreyesr/feat/issue-412
Add Select (dropdown) column type to tables
2 parents 4dbd74d + 8f6ea6f commit 5692cc6

File tree

3 files changed

+91
-0
lines changed

3 files changed

+91
-0
lines changed

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { ProgressComp } from "./columnTypeComps/columnProgressComp";
1414
import { RatingComp } from "./columnTypeComps/columnRatingComp";
1515
import { BadgeStatusComp } from "./columnTypeComps/columnStatusComp";
1616
import { ColumnTagsComp } from "./columnTypeComps/columnTagsComp";
17+
import { ColumnSelectComp } from "./columnTypeComps/columnSelectComp";
1718
import { SimpleTextComp } from "./columnTypeComps/simpleTextComp";
1819
import { ColumnNumberComp } from "./columnTypeComps/ColumnNumberComp";
1920

@@ -38,6 +39,10 @@ const actionOptions = [
3839
label: trans("table.tag"),
3940
value: "tag",
4041
},
42+
{
43+
label: trans("table.select"),
44+
value: "select",
45+
},
4146
{
4247
label: trans("table.badgeStatus"),
4348
value: "badgeStatus",
@@ -83,6 +88,7 @@ export const ColumnTypeCompMap = {
8388
badgeStatus: BadgeStatusComp,
8489
link: LinkComp,
8590
tag: ColumnTagsComp,
91+
select: ColumnSelectComp,
8692
links: ColumnLinksComp,
8793
image: ImageComp,
8894
markdown: ColumnMarkdownComp,
Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import { useState } from "react";
2+
3+
import { SelectUIView } from "comps/comps/selectInputComp/selectCompConstants";
4+
import { SelectOptionControl } from "comps/controls/optionsControl";
5+
import { StringControl } from "comps/controls/codeControl";
6+
7+
import { trans } from "i18n";
8+
import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder";
9+
import { ColumnValueTooltip } from "../simpleColumnTypeComps";
10+
11+
const childrenMap = {
12+
text: StringControl,
13+
options: SelectOptionControl,
14+
};
15+
16+
let options: any[] = []
17+
const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string, string> = (props) => props.text;
18+
19+
type SelectEditProps = {
20+
initialValue: string;
21+
onChange: (value: string) => void;
22+
onChangeEnd: () => void;
23+
options: any[];
24+
};
25+
26+
const SelectEdit = (props: SelectEditProps) => {
27+
const [currentValue, setCurrentValue] = useState(props.initialValue);
28+
29+
return (
30+
<SelectUIView
31+
value={currentValue}
32+
options={options}
33+
onChange={(val) => {
34+
props.onChange(val);
35+
setCurrentValue(val)
36+
}}
37+
onEvent={async (eventName)=>{
38+
if(eventName==="blur"){
39+
props.onChangeEnd()
40+
}
41+
return []
42+
}}
43+
// @ts-ignore
44+
style={{}}
45+
/>
46+
);
47+
};
48+
49+
50+
export const ColumnSelectComp = (function () {
51+
return new ColumnTypeCompBuilder(
52+
childrenMap,
53+
(props, dispatch) => {
54+
options = props.options;
55+
const value = props.changeValue ?? getBaseValue(props, dispatch)
56+
return props.options.find(x => x.value === value)?.label;
57+
},
58+
(nodeValue) => nodeValue.text.value,
59+
getBaseValue,
60+
)
61+
.setEditViewFn((props) => {
62+
return (
63+
<SelectEdit
64+
initialValue={props.value}
65+
options={options}
66+
onChange={props.onChange}
67+
onChangeEnd={props.onChangeEnd}
68+
/>
69+
)})
70+
.setPropertyViewFn((children) => {
71+
return (
72+
<>
73+
{children.text.propertyView({
74+
label: trans("table.columnValue"),
75+
tooltip: ColumnValueTooltip,
76+
})}
77+
{children.options.propertyView({
78+
title: trans("optionsControl.optionList"),
79+
})}
80+
</>
81+
);
82+
})
83+
.build();
84+
})();

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1245,6 +1245,7 @@ export const en = {
12451245
"link": "Link",
12461246
"links": "Links",
12471247
"tag": "Tag",
1248+
"select": "Select",
12481249
"date": "Date",
12491250
"dateTime": "Date Time",
12501251
"badgeStatus": "Status",

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /