Skip to content

Commit 0ad48c4

Browse files
Imiss-U1025Imiss-U1025
committed
Implemented setPropertyView as lazy Component
1 parent 49eabf2 commit 0ad48c4

File tree

107 files changed

+5353
-4104
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

107 files changed

+5353
-4104
lines changed

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

Lines changed: 170 additions & 244 deletions
Large diffs are not rendered by default.

‎client/packages/lowcoder/src/comps/comps/autoCompleteComp/setProperty.tsx

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import {Section, sectionNames} from "components/Section";
2+
import {trans} from "@lowcoder-ee/i18n";
3+
import {allowClearPropertyView, hiddenPropertyView} from "lowcoder-sdk";
4+
import {itemsDataTooltip} from "@lowcoder-ee/comps/comps/autoCompleteComp/autoCompleteConstants";
5+
import {getDayJSLocale} from "@lowcoder-ee/i18n/dayjsLocale";
6+
import {
7+
TextInputBasicSection,
8+
TextInputInteractionSection, TextInputValidationSection
9+
} from "@lowcoder-ee/comps/comps/textInputComp/textInputConstants";
10+
import {FormDataPropertyView} from "@lowcoder-ee/comps/comps/formComp/formDataConstants";
11+
import React from "react";
12+
13+
const SetPropertyViewFn = ((children: any) => {
14+
return (
15+
<>
16+
<Section>
17+
{children.autoCompleteType.getView() === 'normal' &&
18+
children.prefixIcon.propertyView({
19+
label: trans('button.prefixIcon'),
20+
})}
21+
{children.autoCompleteType.getView() === 'normal' &&
22+
children.suffixIcon.propertyView({
23+
label: trans('button.suffixIcon'),
24+
})}
25+
{allowClearPropertyView(children)}
26+
</Section>
27+
<Section name={trans('autoComplete.SectionDataName')}>
28+
{children.items.propertyView({
29+
label: trans('autoComplete.value'),
30+
tooltip: itemsDataTooltip,
31+
placeholder: '[]',
32+
})}
33+
{getDayJSLocale() === 'zh-cn' &&
34+
children.searchFirstPY.propertyView({
35+
label: trans('autoComplete.searchFirstPY'),
36+
})}
37+
{getDayJSLocale() === 'zh-cn' &&
38+
children.searchCompletePY.propertyView({
39+
label: trans('autoComplete.searchCompletePY'),
40+
})}
41+
{children.searchLabelOnly.propertyView({
42+
label: trans('autoComplete.searchLabelOnly'),
43+
})}
44+
{children.ignoreCase.propertyView({
45+
label: trans('autoComplete.ignoreCase'),
46+
})}
47+
{children.valueOrLabel.propertyView({
48+
label: trans('autoComplete.checkedValueFrom'),
49+
radioButton: true,
50+
})}
51+
</Section>
52+
<TextInputBasicSection {...children} />
53+
54+
<FormDataPropertyView {...children} />
55+
{children.label.getPropertyView()}
56+
57+
<TextInputInteractionSection {...children} />
58+
59+
{<TextInputValidationSection {...children} />}
60+
61+
<Section name={sectionNames.layout}>
62+
{hiddenPropertyView(children)}
63+
</Section>
64+
65+
<Section name={sectionNames.style}>
66+
{children.style.getPropertyView()}
67+
</Section>
68+
<Section name={sectionNames.labelStyle}>
69+
{children.labelStyle.getPropertyView()}
70+
</Section>
71+
<Section name={sectionNames.inputFieldStyle}>
72+
{children.inputFieldStyle.getPropertyView()}
73+
</Section>
74+
<Section
75+
name={sectionNames.animationStyle}
76+
hasTooltip={true}
77+
>
78+
{children.animationStyle.getPropertyView()}
79+
</Section>
80+
</>
81+
);
82+
})
83+
84+
85+
export default SetPropertyViewFn

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

