Skip to content

Commit 795c181

Browse files
iamfaraniamfaran
committed
refactor navigation component
1 parent 1ceefdb commit 795c181

File tree

1 file changed

+96
-69
lines changed
  • client/packages/lowcoder/src/comps/comps/navComp

1 file changed

+96
-69
lines changed

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

Lines changed: 96 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -206,6 +206,93 @@ function fixOldItemsData(oldData: any) {
206206
return oldData;
207207
}
208208

209+
// Property View Helpers
210+
function renderBasicSection(children: any) {
211+
return (
212+
<Section name={sectionNames.basic}>
213+
{children.items.propertyView()}
214+
</Section>
215+
);
216+
}
217+
218+
function renderInteractionSection(children: any) {
219+
return (
220+
<Section name={sectionNames.interaction}>
221+
{hiddenPropertyView(children)}
222+
{showDataLoadingIndicatorsPropertyView(children)}
223+
</Section>
224+
);
225+
}
226+
227+
function renderLayoutSection(children: any) {
228+
const isHamburger = children.displayMode.getView() === 'hamburger';
229+
const common = [
230+
children.orientation.propertyView({ label: "Orientation", radioButton: true }),
231+
children.displayMode.propertyView({ label: "Display Mode", radioButton: true }),
232+
];
233+
const hamburger = [
234+
...common,
235+
children.hamburgerPosition.propertyView({ label: "Hamburger Position" }),
236+
children.hamburgerSize.propertyView({ label: "Hamburger Size" }),
237+
children.drawerPlacement.propertyView({ label: "Drawer Placement", radioButton: true }),
238+
children.shadowOverlay.propertyView({ label: "Shadow Overlay" }),
239+
];
240+
const bar = [
241+
...common,
242+
children.horizontalAlignment.propertyView({
243+
label: trans("navigation.horizontalAlignment"),
244+
radioButton: true,
245+
}),
246+
];
247+
248+
return (
249+
<Section name={sectionNames.layout}>
250+
{isHamburger ? hamburger : bar}
251+
</Section>
252+
);
253+
}
254+
255+
function renderAdvancedSection(children: any) {
256+
return (
257+
<Section name={sectionNames.advanced}>
258+
{children.logoUrl.propertyView({ label: trans("navigation.logoURL"), tooltip: trans("navigation.logoURLDesc") })}
259+
{children.logoUrl.getView() && children.logoEvent.propertyView({ inline: true })}
260+
</Section>
261+
);
262+
}
263+
264+
function renderStyleSections(children: any) {
265+
return (
266+
<>
267+
<Section name={sectionNames.style}>
268+
{children.style.getPropertyView()}
269+
</Section>
270+
<Section name={"Item Style"}>
271+
{children.navItemStyle.getPropertyView()}
272+
</Section>
273+
<Section name={"Item Hover Style"}>
274+
{children.navItemHoverStyle.getPropertyView()}
275+
</Section>
276+
<Section name={"Item Active Style"}>
277+
{children.navItemActiveStyle.getPropertyView()}
278+
</Section>
279+
{children.displayMode.getView() === 'hamburger' && (
280+
<>
281+
<Section name={"Hamburger Button Style"}>
282+
{children.hamburgerButtonStyle.getPropertyView()}
283+
</Section>
284+
<Section name={"Drawer Container Style"}>
285+
{children.drawerContainerStyle.getPropertyView()}
286+
</Section>
287+
</>
288+
)}
289+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
290+
{children.animationStyle.getPropertyView()}
291+
</Section>
292+
</>
293+
);
294+
}
295+
209296
const childrenMap = {
210297
logoUrl: StringControl,
211298
logoEvent: withDefault(eventHandlerControl(logoEventHandlers), [{ name: "click" }]),
@@ -400,77 +487,17 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
400487
);
401488
})
402489
.setPropertyViewFn((children) => {
490+
const mode = useContext(EditorContext).editorModeStatus;
491+
const showLogic = mode === "logic" || mode === "both";
492+
const showLayout = mode === "layout" || mode === "both";
493+
403494
return (
404495
<>
405-
<Section name={sectionNames.basic}>
406-
{children.items.propertyView()}
407-
</Section>
408-
409-
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
410-
<Section name={sectionNames.interaction}>
411-
{hiddenPropertyView(children)}
412-
{showDataLoadingIndicatorsPropertyView(children)}
413-
</Section>
414-
)}
415-
416-
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
417-
<Section name={sectionNames.layout}>
418-
{children.orientation.propertyView({ label: "Orientation", radioButton: true })}
419-
{children.displayMode.propertyView({ label: "Display Mode", radioButton: true })}
420-
{children.displayMode.getView() === 'hamburger' ? (
421-
[
422-
children.hamburgerPosition.propertyView({ label: "Hamburger Position" }),
423-
children.hamburgerSize.propertyView({ label: "Hamburger Size" }),
424-
children.drawerPlacement.propertyView({ label: "Drawer Placement", radioButton: true }),
425-
children.shadowOverlay.propertyView({ label: "Shadow Overlay" }),
426-
]
427-
) : (
428-
children.horizontalAlignment.propertyView({
429-
label: trans("navigation.horizontalAlignment"),
430-
radioButton: true,
431-
})
432-
)}
433-
{hiddenPropertyView(children)}
434-
</Section>
435-
)}
436-
437-
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
438-
<Section name={sectionNames.advanced}>
439-
{children.logoUrl.propertyView({ label: trans("navigation.logoURL"), tooltip: trans("navigation.logoURLDesc") })}
440-
{children.logoUrl.getView() && children.logoEvent.propertyView({ inline: true })}
441-
</Section>
442-
)}
443-
444-
{(useContext(EditorContext).editorModeStatus === "layout" ||
445-
useContext(EditorContext).editorModeStatus === "both") && (
446-
<>
447-
<Section name={sectionNames.style}>
448-
{children.style.getPropertyView()}
449-
</Section>
450-
<Section name={"Item Style"}>
451-
{children.navItemStyle.getPropertyView()}
452-
</Section>
453-
<Section name={"Item Hover Style"}>
454-
{children.navItemHoverStyle.getPropertyView()}
455-
</Section>
456-
<Section name={"Item Active Style"}>
457-
{children.navItemActiveStyle.getPropertyView()}
458-
</Section>
459-
{children.displayMode.getView() === 'hamburger' && (
460-
<>
461-
<Section name={"Hamburger Button Style"}>
462-
{children.hamburgerButtonStyle.getPropertyView()}
463-
</Section>
464-
<Section name={"Drawer Container Style"}>
465-
{children.drawerContainerStyle.getPropertyView()}
466-
</Section>
467-
</>
468-
)}
469-
<Section name={sectionNames.animationStyle} hasTooltip={true}>
470-
{children.animationStyle.getPropertyView()}
471-
</Section>
472-
</>
473-
)}
496+
{renderBasicSection(children)}
497+
{showLogic && renderInteractionSection(children)}
498+
{showLayout && renderLayoutSection(children)}
499+
{showLogic && renderAdvancedSection(children)}
500+
{showLayout && renderStyleSections(children)}
474501
</>
475502
);
476503
})

0 commit comments

Comments
 (0)