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

Commit288fe92

Browse files
committed
refactor navlayout
1 parent571122d commit288fe92

File tree

1 file changed

+87
-65
lines changed

1 file changed

+87
-65
lines changed

‎client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx‎

Lines changed: 87 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -148,12 +148,6 @@ const StyledImage = styled.img`
148148
color: currentColor;
149149
`;
150150

151-
constdefaultStyle={
152-
radius:'0px',
153-
margin:'0px',
154-
padding:'0px',
155-
}
156-
157151
typeUrlActionType={
158152
url?:string;
159153
newTab?:boolean;
@@ -163,7 +157,7 @@ export type MenuItemNode = {
163157
label:string;
164158
key:string;
165159
hidden?:boolean;
166-
icon?:any;
160+
icon?:string;
167161
action?:UrlActionType,
168162
children?:MenuItemNode[];
169163
}
@@ -208,66 +202,94 @@ let NavTmpLayout = (function () {
208202
returnnull;
209203
})
210204
.setPropertyViewFn((children)=>{
211-
const[styleSegment,setStyleSegment]=useState('normal')
205+
const[styleSegment,setStyleSegment]=useState<MenuItemStyleOptionValue>("normal");
206+
207+
const{
208+
dataOptionType,
209+
items,
210+
jsonItems,
211+
onEvent,
212+
width,
213+
position,
214+
collapse,
215+
backgroundImage,
216+
navStyle,
217+
navItemStyle,
218+
navItemHoverStyle,
219+
navItemActiveStyle,
220+
}=children;
221+
222+
constrenderMenuSection=()=>(
223+
<Sectionname={trans("menu")}>
224+
{dataOptionType.propertyView({
225+
radioButton:true,
226+
type:"oneline",
227+
})}
228+
{dataOptionType.getView()===DataOption.Manual
229+
?menuPropertyView(items)
230+
:jsonItems.propertyView({
231+
label:"Json Data",
232+
})}
233+
</Section>
234+
);
235+
236+
constrenderEventHandlerSection=()=>(
237+
<Sectionname={trans("eventHandler.eventHandlers")}>
238+
{onEvent.getPropertyView()}
239+
</Section>
240+
);
241+
242+
constrenderLayoutSection=()=>(
243+
<Sectionname={sectionNames.layout}>
244+
{width.propertyView({
245+
label:trans("navLayout.width"),
246+
tooltip:trans("navLayout.widthTooltip"),
247+
placeholder:`${DEFAULT_WIDTH}`,
248+
})}
249+
{position.propertyView({
250+
label:trans("labelProp.position"),
251+
radioButton:true,
252+
})}
253+
{collapse.propertyView({
254+
label:trans("labelProp.collapse"),
255+
})}
256+
{backgroundImage.propertyView({
257+
label:"Background Image",
258+
placeholder:"https://temp.im/350x400",
259+
})}
260+
</Section>
261+
);
262+
263+
constrenderNavStyleSection=()=>(
264+
<Sectionname={trans("navLayout.navStyle")}>
265+
{navStyle.getPropertyView()}
266+
</Section>
267+
);
268+
269+
constrenderNavItemStyleSection=()=>(
270+
<Sectionname={trans("navLayout.navItemStyle")}>
271+
{controlItem(
272+
{},
273+
<Segmented
274+
block
275+
options={menuItemStyleOptions}
276+
value={styleSegment}
277+
onChange={(k)=>setStyleSegment(kasMenuItemStyleOptionValue)}
278+
/>
279+
)}
280+
{styleSegment==="normal"&&navItemStyle.getPropertyView()}
281+
{styleSegment==="hover"&&navItemHoverStyle.getPropertyView()}
282+
{styleSegment==="active"&&navItemActiveStyle.getPropertyView()}
283+
</Section>
284+
);
212285

213286
return(
214-
<divstyle={{overflowY:'auto'}}>
215-
<Sectionname={trans("menu")}>
216-
{children.dataOptionType.propertyView({
217-
radioButton:true,
218-
type:"oneline",
219-
})}
220-
{
221-
children.dataOptionType.getView()===DataOption.Manual
222-
?menuPropertyView(children.items)
223-
:children.jsonItems.propertyView({
224-
label:"Json Data",
225-
})
226-
}
227-
</Section>
228-
<Sectionname={trans("eventHandler.eventHandlers")}>
229-
{children.onEvent.getPropertyView()}
230-
</Section>
231-
<Sectionname={sectionNames.layout}>
232-
{children.width.propertyView({
233-
label:trans("navLayout.width"),
234-
tooltip:trans("navLayout.widthTooltip"),
235-
placeholder:DEFAULT_WIDTH+"",
236-
})}
237-
{children.position.propertyView({
238-
label:trans("labelProp.position"),
239-
radioButton:true
240-
})}
241-
{children.collapse.propertyView({
242-
label:trans("labelProp.collapse"),
243-
})}
244-
{children.backgroundImage.propertyView({
245-
label:`Background Image`,
246-
placeholder:'https://temp.im/350x400',
247-
})}
248-
</Section>
249-
<Sectionname={trans("navLayout.navStyle")}>
250-
{children.navStyle.getPropertyView()}
251-
</Section>
252-
<Sectionname={trans("navLayout.navItemStyle")}>
253-
{controlItem({},(
254-
<Segmented
255-
block
256-
options={menuItemStyleOptions}
257-
value={styleSegment}
258-
onChange={(k)=>setStyleSegment(kasMenuItemStyleOptionValue)}
259-
/>
260-
))}
261-
{styleSegment==='normal'&&(
262-
children.navItemStyle.getPropertyView()
263-
)}
264-
{styleSegment==='hover'&&(
265-
children.navItemHoverStyle.getPropertyView()
266-
)}
267-
{styleSegment==='active'&&(
268-
children.navItemActiveStyle.getPropertyView()
269-
)}
270-
</Section>
287+
<divstyle={{overflowY:"auto"}}>
288+
{renderMenuSection()}
289+
{renderEventHandlerSection()}
290+
{renderLayoutSection()}
291+
{renderNavStyleSection()}
292+
{renderNavItemStyleSection()}
271293
</div>
272294
);
273295
})

0 commit comments

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