Movatterモバイル変換

[0]ホーム
URL:

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

Commit4cd85cc

Browse files
added dropdown type column in table
1 parent3ef0e4f commit4cd85cc

File tree

4 files changed

+142
-1
lines changed

4 files changed

+142
-1
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
@@ -20,6 +20,7 @@ import { SimpleTextComp } from "./columnTypeComps/simpleTextComp";
2020
import{ColumnNumberComp}from"./columnTypeComps/ColumnNumberComp";
2121

2222
import{ColumnAvatarsComp}from"./columnTypeComps/columnAvatarsComp";
23+
import{ColumnDropdownComp}from"./columnTypeComps/columnDropdownComp";
2324

2425
constactionOptions=[
2526
{
@@ -50,6 +51,10 @@ const actionOptions = [
5051
label:trans("table.select"),
5152
value:"select",
5253
},
54+
{
55+
label:trans("table.dropdown"),
56+
value:"dropdown",
57+
},
5358
{
5459
label:trans("table.badgeStatus"),
5560
value:"badgeStatus",
@@ -101,6 +106,7 @@ export const ColumnTypeCompMap = {
101106
link:LinkComp,
102107
tag:ColumnTagsComp,
103108
select:ColumnSelectComp,
109+
dropdown:ColumnDropdownComp,
104110
links:ColumnLinksComp,
105111
image:ImageComp,
106112
markdown:ColumnMarkdownComp,
Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
import{ReactElement}from"react";
2+
import{DropdownOptionControl}from"comps/controls/optionsControl";
3+
import{StringControl}from"comps/controls/codeControl";
4+
import{trans}from"i18n";
5+
import{ColumnTypeCompBuilder,ColumnTypeViewFn}from"../columnTypeCompBuilder";
6+
importMenufrom"antd/es/menu";
7+
importDropdownfrom"antd/es/dropdown";
8+
import{dropdownControl}from"comps/controls/dropdownControl";
9+
import{IconControl}from"comps/controls/iconControl";
10+
import{withDefault}from"comps/generators";
11+
import{IconWrapper}from"util/bottomResUtils";
12+
import{ButtonTypeOptions}from"../simpleColumnTypeComps";
13+
import{useStyle}from"comps/controls/styleControl";
14+
import{ButtonStyle}from"comps/controls/styleControlConstants";
15+
import{Button100}from"comps/comps/buttonComp/buttonCompConstants";
16+
17+
constchildrenMap={
18+
buttonType:dropdownControl(ButtonTypeOptions,"primary"),
19+
label:withDefault(StringControl,'Menu'),
20+
prefixIcon:IconControl,
21+
suffixIcon:IconControl,
22+
options:DropdownOptionControl,
23+
};
24+
25+
constgetBaseValue:ColumnTypeViewFn<typeofchildrenMap,string,string>=(props)=>props.label;
26+
27+
exportconstColumnDropdownComp=(function(){
28+
returnnewColumnTypeCompBuilder(
29+
childrenMap,
30+
(props)=>{
31+
consthasOptionIcon=props.options.findIndex((option)=>(option.prefixIconasReactElement)?.props.value)>-1;
32+
constitems=props.options
33+
.filter((option)=>!option.hidden)
34+
.map((option,index)=>({
35+
title:option.label,
36+
label:option.label,
37+
key:option.label+" - "+index,
38+
disabled:option.disabled,
39+
icon:hasOptionIcon&&<span>{option.prefixIcon}</span>,
40+
onEvent:option.onEvent,
41+
}));
42+
43+
consthasPrefixIcon=(props.prefixIconasReactElement)?.props.value;
44+
consthasSuffixIcon=(props.suffixIconasReactElement)?.props.value;
45+
constbuttonStyle=useStyle(ButtonStyle);
46+
47+
constmenu=(
48+
<Menu
49+
items={items}
50+
onClick={({ key})=>items.find((o)=>o.key===key)?.onEvent?.("click")}
51+
/>
52+
);
53+
54+
return(
55+
56+
<Dropdown
57+
trigger={["click"]}
58+
placement="bottom"
59+
menu={{items}}
60+
dropdownRender={()=>menu}
61+
>
62+
<Button100
63+
type={props.buttonType}
64+
style={{
65+
display:'flex',
66+
alignItems:'center',
67+
gap:'0',
68+
minWidth:'30px',
69+
width:'auto',
70+
}}
71+
$buttonStyle={
72+
props.buttonType==="primary"
73+
?buttonStyle
74+
:undefined
75+
}
76+
>
77+
{
78+
hasPrefixIcon&&(
79+
<IconWrapperstyle={{
80+
margin:'0px',
81+
marginRight:props.label||hasSuffixIcon ?'3px' :'0x',
82+
}}>
83+
{props.prefixIcon}
84+
</IconWrapper>
85+
)
86+
}
87+
{
88+
props.label||(hasPrefixIcon||hasSuffixIcon ?undefined :" ")// Avoid button disappearing
89+
}
90+
{
91+
hasSuffixIcon&&(
92+
<IconWrapperstyle={{
93+
margin:'0px',
94+
marginLeft:props.label||hasPrefixIcon ?'3px' :'0x',
95+
}}>
96+
{props.suffixIcon}
97+
</IconWrapper>
98+
)
99+
}
100+
</Button100>
101+
</Dropdown>
102+
);
103+
},
104+
(nodeValue)=>nodeValue.label.value,
105+
getBaseValue,
106+
)
107+
.setPropertyViewFn((children)=>{
108+
return(
109+
<>
110+
{children.buttonType.propertyView({
111+
label:trans("table.type"),
112+
radioButton:true,
113+
})}
114+
{children.label.propertyView({
115+
label:trans("text"),
116+
})}
117+
{children.prefixIcon.propertyView({
118+
label:trans("button.prefixIcon"),
119+
})}
120+
{children.suffixIcon.propertyView({
121+
label:trans("button.suffixIcon"),
122+
})}
123+
{children.options.propertyView({
124+
title:trans("optionsControl.optionList"),
125+
})}
126+
</>
127+
);
128+
})
129+
.build();
130+
})();

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { Button100 } from "comps/comps/buttonComp/buttonCompConstants";
1010

1111
exportconstColumnValueTooltip=trans("table.columnValueTooltip");
1212

13-
constButtonTypeOptions=[
13+
exportconstButtonTypeOptions=[
1414
{
1515
label:trans("table.primaryButton"),
1616
value:"primary",
@@ -19,6 +19,10 @@ const ButtonTypeOptions = [
1919
label:trans("table.defaultButton"),
2020
value:"default",
2121
},
22+
{
23+
label:trans("text"),
24+
value:"text",
25+
},
2226
]asconst;
2327

2428
exportconstButtonComp=(function(){

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1896,6 +1896,7 @@ export const en = {
18961896
"links":"Links",
18971897
"tag":"Tag",
18981898
"select":"Select",
1899+
"dropdown":"Dropdown",
18991900
"date":"Date",
19001901
"dateTime":"Date Time",
19011902
"badgeStatus":"Status",

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp