Skip to content

Commit f3cb674

Browse files
moushengmousheng
committed
add_icon_component
1 parent 5919277 commit f3cb674

File tree

9 files changed

+210
-0
lines changed

9 files changed

+210
-0
lines changed

‎client/packages/lowcoder-design/src/icons/IconCompIcon.svg

Lines changed: 1 addition & 0 deletions
Loading

‎client/packages/lowcoder-design/src/icons/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -291,3 +291,5 @@ export { ReactComponent as TimeLineIcon } from "icons/icon-timeline-comp.svg"
291291
export { ReactComponent as LottieIcon } from "icons/icon-lottie.svg";
292292
export { ReactComponent as MentionIcon } from "icons/icon-mention-comp.svg";
293293
export { ReactComponent as AutoCompleteCompIcon } from "icons/icon-autocomplete-comp.svg";
294+
295+
export { ReactComponent as IconCompIcon } from "icons/IconCompIcon.svg";

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

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
import { useEffect, useRef, useState } from "react";
2+
import styled, { css } from "styled-components";
3+
import { RecordConstructorToView } from "lowcoder-core";
4+
import { styleControl } from "comps/controls/styleControl";
5+
import _ from "lodash";
6+
import {
7+
IconStyle,
8+
IconStyleType,
9+
heightCalculator,
10+
widthCalculator,
11+
} from "comps/controls/styleControlConstants";
12+
import { UICompBuilder } from "comps/generators/uiCompBuilder";
13+
import { withDefault } from "../generators";
14+
import {
15+
NameConfigHidden,
16+
withExposingConfigs,
17+
} from "comps/generators/withExposing";
18+
import { Section, sectionNames } from "lowcoder-design";
19+
import { hiddenPropertyView } from "comps/utils/propertyUtils";
20+
import { trans } from "i18n";
21+
import { NumberControl } from "comps/controls/codeControl";
22+
import { IconControl } from "comps/controls/iconControl";
23+
import ReactResizeDetector from "react-resize-detector";
24+
import { AutoHeightControl } from "../controls/autoHeightControl";
25+
import {
26+
clickEvent,
27+
eventHandlerControl,
28+
} from "../controls/eventHandlerControl";
29+
30+
const Container = styled.div<{ $style: IconStyleType | undefined }>`
31+
height: 100%;
32+
width: 100%;
33+
display: flex;
34+
align-items: center;
35+
justify-content: center;
36+
svg {
37+
object-fit: contain;
38+
pointer-events: auto;
39+
}
40+
${(props) => props.$style && getStyle(props.$style)}
41+
`;
42+
43+
const getStyle = (style: IconStyleType) => {
44+
return css`
45+
svg {
46+
color: ${style.fill};
47+
}
48+
padding: ${style.padding};
49+
border: 1px solid ${style.border};
50+
border-radius: ${style.radius};
51+
margin: ${style.margin};
52+
max-width: ${widthCalculator(style.margin)};
53+
max-height: ${heightCalculator(style.margin)};
54+
`;
55+
};
56+
57+
const EventOptions = [clickEvent] as const;
58+
59+
const childrenMap = {
60+
style: styleControl(IconStyle),
61+
icon: withDefault(IconControl, "/icon:antd/homefilled"),
62+
autoHeight: withDefault(AutoHeightControl, "auto"),
63+
iconSize: withDefault(NumberControl, 20),
64+
onEvent: eventHandlerControl(EventOptions),
65+
};
66+
67+
const IconView = (props: RecordConstructorToView<typeof childrenMap>) => {
68+
const conRef = useRef<HTMLDivElement>(null);
69+
const [width, setWidth] = useState(0);
70+
const [height, setHeight] = useState(0);
71+
72+
useEffect(() => {
73+
if (height && width) {
74+
onResize();
75+
}
76+
}, [height, width]);
77+
78+
const onResize = () => {
79+
const container = conRef.current;
80+
setWidth(container?.clientWidth ?? 0);
81+
setHeight(container?.clientHeight ?? 0);
82+
};
83+
84+
return (
85+
<ReactResizeDetector onResize={onResize}>
86+
<Container
87+
ref={conRef}
88+
$style={props.style}
89+
style={{
90+
fontSize: props.autoHeight
91+
? `${height < width ? height : width}px`
92+
: props.iconSize,
93+
background: props.style.background,
94+
}}
95+
onClick={() => props.onEvent("click")}
96+
>
97+
{props.icon}
98+
</Container>
99+
</ReactResizeDetector>
100+
);
101+
};
102+
103+
let IconBasicComp = (function () {
104+
return new UICompBuilder(childrenMap, (props) => <IconView {...props} />)
105+
.setPropertyViewFn((children) => (
106+
<>
107+
<Section name={sectionNames.basic}>
108+
{children.icon.propertyView({
109+
label: trans("iconComp.icon"),
110+
IconType: "All",
111+
})}
112+
{children.autoHeight.propertyView({
113+
label: trans("iconComp.autoSize"),
114+
})}
115+
{!children.autoHeight.getView() &&
116+
children.iconSize.propertyView({
117+
label: trans("iconComp.iconSize"),
118+
})}
119+
</Section>
120+
<Section name={sectionNames.interaction}>
121+
{children.onEvent.getPropertyView()}
122+
</Section>
123+
<Section name={sectionNames.layout}>
124+
{hiddenPropertyView(children)}
125+
</Section>
126+
<Section name={sectionNames.style}>
127+
{children.style.getPropertyView()}
128+
</Section>
129+
</>
130+
))
131+
.build();
132+
})();
133+
134+
IconBasicComp = class extends IconBasicComp {
135+
override autoHeight(): boolean {
136+
return false;
137+
}
138+
};
139+
140+
export const IconComp = withExposingConfigs(IconBasicComp, [
141+
NameConfigHidden,
142+
]);

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -775,6 +775,10 @@ export const NavigationStyle = [
775775

776776
export const ImageStyle = [getStaticBorder("#00000000"), RADIUS, MARGIN, PADDING] as const;
777777

778+
export const IconStyle = [getStaticBackground("#00000000"),
779+
getStaticBorder("#00000000"), FILL, RADIUS, MARGIN, PADDING] as const;
780+
781+
778782
export const ListViewStyle = BG_STATIC_BORDER_RADIUS;
779783

780784
export const JsonSchemaFormStyle = BG_STATIC_BORDER_RADIUS;
@@ -934,6 +938,7 @@ export type DividerStyleType = StyleConfigType<typeof DividerStyle>;
934938
export type ProgressStyleType = StyleConfigType<typeof ProgressStyle>;
935939
export type NavigationStyleType = StyleConfigType<typeof NavigationStyle>;
936940
export type ImageStyleType = StyleConfigType<typeof ImageStyle>;
941+
export type IconStyleType = StyleConfigType<typeof IconStyle>;
937942
export type ListViewStyleType = StyleConfigType<typeof ListViewStyle>;
938943
export type JsonSchemaFormStyleType = StyleConfigType<typeof JsonSchemaFormStyle>;
939944
export type TreeSelectStyleType = StyleConfigType<typeof TreeSelectStyle>;

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ import {
9696
LottieIcon,
9797
MentionIcon,
9898
AutoCompleteCompIcon,
99+
IconCompIcon,
99100
} from "lowcoder-design";
100101

101102
import { defaultFormData, FormComp } from "./comps/formComp/formComp";
@@ -124,6 +125,8 @@ import { SignatureComp } from "./comps/signatureComp";
124125
import { TimeLineComp } from "./comps/timelineComp/timelineComp";
125126
import { MentionComp } from "./comps/textInputComp/mentionComp";
126127
import { AutoCompleteComp } from "./comps/autoCompleteComp/autoCompleteComp"
128+
import { IconComp } from "./comps/iconComp";
129+
127130
//Added by Aqib Mirza
128131
import { JsonLottieComp } from "./comps/jsonComp/jsonLottieComp";
129132

@@ -881,6 +884,19 @@ const uiCompMap: Registry = {
881884
h: 5,
882885
},
883886
},
887+
icon: {
888+
name: trans("uiComp.iconCompName"),
889+
enName: "icon",
890+
description: trans("uiComp.iconCompDesc"),
891+
categories: ["dataDisplay"],
892+
icon: IconCompIcon,
893+
keywords: trans("uiComp.iconCompKeywords"),
894+
comp: IconComp,
895+
layoutInfo: {
896+
w: 2,
897+
h: 10,
898+
},
899+
},
884900
};
885901

