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

Commit2dedc8f

Browse files
Merge pull request#1749 from iamfaran/feat/1578-tags
[Feat]:#1578 Add Tags Presets and custom margin paddings borders
2 parentsa00e634 +45bdd9b commit2dedc8f

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
@@ -41,6 +41,26 @@ import { ColorControl } from "./colorControl";
4141
import{StringStateControl}from"./codeStateControl";
4242
import{reduceInContext}from"../utils/reduceContext";
4343

44+
// Tag preset color options
45+
constTAG_PRESET_COLORS=[
46+
{label:"Magenta",value:"magenta"},
47+
{label:"Red",value:"red"},
48+
{label:"Volcano",value:"volcano"},
49+
{label:"Orange",value:"orange"},
50+
{label:"Gold",value:"gold"},
51+
{label:"Lime",value:"lime"},
52+
{label:"Green",value:"green"},
53+
{label:"Cyan",value:"cyan"},
54+
{label:"Blue",value:"blue"},
55+
{label:"Geek Blue",value:"geekblue"},
56+
{label:"Purple",value:"purple"},
57+
{label:"Success",value:"success"},
58+
{label:"Processing",value:"processing"},
59+
{label:"Error",value:"error"},
60+
{label:"Warning",value:"warning"},
61+
{label:"Default",value:"default"},
62+
]asconst;
63+
4464
constOptionTypes=[
4565
{
4666
label:trans("prop.manual"),
@@ -729,24 +749,68 @@ let ColoredTagOption = new MultiCompBuilder(
729749
{
730750
label:StringControl,
731751
icon:IconControl,
732-
color:withDefault(ColorControl,""),
752+
colorType:withDefault(dropdownControl([
753+
{label:"Preset",value:"preset"},
754+
{label:"Custom",value:"custom"},
755+
]asconst,"preset"),"preset"),
756+
presetColor:withDefault(dropdownControl(TAG_PRESET_COLORS,"blue"),"blue"),
757+
color:withDefault(ColorControl,"#1890ff"),
758+
textColor:withDefault(ColorControl,"#ffffff"),
759+
border:withDefault(ColorControl,""),
760+
radius:withDefault(RadiusControl,""),
761+
margin:withDefault(StringControl,""),
762+
padding:withDefault(StringControl,""),
733763
},
734764
(props)=>props
735765
).build();
736766

737767
ColoredTagOption=classextendsColoredTagOptionimplementsOptionCompProperty{
738768
propertyView(param:{autoMap?:boolean}){
769+
constcolorType=this.children.colorType.getView();
739770
return(
740771
<>
741772
{this.children.label.propertyView({label:trans("coloredTagOptionControl.tag")})}
742773
{this.children.icon.propertyView({label:trans("coloredTagOptionControl.icon")})}
743-
{this.children.color.propertyView({label:trans("coloredTagOptionControl.color")})}
774+
{this.children.colorType.propertyView({
775+
label:"Color Type",
776+
radioButton:true
777+
})}
778+
{colorType==="preset"&&this.children.presetColor.propertyView({
779+
label:"Preset Color"
780+
})}
781+
{colorType==="custom"&&(
782+
<>
783+
{this.children.color.propertyView({label:trans("coloredTagOptionControl.color")})}
784+
{this.children.textColor.propertyView({label:"Text Color"})}
785+
</>
786+
)}
787+
{this.children.border.propertyView({
788+
label:trans('style.border')
789+
})}
790+
{this.children.radius.propertyView({
791+
label:trans('style.borderRadius'),
792+
preInputNode:<StyledIconas={IconRadius}title=""/>,
793+
placeholder:'3px',
794+
})}
795+
{this.children.margin.propertyView({
796+
label:trans('style.margin'),
797+
preInputNode:<StyledIconas={ExpandIcon}title=""/>,
798+
placeholder:'3px',
799+
})}
800+
{this.children.padding.propertyView({
801+
label:trans('style.padding'),
802+
preInputNode:<StyledIconas={CompressIcon}title=""/>,
803+
placeholder:'3px',
804+
})}
744805
</>
745806
);
746807
}
747808
};
748809

749810
exportconstColoredTagOptionControl=optionsControl(ColoredTagOption,{
750-
initOptions:[{label:"Tag1",icon:"/icon:solid/tag",color:"#f50"},{label:"Tag2",icon:"/icon:solid/tag",color:"#2db7f5"}],
811+
initOptions:[
812+
{label:"Tag1",icon:"/icon:solid/tag",colorType:"preset",presetColor:"blue"},
813+
{label:"Tag2",icon:"/icon:solid/tag",colorType:"preset",presetColor:"green"}
814+
],
751815
uniqField:"label",
752816
});

0 commit comments

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