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

Commit0ad48c4

Browse files
committed
Implemented setPropertyView as lazy Component
1 parent49eabf2 commit0ad48c4

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.
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+
importReactfrom"react";
12+
13+
constSetPropertyViewFn=((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+
<Sectionname={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+
<Sectionname={sectionNames.layout}>
62+
{hiddenPropertyView(children)}
63+
</Section>
64+
65+
<Sectionname={sectionNames.style}>
66+
{children.style.getPropertyView()}
67+
</Section>
68+
<Sectionname={sectionNames.labelStyle}>
69+
{children.labelStyle.getPropertyView()}
70+
</Section>
71+
<Sectionname={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+
exportdefaultSetPropertyViewFn

‎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
importstyledfrom"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+
importReact,{ReactElement,useContext}from"react";
3633
import{CompNameContext,EditorContext}from"../editorState";
34+
import{viewMode}from"@lowcoder-ee/util/editor";
35+
constSetPropertyViewFn=React.lazy(async()=>awaitimport("./setProperty/avatar"));
3736

3837
constAvatarWrapper=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
letAvatarBasicComp=(function(){
200-
returnnewUICompBuilder(childrenMap,(props)=>{
199+
letbuilder=newUICompBuilder(childrenMap,(props)=>{
201200
return(<AvatarView{...props}/>)})
202-
.setPropertyViewFn((children)=>(
203-
<>
204-
<Sectionname={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-
<Sectionname={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-
<Sectionname={sectionNames.interaction}>
255-
{children.onEvent.getPropertyView()}
256-
</Section>
257-
<Sectionname={sectionNames.layout}>
258-
{hiddenPropertyView(children)}
259-
</Section>
260-
<Sectionname={sectionNames.style}>
261-
{children.style.getPropertyView()}
262-
</Section>
263-
<Sectionname={sectionNames.avatarStyle}>
264-
{children.avatarStyle.getPropertyView()}
265-
</Section>
266-
<Sectionname={sectionNames.labelStyle}>
267-
{children.labelStyle.getPropertyView()}
268-
</Section>
269-
<Sectionname={sectionNames.captionStyle}>
270-
{children.captionStyle.getPropertyView()}
271-
</Section>
272-
</>
273-
))
201+
if(viewMode()==="edit"){
202+
builder.setPropertyViewFn((children)=><SetPropertyViewFn{...children}></SetPropertyViewFn>);
203+
}
204+
returnbuilder
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
importstyledfrom"styled-components";
13-
import{useContext,ReactElement,useEffect}from"react";
12+
importReact,{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+
constSetPropertyViewAvatarGroup1=React.lazy(async()=>awaitimport("./setProperty/avatarGroup").then(module=>({default:module.SetPropertyViewAvatarGroup1})))
23+
constSetPropertyViewAvatarGroup2=React.lazy(async()=>awaitimport("./setProperty/avatarGroup").then(module=>({default:module.SetPropertyViewAvatarGroup2})))
2424
constMacaroneList=[
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-
constDropdownOption=newMultiCompBuilder(
51+
letDropdownOption=newMultiCompBuilder(
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+
constDropdownOptionBuilder=DropdownOption.build();
8066

8167
constEventOptions=[clickEvent,refreshEvent]asconst;
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
letAvatarGroupBasicComp=(function(){
146-
returnnewUICompBuilder(childrenMap,(props,dispatch)=>{
132+
letbuilder=newUICompBuilder(childrenMap,(props,dispatch)=>{
147133
return(<AvatarGroupView{...props}dispatch={dispatch}/>
148-
)})
149-
.setPropertyViewFn((children)=>(
150-
<>
151-
{["logic","both"].includes(useContext(EditorContext).editorModeStatus)&&(
152-
<>
153-
<Sectionname={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-
<Sectionname={sectionNames.interaction}>
170-
{hiddenPropertyView(children)}
171-
{children.onEvent.propertyView()}
172-
</Section>
173-
</>
174-
)}
175-
176-
{["layout","both"].includes(useContext(EditorContext).editorModeStatus)&&(
177-
<>
178-
<Sectionname={sectionNames.avatarStyle}>
179-
{children.avatar.getPropertyView()}
180-
</Section>
181-
<Sectionname={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+
returnbuilder
188139
.build();
189140
})();
190141

0 commit comments

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