Skip to content

Commit fa05a3e

Browse files
author
FalkWolsky
committed
Avatars Column Type
1 parent a5290f7 commit fa05a3e

File tree

4 files changed

+188
-1
lines changed

4 files changed

+188
-1
lines changed

‎client/packages/lowcoder/src/comps/comps/avatarGroup.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { CompAction, RecordConstructorToView, changeChildAction } from "lowcoder-core";
22
import { styleControl } from "comps/controls/styleControl";
3-
import { QRCodeStyle, QRCodeStyleType, avatarGroupStyle, AvatarGroupStyleType } from "comps/controls/styleControlConstants";
3+
import { avatarGroupStyle, AvatarGroupStyleType } from "comps/controls/styleControlConstants";
44
import { UICompBuilder } from "comps/generators/uiCompBuilder";
55
import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
66
import { AlignCenter, AlignLeft, AlignRight, Section, sectionNames } from "lowcoder-design";

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

+7
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,13 @@ import { ColumnSelectComp } from "./columnTypeComps/columnSelectComp";
1818
import { SimpleTextComp } from "./columnTypeComps/simpleTextComp";
1919
import { ColumnNumberComp } from "./columnTypeComps/ColumnNumberComp";
2020

21+
import { ColumnAvatarsComp } from "./columnTypeComps/columnAvatarsComp";
22+
2123
const actionOptions = [
24+
{
25+
label: trans("table.avatars"),
26+
value: "avatars",
27+
},
2228
{
2329
label: trans("table.text"),
2430
value: "text",
@@ -82,6 +88,7 @@ const actionOptions = [
8288
] as const;
8389

8490
export const ColumnTypeCompMap = {
91+
avatars: ColumnAvatarsComp,
8592
text: SimpleTextComp,
8693
number: ColumnNumberComp,
8794
button: ButtonComp,

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

+174
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
import { ColumnTypeCompBuilder } from "comps/comps/tableComp/column/columnTypeCompBuilder";
2+
import { StringControl } from "comps/controls/codeControl";
3+
import { MultiCompBuilder, stateComp, withDefault } from "comps/generators";
4+
import { trans } from "i18n";
5+
import styled from "styled-components";
6+
import { LightActiveTextColor, PrimaryColor } from "constants/style";
7+
import { styleControl } from "comps/controls/styleControl";
8+
import { avatarGroupStyle, AvatarGroupStyleType } from "comps/controls/styleControlConstants";
9+
import { AlignCenter, AlignLeft, AlignRight } from "lowcoder-design";
10+
import { NumberControl } from "comps/controls/codeControl";
11+
import { Avatar, Tooltip } from "antd";
12+
import { clickEvent, eventHandlerControl, refreshEvent } from "comps/controls/eventHandlerControl";
13+
import { ReactElement } from "react";
14+
import { IconControl } from "comps/controls/iconControl";
15+
import { ColorControl } from "comps/controls/colorControl";
16+
import { optionsControl } from "comps/controls/optionsControl";
17+
import { BoolControl } from "comps/controls/boolControl";
18+
import { dropdownControl } from "comps/controls/dropdownControl";
19+
import { JSONObject } from "util/jsonTypes";
20+
import { Dispatch } from 'redux';
21+
import { changeChildAction } from "lowcoder-core";
22+
23+
const MenuLinkWrapper = styled.div`
24+
> a {
25+
color: ${PrimaryColor} !important;
26+
27+
&:hover {
28+
color: ${LightActiveTextColor} !important;
29+
}
30+
}
31+
`;
32+
33+
const MacaroneList = [
34+
'#fde68a',
35+
'#eecff3',
36+
'#a7f3d0',
37+
'#bfdbfe',
38+
'#bfdbfe',
39+
'#c7d2fe',
40+
'#fecaca',
41+
'#fcd6bb',
42+
]
43+
44+
const Container = styled.div<{ $style: AvatarGroupStyleType | undefined, alignment: string }>`
45+
height: 100%;
46+
width: 100%;
47+
display: flex;
48+
align-items: center;
49+
justify-content: ${props => props.alignment};
50+
cursor: pointer;
51+
`;
52+
53+
const DropdownOption = new MultiCompBuilder(
54+
{
55+
src: StringControl,
56+
AvatarIcon: IconControl,
57+
label: StringControl,
58+
color: ColorControl,
59+
backgroundColor: ColorControl,
60+
Tooltip: StringControl,
61+
},
62+
(props) => props
63+
)
64+
.setPropertyViewFn((children) => {
65+
return (
66+
<>
67+
{children.src.propertyView({ label: trans("avatarComp.src"), placeholder: "", tooltip: trans("avatarComp.avatarCompTooltip") })}
68+
{children.label.propertyView({label: trans("avatarComp.title"), tooltip: trans("avatarComp.avatarCompTooltip"),
69+
})}
70+
{children.AvatarIcon.propertyView({
71+
label: trans("avatarComp.icon"),
72+
IconType: "All",
73+
tooltip: trans("avatarComp.avatarCompTooltip"),
74+
})}
75+
{children.color.propertyView({ label: trans("style.fill") })}
76+
{children.backgroundColor.propertyView({ label: trans("style.background") })}
77+
{children.Tooltip.propertyView({ label: trans("badge.tooltip") })}
78+
</>
79+
);
80+
})
81+
.build();
82+
83+
const EventOptions = [clickEvent, refreshEvent] as const;
84+
85+
export const alignOptions = [
86+
{ label: <AlignLeft />, value: "flex-start" },
87+
{ label: <AlignCenter />, value: "center" },
88+
{ label: <AlignRight />, value: "flex-end" },
89+
] as const;
90+
91+
// props.dispatch(changeChildAction("currentAvatar", item as JSONObject, false));
92+
93+
export const ColumnAvatarsComp = (function () {
94+
const childrenMap = {
95+
style: styleControl(avatarGroupStyle),
96+
maxCount: withDefault(NumberControl, 3),
97+
avatarSize: withDefault(NumberControl, 40),
98+
alignment: dropdownControl(alignOptions, "center"),
99+
autoColor: BoolControl.DEFAULT_TRUE,
100+
onEvent: eventHandlerControl(EventOptions),
101+
currentAvatar: stateComp<JSONObject>({}),
102+
avatars: optionsControl(DropdownOption, {
103+
initOptions: [
104+
{ src: "https://api.dicebear.com/7.x/miniavs/svg?seed=1", label: String.fromCharCode(65 + Math.ceil(Math.random() * 25)) },
105+
{ AvatarIcon: "/icon:antd/startwotone" },
106+
{ label: String.fromCharCode(65 + Math.ceil(Math.random() * 25)) },
107+
{ label: String.fromCharCode(65 + Math.ceil(Math.random() * 25)) },
108+
],
109+
})
110+
};
111+
return new ColumnTypeCompBuilder(
112+
childrenMap,
113+
(props) => {
114+
return (
115+
<Container
116+
$style={props.style}
117+
alignment={props.alignment}
118+
>
119+
{
120+
<Avatar.Group maxCount={props.maxCount} size={props.avatarSize}>
121+
{
122+
props.avatars.map((item, index) => {
123+
return (
124+
<Tooltip title={item.Tooltip}>
125+
<Avatar
126+
src={item.src ?? undefined}
127+
icon={(item.AvatarIcon as ReactElement)?.props.value === '' || item.label.trim() !== '' ? undefined : item.AvatarIcon}
128+
style={{
129+
color: item.color ? item.color : (props.style.fill !== '#FFFFFF' ? props.style.fill : '#FFFFFF'),
130+
backgroundColor: item.backgroundColor ? item.backgroundColor : (props.autoColor ? MacaroneList[index % MacaroneList.length] : props.style.background),
131+
}}
132+
size={props.avatarSize}
133+
onClick={() => {
134+
props.onEvent("click")
135+
// dispatch(changeChildAction("currentAvatar", item as JSONObject, false));
136+
}}
137+
>
138+
{item.label}
139+
</Avatar>
140+
</Tooltip>
141+
)
142+
})
143+
}
144+
</Avatar.Group>
145+
}
146+
</Container>
147+
)
148+
},
149+
() => ""
150+
)
151+
.setPropertyViewFn((children) => (
152+
<>
153+
{children.avatars.propertyView({})}
154+
{children.maxCount.propertyView({
155+
label: trans("avatarGroup.maxCount")
156+
})}
157+
{children.avatarSize.propertyView({
158+
label: trans("avatarGroup.avatarSize")
159+
})}
160+
{children.autoColor.propertyView({
161+
label: trans("avatarGroup.autoColor")
162+
})}
163+
{children.alignment.propertyView({
164+
label: trans("avatarGroup.alignment"),
165+
radioButton: true,
166+
})}
167+
{children.avatars.propertyView({
168+
newOptionLabel: trans("table.option"),
169+
title: trans("table.optionList"),
170+
})}
171+
</>
172+
))
173+
.build();
174+
})();

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

+6
Original file line numberDiff line numberDiff line change
@@ -1691,6 +1691,11 @@ export const en = {
16911691
"responsive" : "Responsive",
16921692
"selectable" : "Selectable",
16931693
},
1694+
"coloredTagOptionControl" : {
1695+
"tag" : "Tag Text",
1696+
"color" : "Color",
1697+
"icon" : "Icon",
1698+
},
16941699
"radio": {
16951700
"options": "Options",
16961701
"horizontal": "Horizontal",
@@ -1869,6 +1874,7 @@ export const en = {
18691874
"float": "Float",
18701875
"prefix": "Prefix",
18711876
"suffix": "Suffix",
1877+
"avatars": "Avatars",
18721878
"text": "Text",
18731879
"number": "Number",
18741880
"link": "Link",

0 commit comments

Comments
 (0)