886902
export function loadComps() {

‎client/packages/lowcoder/src/comps/uiCompRegistry.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,7 @@ export type UICompType =
114114
| "timeline"
115115
| "mention"
116116
| "autocomplete"
117+
| "icon"
117118

118119
export const uiCompRegistry = {} as Record<UICompType | string, UICompManifest>;
119120

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -853,6 +853,9 @@ export const en = {
853853
autoCompleteCompName: "autoComplete",
854854
autoCompleteCompDesc: "autoComplete",
855855
autoCompleteCompKeywords: "",
856+
iconCompName: "icon",
857+
iconCompDesc: "icon",
858+
iconCompKeywords: "",
856859
},
857860
comp: {
858861
menuViewDocs: "View documentation",
@@ -2505,4 +2508,9 @@ export const en = {
25052508
helpLabel: "label",
25062509
helpValue: "value",
25072510
},
2511+
iconComp: {
2512+
icon: "icon",
2513+
autoSize: "icon AutoSize",
2514+
iconSize: "icon size",
2515+
}
25082516
};

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -836,6 +836,9 @@ uiComp: {
836836
autoCompleteCompName: "自动完成",
837837
autoCompleteCompDesc: "自动完成",
838838
autoCompleteCompKeywords: "zdwc",
839+
iconCompName: "图标",
840+
iconCompDesc: "图标",
841+
iconCompKeywords: "tb",
839842
},
840843
comp: {
841844
menuViewDocs: "查看文档",
@@ -2495,5 +2498,35 @@ timeLine: {
24952498
helpLabel: "标签",
24962499
helpValue: "值",
24972500
},
2501+
comment: {
2502+
value: "评论列表数据",
2503+
showSendButton: "允许评论",
2504+
title: "标题",
2505+
titledDefaultValue: "共有%d条评论",
2506+
placeholder: "shift + enter 快捷发送评论;输入@或#可快速输入",
2507+
placeholderDec: "占位符",
2508+
buttonTextDec: "按钮文本",
2509+
buttonText: "发表",
2510+
mentionList: "提及列表数据",
2511+
mentionListDec: "key-提及关键字;value-提及列表",
2512+
userInfo: "用户信息",
2513+
dateErr: "日期错误",
2514+
commentList: "评论列表数据",
2515+
deletedItem: "已删除的数据",
2516+
submitedItem: "已提交的数据",
2517+
deleteAble: "显示删除按钮",
2518+
Introduction: "属性介绍",
2519+
helpUser: "用户信息(必填)",
2520+
helpname: "用户名(必填)",
2521+
helpavatar: "头像地址(高优先)",
2522+
helpdisplayName: "头像文字(低优先)",
2523+
helpvalue: "评论内容",
2524+
helpcreatedAt: "创建时间",
2525+
},
2526+
iconComp: {
2527+
icon: "图标",
2528+
autoSize: "图标自动大小",
2529+
iconSize: "图标大小",
2530+
}
24982531
};
24992532

‎client/packages/lowcoder/src/pages/editor/editorConstants.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import {
3939
TimeLineIcon,
4040
MentionIcon,
4141
AutoCompleteCompIcon,
42+
IconCompIcon,
4243
} from "lowcoder-design";
4344

4445
export const CompStateIcon: {
@@ -107,4 +108,5 @@ export const CompStateIcon: {
107108
timeline: <TimeLineIcon />,
108109
mention: <MentionIcon/>,
109110
autocomplete: <AutoCompleteCompIcon />,
111+
icon: <IconCompIcon />,
110112
};

0 commit comments

Comments
 (0)