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

Commit54b6d24

Browse files
Merge branch 'dev' into hide_column_layout
2 parentsf7ba1b8 +2dedc8f commit54b6d24

File tree

2 files changed

+154
-14
lines changed

2 files changed

+154
-14
lines changed

‎client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx

Lines changed: 87 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -58,10 +58,58 @@ const TagsControl = codeControl<Array<string> | string>(
5858

5959
functiongetTagColor(tagText :any,tagOptions:any[]){
6060
constfoundOption=tagOptions.find((option:{label:any;})=>option.label===tagText);
61-
returnfoundOption ?foundOption.color :(function(){
62-
constindex=Math.abs(hashToNum(tagText))%colors.length;
63-
returncolors[index];
64-
})();
61+
if(foundOption){
62+
if(foundOption.colorType==="preset"){
63+
returnfoundOption.presetColor;
64+
}elseif(foundOption.colorType==="custom"){
65+
returnundefined;// For custom colors, we'll use style instead
66+
}
67+
// Backward compatibility - if no colorType specified, assume it's the old color field
68+
returnfoundOption.color;
69+
}
70+
// Default fallback
71+
constindex=Math.abs(hashToNum(tagText))%colors.length;
72+
returncolors[index];
73+
}
74+
75+
functiongetTagStyle(tagText:any,tagOptions:any[]){
76+
constfoundOption=tagOptions.find((option:{label:any;})=>option.label===tagText);
77+
if(foundOption){
78+
conststyle:any={};
79+
80+
// Handle color styling
81+
if(foundOption.colorType==="custom"){
82+
style.backgroundColor=foundOption.color;
83+
style.color=foundOption.textColor;
84+
style.border=`1px solid${foundOption.color}`;
85+
}
86+
87+
// Add border styling if specified
88+
if(foundOption.border){
89+
style.borderColor=foundOption.border;
90+
if(!foundOption.colorType||foundOption.colorType!=="custom"){
91+
style.border=`1px solid${foundOption.border}`;
92+
}
93+
}
94+
95+
// Add border radius if specified
96+
if(foundOption.radius){
97+
style.borderRadius=foundOption.radius;
98+
}
99+
100+
// Add margin if specified
101+
if(foundOption.margin){
102+
style.margin=foundOption.margin;
103+
}
104+
105+
// Add padding if specified
106+
if(foundOption.padding){
107+
style.padding=foundOption.padding;
108+
}
109+
110+
returnstyle;
111+
}
112+
return{};
65113
}
66114

67115
functiongetTagIcon(tagText:any,tagOptions:any[]){
@@ -286,13 +334,32 @@ const TagEdit = React.memo((props: TagEditPropsType) => {
286334
{tags.map((value,index)=>(
287335
<CustomSelect.Optionvalue={value}key={index}>
288336
{value.split(",")[1] ?(
289-
value.split(",").map((item,i)=>(
290-
<Tagcolor={getTagColor(item,memoizedTagOptions)}icon={getTagIcon(item,memoizedTagOptions)}key={i}style={{marginRight:"8px"}}>
291-
{item}
292-
</Tag>
293-
))
337+
value.split(",").map((item,i)=>{
338+
consttagColor=getTagColor(item,memoizedTagOptions);
339+
consttagIcon=getTagIcon(item,memoizedTagOptions);
340+
consttagStyle=getTagStyle(item,memoizedTagOptions);
341+
342+
return(
343+
<Tag
344+
color={tagColor}
345+
icon={tagIcon}
346+
key={i}
347+
style={{
348+
marginRight:tagStyle.margin ?undefined :"8px",
349+
...tagStyle
350+
}}
351+
>
352+
{item}
353+
</Tag>
354+
);
355+
})
294356
) :(
295-
<Tagcolor={getTagColor(value,memoizedTagOptions)}icon={getTagIcon(value,memoizedTagOptions)}key={index}>
357+
<Tag
358+
color={getTagColor(value,memoizedTagOptions)}
359+
icon={getTagIcon(value,memoizedTagOptions)}
360+
key={index}
361+
style={getTagStyle(value,memoizedTagOptions)}
362+
>
296363
{value}
297364
</Tag>
298365
)}
@@ -316,9 +383,18 @@ export const ColumnTagsComp = (function () {
316383
constview=tags.map((tag,index)=>{
317384
// The actual eval value is of type number or boolean
318385
consttagText=String(tag);
386+
consttagColor=getTagColor(tagText,tagOptions);
387+
consttagIcon=getTagIcon(tagText,tagOptions);
388+
consttagStyle=getTagStyle(tagText,tagOptions);
389+
319390
return(
320391
<divkey={`${tag.split(' ').join('_')}-${index}`}>
321-
<TagStyledcolor={getTagColor(tagText,tagOptions)}icon={getTagIcon(tagText,tagOptions)}key={index}>
392+
<TagStyled
393+
color={tagColor}
394+
icon={tagIcon}
395+
key={index}
396+
style={tagStyle}
397+
>
322398
{tagText}
323399
</TagStyled>
324400
</div>

‎client/packages/lowcoder/src/comps/controls/optionsControl.tsx

Lines changed: 67 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,26 @@ import { ColorControl } from "./colorControl";
4242
import{StringStateControl}from"./codeStateControl";
4343
import{reduceInContext}from"../utils/reduceContext";
4444

45+
// Tag preset color options
46+
constTAG_PRESET_COLORS=[
47+
{label:"Magenta",value:"magenta"},
48+
{label:"Red",value:"red"},
49+
{label:"Volcano",value:"volcano"},
50+
{label:"Orange",value:"orange"},
51+
{label:"Gold",value:"gold"},
52+
{label:"Lime",value:"lime"},
53+
{label:"Green",value:"green"},
54+
{label:"Cyan",value:"cyan"},
55+
{label:"Blue",value:"blue"},
56+
{label:"Geek Blue",value:"geekblue"},
57+
{label:"Purple",value:"purple"},
58+
{label:"Success",value:"success"},
59+
{label:"Processing",value:"processing"},
60+
{label:"Error",value:"error"},
61+
{label:"Warning",value:"warning"},
62+
{label:"Default",value:"default"},
63+
]asconst;
64+
4565
constOptionTypes=[
4666
{
4767
label:trans("prop.manual"),
@@ -735,24 +755,68 @@ let ColoredTagOption = new MultiCompBuilder(
735755
{
736756
label:StringControl,
737757
icon:IconControl,
738-
color:withDefault(ColorControl,""),
758+
colorType:withDefault(dropdownControl([
759+
{label:"Preset",value:"preset"},
760+
{label:"Custom",value:"custom"},
761+
]asconst,"preset"),"preset"),
762+
presetColor:withDefault(dropdownControl(TAG_PRESET_COLORS,"blue"),"blue"),
763+
color:withDefault(ColorControl,"#1890ff"),
764+
textColor:withDefault(ColorControl,"#ffffff"),
765+
border:withDefault(ColorControl,""),
766+
radius:withDefault(RadiusControl,""),
767+
margin:withDefault(StringControl,""),
768+
padding:withDefault(StringControl,""),
739769
},
740770
(props)=>props
741771
).build();
742772

743773
ColoredTagOption=classextendsColoredTagOptionimplementsOptionCompProperty{
744774
propertyView(param:{autoMap?:boolean}){
775+
constcolorType=this.children.colorType.getView();
745776
return(
746777
<>
747778
{this.children.label.propertyView({label:trans("coloredTagOptionControl.tag")})}
748779
{this.children.icon.propertyView({label:trans("coloredTagOptionControl.icon")})}
749-
{this.children.color.propertyView({label:trans("coloredTagOptionControl.color")})}
780+
{this.children.colorType.propertyView({
781+
label:"Color Type",
782+
radioButton:true
783+
})}
784+
{colorType==="preset"&&this.children.presetColor.propertyView({
785+
label:"Preset Color"
786+
})}
787+
{colorType==="custom"&&(
788+
<>
789+
{this.children.color.propertyView({label:trans("coloredTagOptionControl.color")})}
790+
{this.children.textColor.propertyView({label:"Text Color"})}
791+
</>
792+
)}
793+
{this.children.border.propertyView({
794+
label:trans('style.border')
795+
})}
796+
{this.children.radius.propertyView({
797+
label:trans('style.borderRadius'),
798+
preInputNode:<StyledIconas={IconRadius}title=""/>,
799+
placeholder:'3px',
800+
})}
801+
{this.children.margin.propertyView({
802+
label:trans('style.margin'),
803+
preInputNode:<StyledIconas={ExpandIcon}title=""/>,
804+
placeholder:'3px',
805+
})}
806+
{this.children.padding.propertyView({
807+
label:trans('style.padding'),
808+
preInputNode:<StyledIconas={CompressIcon}title=""/>,
809+
placeholder:'3px',
810+
})}
750811
</>
751812
);
752813
}
753814
};
754815

755816
exportconstColoredTagOptionControl=optionsControl(ColoredTagOption,{
756-
initOptions:[{label:"Tag1",icon:"/icon:solid/tag",color:"#f50"},{label:"Tag2",icon:"/icon:solid/tag",color:"#2db7f5"}],
817+
initOptions:[
818+
{label:"Tag1",icon:"/icon:solid/tag",colorType:"preset",presetColor:"blue"},
819+
{label:"Tag2",icon:"/icon:solid/tag",colorType:"preset",presetColor:"green"}
820+
],
757821
uniqField:"label",
758822
});

0 commit comments

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