Skip to content

Commit 54b6d24

Browse files
raheeliftikhar5raheeliftikhar5
authored
Merge branch 'dev' into hide_column_layout
2 parents f7ba1b8 + 2dedc8f commit 54b6d24

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
function getTagColor(tagText : any, tagOptions: any[]) {
6060
const foundOption = tagOptions.find((option: { label: any; }) => option.label === tagText);
61-
return foundOption ? foundOption.color : (function() {
62-
const index = Math.abs(hashToNum(tagText)) % colors.length;
63-
return colors[index];
64-
})();
61+
if (foundOption) {
62+
if (foundOption.colorType === "preset") {
63+
return foundOption.presetColor;
64+
} else if (foundOption.colorType === "custom") {
65+
return undefined; // For custom colors, we'll use style instead
66+
}
67+
// Backward compatibility - if no colorType specified, assume it's the old color field
68+
return foundOption.color;
69+
}
70+
// Default fallback
71+
const index = Math.abs(hashToNum(tagText)) % colors.length;
72+
return colors[index];
73+
}
74+
75+
function getTagStyle(tagText: any, tagOptions: any[]) {
76+
const foundOption = tagOptions.find((option: { label: any; }) => option.label === tagText);
77+
if (foundOption) {
78+
const style: 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+
return style;
111+
}
112+
return {};
65113
}
66114

67115
function getTagIcon(tagText: any, tagOptions: any[]) {
@@ -286,13 +334,32 @@ const TagEdit = React.memo((props: TagEditPropsType) => {
286334
{tags.map((value, index) => (
287335
<CustomSelect.Option value={value} key={index}>
288336
{value.split(",")[1] ? (
289-
value.split(",").map((item, i) => (
290-
<Tag color={getTagColor(item, memoizedTagOptions)} icon={getTagIcon(item, memoizedTagOptions)} key={i} style={{ marginRight: "8px" }}>
291-
{item}
292-
</Tag>
293-
))
337+
value.split(",").map((item, i) => {
338+
const tagColor = getTagColor(item, memoizedTagOptions);
339+
const tagIcon = getTagIcon(item, memoizedTagOptions);
340+
const tagStyle = 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-
<Tag color={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
const view = tags.map((tag, index) => {
317384
// The actual eval value is of type number or boolean
318385
const tagText = String(tag);
386+
const tagColor = getTagColor(tagText, tagOptions);
387+
const tagIcon = getTagIcon(tagText, tagOptions);
388+
const tagStyle = getTagStyle(tagText, tagOptions);
389+
319390
return (
320391
<div key={`${tag.split(' ').join('_')}-${index}`}>
321-
<TagStyled color={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+
const TAG_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+
] as const;
64+
4565
const OptionTypes = [
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+
] as const, "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 = class extends ColoredTagOption implements OptionCompProperty {
744774
propertyView(param: { autoMap?: boolean }) {
775+
const colorType = 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: <StyledIcon as={IconRadius} title="" />,
799+
placeholder: '3px',
800+
})}
801+
{this.children.margin.propertyView({
802+
label: trans('style.margin'),
803+
preInputNode: <StyledIcon as={ExpandIcon} title="" />,
804+
placeholder: '3px',
805+
})}
806+
{this.children.padding.propertyView({
807+
label: trans('style.padding'),
808+
preInputNode: <StyledIcon as={CompressIcon} title="" />,
809+
placeholder: '3px',
810+
})}
750811
</>
751812
);
752813
}
753814
};
754815

755816
export const ColoredTagOptionControl = 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)