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

Commitd47b2fb

Browse files
committed
add conditional UI on basis of mode
1 parent5addc32 commitd47b2fb

File tree

1 file changed

+50
-15
lines changed
  • client/packages/lowcoder/src/comps/comps/navComp

1 file changed

+50
-15
lines changed

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

Lines changed: 50 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { default as Menu, MenuProps } from "antd/es/menu";
1616
import{defaultasDrawer}from"antd/es/drawer";
1717
import{migrateOldData}from"comps/generators/simpleGenerators";
1818
import{styleControl}from"comps/controls/styleControl";
19+
import{IconControl}from"comps/controls/iconControl";
1920
import{
2021
AnimationStyle,
2122
AnimationStyleType,
@@ -34,6 +35,8 @@ import { EditorContext } from "comps/editorState";
3435
import{createNavItemsControl}from"./components/NavItemsControl";
3536
import{Layers}from"constants/Layers";
3637
import{CanvasContainerID}from"constants/domLocators";
38+
import{isNumeric}from"util/stringUtils";
39+
import{hasIcon}from"comps/utils";
3740

3841
typeIProps={
3942
$justify:boolean;
@@ -58,6 +61,13 @@ ${props=>props.$animationStyle}
5861
position: relative;
5962
`;
6063

64+
constDEFAULT_SIZE=378;
65+
66+
// If it is a number, use the px unit by default
67+
functiontransToPxSize(size:string|number){
68+
returnisNumeric(size) ?size+"px" :(sizeasstring);
69+
}
70+
6171
constNavInner=styled("div")<Pick<IProps,"$justify"|"$orientation">>`
6272
// margin: 0 -16px;
6373
height: 100%;
@@ -228,18 +238,31 @@ function renderInteractionSection(children: any) {
228238
functionrenderLayoutSection(children:any){
229239
constisHamburger=children.displayMode.getView()==='hamburger';
230240
constcommon=[
231-
children.orientation.propertyView({label:"Orientation",radioButton:true}),
232241
children.displayMode.propertyView({label:"Display Mode",radioButton:true}),
233242
];
234243
consthamburger=[
235244
...common,
236245
children.hamburgerPosition.propertyView({label:"Hamburger Position",radioButton:true}),
237246
children.hamburgerSize.propertyView({label:"Hamburger Size"}),
238247
children.placement.propertyView({label:trans("drawer.placement"),radioButton:true}),
248+
...(["top","bottom"].includes(children.placement.getView())
249+
?[children.drawerHeight.propertyView({
250+
label:trans("drawer.height"),
251+
tooltip:trans("drawer.heightTooltip"),
252+
placeholder:DEFAULT_SIZE+"",
253+
})]
254+
:[children.drawerWidth.propertyView({
255+
label:trans("drawer.width"),
256+
tooltip:trans("drawer.widthTooltip"),
257+
placeholder:DEFAULT_SIZE+"",
258+
})]),
259+
children.hamburgerIcon.propertyView({label:"Menu Icon"}),
260+
children.drawerCloseIcon.propertyView({label:"Close Icon"}),
239261
children.shadowOverlay.propertyView({label:"Shadow Overlay"}),
240262
];
241263
constbar=[
242264
...common,
265+
children.orientation.propertyView({label:"Orientation",radioButton:true}),
243266
children.horizontalAlignment.propertyView({
244267
label:trans("navigation.horizontalAlignment"),
245268
radioButton:true,
@@ -263,21 +286,26 @@ function renderAdvancedSection(children: any) {
263286
}
264287

265288
functionrenderStyleSections(children:any){
289+
constisHamburger=children.displayMode.getView()==='hamburger';
266290
return(
267291
<>
268-
<Sectionname={sectionNames.style}>
269-
{children.style.getPropertyView()}
270-
</Section>
271-
<Sectionname={"Item Style"}>
272-
{children.navItemStyle.getPropertyView()}
273-
</Section>
274-
<Sectionname={"Item Hover Style"}>
275-
{children.navItemHoverStyle.getPropertyView()}
276-
</Section>
277-
<Sectionname={"Item Active Style"}>
278-
{children.navItemActiveStyle.getPropertyView()}
279-
</Section>
280-
{children.displayMode.getView()==='hamburger'&&(
292+
{!isHamburger&&(
293+
<>
294+
<Sectionname={sectionNames.style}>
295+
{children.style.getPropertyView()}
296+
</Section>
297+
<Sectionname={"Item Style"}>
298+
{children.navItemStyle.getPropertyView()}
299+
</Section>
300+
<Sectionname={"Item Hover Style"}>
301+
{children.navItemHoverStyle.getPropertyView()}
302+
</Section>
303+
<Sectionname={"Item Active Style"}>
304+
{children.navItemActiveStyle.getPropertyView()}
305+
</Section>
306+
</>
307+
)}
308+
{isHamburger&&(
281309
<>
282310
<Sectionname={"Hamburger Button Style"}>
283311
{children.hamburgerButtonStyle.getPropertyView()}
@@ -311,6 +339,10 @@ const childrenMap = {
311339
],"right"),
312340
hamburgerSize:withDefault(StringControl,"56px"),
313341
placement:PositionControl,
342+
drawerWidth:StringControl,
343+
drawerHeight:StringControl,
344+
hamburgerIcon:withDefault(IconControl,""),
345+
drawerCloseIcon:withDefault(IconControl,""),
314346
shadowOverlay:withDefault(BoolCodeControl,true),
315347
horizontalAlignment:alignWithJustifyControl(),
316348
style:migrateOldData(styleControl(NavigationStyle,'style'),fixOldStyleData),
@@ -468,15 +500,18 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
468500
$iconColor={props.hamburgerButtonStyle?.iconFill}
469501
onClick={()=>setDrawerVisible(true)}
470502
>
471-
<MenuOutlined/>
503+
{hasIcon(props.hamburgerIcon) ?props.hamburgerIcon :<MenuOutlined/>}
472504
</FloatingHamburgerButton>
473505
<Drawer
474506
placement={props.placement||"right"}
475507
closable={true}
508+
closeIcon={hasIcon(props.drawerCloseIcon) ?props.drawerCloseIcon :undefined}
476509
onClose={()=>setDrawerVisible(false)}
477510
open={drawerVisible}
478511
mask={props.shadowOverlay}
479512
getContainer={getContainer}
513+
width={["left","right"].includes(props.placementasany) ?transToPxSize(props.drawerWidth||DEFAULT_SIZE) :undefinedasany}
514+
height={["top","bottom"].includes(props.placementasany) ?transToPxSize(props.drawerHeight||DEFAULT_SIZE) :undefinedasany}
480515
styles={{body:{padding:"8px",background:props.drawerContainerStyle?.background}}}
481516
destroyOnClose
482517
>

0 commit comments

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