Lines changed: 9 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import styled from "styled-components";
22
import { RecordConstructorToView } from "lowcoder-core";
33
import { styleControl } from "comps/controls/styleControl";
4-
import _ from "lodash";
54
import {
65
avatarContainerStyle,
76
AvatarContainerStyleType,
@@ -17,8 +16,6 @@ import {
1716
NameConfigHidden,
1817
withExposingConfigs,
1918
} from "comps/generators/withExposing";
20-
import { Section, sectionNames } from "lowcoder-design";
21-
import { hiddenPropertyView } from "comps/utils/propertyUtils";
2219
import { trans } from "i18n";
2320
import { NumberControl } from "comps/controls/codeControl";
2421
import { IconControl } from "comps/controls/iconControl";
@@ -30,10 +27,12 @@ import { Avatar, AvatarProps, Badge, Dropdown, Menu } from "antd";
3027
import { LeftRightControl, dropdownControl } from "../controls/dropdownControl";
3128
import { stringExposingStateControl } from "../controls/codeStateControl";
3229
import { BoolControl } from "../controls/boolControl";
33-
import { BadgeBasicSection, badgeChildren } from "./badgeComp/badgeConstants";
30+
import { badgeChildren } from "./badgeComp/badgeConstants";
3431
import { DropdownOptionControl } from "../controls/optionsControl";
35-
import { ReactElement, useContext, useEffect } from "react";
32+
import React, { ReactElement, useContext } from "react";
3633
import { CompNameContext, EditorContext } from "../editorState";
34+
import {viewMode} from "@lowcoder-ee/util/editor";
35+
const SetPropertyViewFn = React.lazy( async () => await import("./setProperty/avatar"));
3736

3837
const AvatarWrapper = styled(Avatar) <AvatarProps & { $cursorPointer?: boolean, $style: AvatarStyleType }>`
3938
background: ${(props) => props.$style.background};
@@ -197,80 +196,12 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
197196
};
198197

199198
let AvatarBasicComp = (function () {
200-
return new UICompBuilder(childrenMap, (props) => {
199+
let builder = new UICompBuilder(childrenMap, (props) => {
201200
return(<AvatarView {...props} />)})
202-
.setPropertyViewFn((children) => (
203-
<>
204-
<Section name={sectionNames.basic}>
205-
{children.src.propertyView({
206-
label: trans("avatarComp.src"),
207-
placeholder: "http://xxxx/xx.jpg",
208-
tooltip: trans("avatarComp.avatarCompTooltip"),
209-
})}
210-
{children.title.propertyView({
211-
label: trans("avatarComp.title"),
212-
tooltip: trans("avatarComp.avatarCompTooltip"),
213-
})}
214-
{children.icon.propertyView({
215-
label: trans("avatarComp.icon"),
216-
IconType: "All",
217-
tooltip: trans("avatarComp.avatarCompTooltip"),
218-
})}
219-
{children.shape.propertyView({
220-
label: trans("avatarComp.shape"),
221-
radioButton: true,
222-
})}
223-
{
224-
children.iconSize.propertyView({
225-
label: trans("avatarComp.iconSize"),
226-
})}
227-
{
228-
children.enableDropdownMenu.propertyView({
229-
label: trans("avatarComp.enableDropDown")
230-
})}
231-
{children.enableDropdownMenu.getView() && children.options.propertyView({})}
232-
</Section>
233-
<Section name={trans('avatarComp.label')}>
234-
{
235-
children.avatarLabel.propertyView({
236-
label: trans("avatarComp.label"),
237-
})}
238-
{
239-
children.avatarCatption.propertyView({
240-
label: trans("avatarComp.caption"),
241-
})}
242-
{
243-
children.labelPosition.propertyView({
244-
label: trans("avatarComp.labelPosition"),
245-
radioButton: true,
246-
})}
247-
{
248-
children.alignmentPosition.propertyView({
249-
label: trans("avatarComp.alignmentPosition"),
250-
radioButton: true,
251-
})}
252-
</Section>
253-
{<BadgeBasicSection {...children} />}
254-
<Section name={sectionNames.interaction}>
255-
{children.onEvent.getPropertyView()}
256-
</Section>
257-
<Section name={sectionNames.layout}>
258-
{hiddenPropertyView(children)}
259-
</Section>
260-
<Section name={sectionNames.style}>
261-
{children.style.getPropertyView()}
262-
</Section>
263-
<Section name={sectionNames.avatarStyle}>
264-
{children.avatarStyle.getPropertyView()}
265-
</Section>
266-
<Section name={sectionNames.labelStyle}>
267-
{children.labelStyle.getPropertyView()}
268-
</Section>
269-
<Section name={sectionNames.captionStyle}>
270-
{children.captionStyle.getPropertyView()}
271-
</Section>
272-
</>
273-
))
201+
if (viewMode() === "edit") {
202+
builder.setPropertyViewFn((children) => <SetPropertyViewFn {...children}></SetPropertyViewFn>);
203+
}
204+
return builder
274205
.build();
275206
})();
276207

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

Lines changed: 18 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
11
import { CompAction, RecordConstructorToView, changeChildAction } from "lowcoder-core";
22
import { styleControl } from "comps/controls/styleControl";
3-
import { QRCodeStyle, QRCodeStyleType, avatarGroupStyle, AvatarGroupStyleType, avatarContainerStyle, AvatarContainerStyleType } from "comps/controls/styleControlConstants";
3+
import { avatarGroupStyle, avatarContainerStyle, AvatarContainerStyleType } from "comps/controls/styleControlConstants";
44
import { UICompBuilder } from "comps/generators/uiCompBuilder";
55
import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
6-
import {AlignCenter, AlignLeft, AlignRight, Section, sectionNames} from "lowcoder-design";
7-
import { hiddenPropertyView } from "comps/utils/propertyUtils";
6+
import {AlignCenter, AlignLeft, AlignRight} from "lowcoder-design";
87
import { trans } from "i18n";
98
import { NumberControl, StringControl } from "comps/controls/codeControl";
109
import { Avatar, Tooltip } from "antd";
1110
import { clickEvent, eventHandlerControl, refreshEvent } from "../controls/eventHandlerControl";
1211
import styled from "styled-components";
13-
import { useContext, ReactElement, useEffect } from "react";
12+
import React, { ReactElement } from "react";
1413
import { MultiCompBuilder, stateComp, withDefault } from "../generators";
15-
import { EditorContext } from "comps/editorState";
1614
import { IconControl } from "../controls/iconControl";
1715
import { ColorControl } from "../controls/colorControl";
1816
import { optionsControl } from "../controls/optionsControl";
1917
import { BoolControl } from "../controls/boolControl";
2018
import { dropdownControl } from "../controls/dropdownControl";
2119
import { JSONObject } from "util/jsonTypes";
2220
import {MultiIconDisplay} from "@lowcoder-ee/comps/comps/multiIconDisplay";
23-
21+
import {viewMode} from "@lowcoder-ee/util/editor";
22+
const SetPropertyViewAvatarGroup1 = React.lazy( async () => await import("./setProperty/avatarGroup").then(module => ({default: module.SetPropertyViewAvatarGroup1})))
23+
const SetPropertyViewAvatarGroup2 = React.lazy( async () => await import("./setProperty/avatarGroup").then(module => ({default: module.SetPropertyViewAvatarGroup2})))
2424
const MacaroneList = [
2525
'#fde68a',
2626
'#eecff3',
@@ -48,7 +48,7 @@ const Container = styled.div<{ $style: AvatarContainerStyleType | undefined, ali
4848
border-width: ${props => props?.$style?.borderWidth};
4949
`;
5050

51-
const DropdownOption = new MultiCompBuilder(
51+
let DropdownOption = new MultiCompBuilder(
5252
{
5353
src: StringControl,
5454
AvatarIcon: IconControl,
@@ -59,24 +59,10 @@ const DropdownOption = new MultiCompBuilder(
5959
},
6060
(props) => props
6161
)
62-
.setPropertyViewFn((children) => (
63-
<>
64-
{children.src.propertyView({ label: trans("avatarComp.src"), placeholder: "", tooltip: trans("avatarComp.avatarCompTooltip") })}
65-
{children.label.propertyView({
66-
label: trans("avatarComp.title"),
67-
tooltip: trans("avatarComp.avatarCompTooltip"),
68-
})}
69-
{children.AvatarIcon.propertyView({
70-
label: trans("avatarComp.icon"),
71-
IconType: "All",
72-
tooltip: trans("avatarComp.avatarCompTooltip"),
73-
})}
74-
{children.color.propertyView({ label: trans("style.fill") })}
75-
{children.backgroundColor.propertyView({ label: trans("style.background") })}
76-
{children.Tooltip.propertyView({ label: trans("badge.tooltip") })}
77-
</>
78-
))
79-
.build();
62+
if (viewMode() === "edit") {
63+
DropdownOption.setPropertyViewFn((children) => <SetPropertyViewAvatarGroup1 {...children}></SetPropertyViewAvatarGroup1>);
64+
}
65+
const DropdownOptionBuilder = DropdownOption.build();
8066

8167
const EventOptions = [clickEvent, refreshEvent] as const;
8268

@@ -95,7 +81,7 @@ const childrenMap = {
9581
autoColor: BoolControl.DEFAULT_TRUE,
9682
onEvent: eventHandlerControl(EventOptions),
9783
currentAvatar: stateComp<JSONObject>({}),
98-
avatars: optionsControl(DropdownOption, {
84+
avatars: optionsControl(DropdownOptionBuilder, {
9985
initOptions: [
10086
{ src: "https://api.dicebear.com/7.x/miniavs/svg?seed=1", label: String.fromCharCode(65 + Math.ceil(Math.random() * 25)) },
10187
{ AvatarIcon: "/icon:antd/startwotone" },
@@ -143,48 +129,13 @@ const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & {
143129
};
144130

145131
let AvatarGroupBasicComp = (function () {
146-
return new UICompBuilder(childrenMap, (props, dispatch) => {
132+
let builder = new UICompBuilder(childrenMap, (props, dispatch) => {
147133
return( <AvatarGroupView {...props} dispatch={dispatch} />
148-
)})
149-
.setPropertyViewFn((children) => (
150-
<>
151-
{["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
152-
<>
153-
<Section name={sectionNames.basic}>
154-
{children.avatars.propertyView({})}
155-
{children.maxCount.propertyView({
156-
label: trans("avatarGroup.maxCount")
157-
})}
158-
{children.avatarSize.propertyView({
159-
label: trans("avatarGroup.avatarSize")
160-
})}
161-
{children.autoColor.propertyView({
162-
label: trans("avatarGroup.autoColor")
163-
})}
164-
{children.alignment.propertyView({
165-
label: trans("avatarGroup.alignment"),
166-
radioButton: true,
167-
})}
168-
</Section>
169-
<Section name={sectionNames.interaction}>
170-
{hiddenPropertyView(children)}
171-
{children.onEvent.propertyView()}
172-
</Section>
173-
</>
174-
)}
175-
176-
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
177-
<>
178-
<Section name={sectionNames.avatarStyle}>
179-
{children.avatar.getPropertyView()}
180-
</Section>
181-
<Section name={sectionNames.style}>
182-
{children.style.getPropertyView()}
183-
</Section>
184-
</>
185-
)}
186-
</>
187-
))
134+
)})
135+
if (viewMode() === "edit") {
136+
builder.setPropertyViewFn((children) => <SetPropertyViewAvatarGroup2 {...children}></SetPropertyViewAvatarGroup2>);
137+
}
138+
return builder
188139
.build();
189140
})();
190141

0 commit comments

Comments
 (0)