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

Add Map Mode for NavComponent#2038

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
import { MultiCompBuilder } from "comps/generators/multi";
import { dropdownControl } from "comps/controls/dropdownControl";
import { mapOptionsControl } from "comps/controls/optionsControl";
import { trans } from "i18n";
import { navListComp } from "../navItemComp";
import { controlItem } from "lowcoder-design";
import { menuPropertyView } from "./MenuItemList";

export function createNavItemsControl() {
const OptionTypes = [
{ label: trans("prop.manual"), value: "manual" },
{ label: trans("prop.map"), value: "map" },
] as const;

const NavMapOption = new MultiCompBuilder(
{
label: StringControl,
hidden: BoolCodeControl,
disabled: BoolCodeControl,
active: BoolCodeControl,
onEvent: eventHandlerControl([clickEvent]),
},
(props) => props
)
.setPropertyViewFn((children) => (
<>
{children.label.propertyView({ label: trans("label"), placeholder: "{{item}}" })}
{children.active.propertyView({ label: trans("navItemComp.active") })}
{children.hidden.propertyView({ label: trans("hidden") })}
{children.disabled.propertyView({ label: trans("disabled") })}
{children.onEvent.getPropertyView()}
</>
))
.build();

const TmpNavItemsControl = new MultiCompBuilder(
{
optionType: dropdownControl(OptionTypes, "manual"),
manual: navListComp(),
mapData: mapOptionsControl(NavMapOption),
},
(props) => {
return props.optionType === "manual" ? props.manual : props.mapData;
}
)
.setPropertyViewFn(() => {
throw new Error("Method not implemented.");
})
.build();

return class NavItemsControl extends TmpNavItemsControl {
exposingNode() {
return this.children.optionType.getView() === "manual"
? (this.children.manual as any).exposingNode()
: (this.children.mapData as any).exposingNode();
}

propertyView() {
const isManual = this.children.optionType.getView() === "manual";
const content = isManual
? menuPropertyView(this.children.manual as any)
: this.children.mapData.getPropertyView();

return controlItem(
{ searchChild: true },
<>
{this.children.optionType.propertyView({ radioButton: true, type: "oneline" })}
{content}
</>
);
}
};
}


97 changes: 70 additions & 27 deletionsclient/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
import { MultiCompBuilder } from "comps/generators/multi";
import { UICompBuilder, withDefault } from "comps/generators";
import { Section, sectionNames } from "lowcoder-design";
import styled from "styled-components";
import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
import { StringControl } from "comps/controls/codeControl";
import {BoolCodeControl,StringControl } from "comps/controls/codeControl";
import { alignWithJustifyControl } from "comps/controls/alignControl";
import { navListComp } from "./navItemComp";
import { menuPropertyView } from "./components/MenuItemList";
Expand All@@ -22,6 +23,8 @@ import { trans } from "i18n";

import { useContext } from "react";
import { EditorContext } from "comps/editorState";
import { controlItem } from "lowcoder-design";
import { createNavItemsControl } from "./components/NavItemsControl";

type IProps = {
$justify: boolean;
Expand DownExpand Up@@ -63,11 +66,12 @@ const Item = styled.div<{
$padding: string;
$textTransform:string;
$textDecoration:string;
$disabled?: boolean;
}>`
height: 30px;
line-height: 30px;
padding: ${(props) => props.$padding ? props.$padding : '0 16px'};
color: ${(props) => (props.$active ? props.$activeColor : props.$color)};
color: ${(props) =>props.$disabled ? `${props.$color}80` :(props.$active ? props.$activeColor : props.$color)};
font-weight: ${(props) => (props.$textWeight ? props.$textWeight : 500)};
font-family:${(props) => (props.$fontFamily ? props.$fontFamily : 'sans-serif')};
font-style:${(props) => (props.$fontStyle ? props.$fontStyle : 'normal')};
Expand All@@ -77,8 +81,8 @@ const Item = styled.div<{
margin:${(props) => props.$margin ? props.$margin : '0px'};

&:hover {
color: ${(props) => props.$activeColor};
cursor: pointer;
color: ${(props) => props.$disabled ? (props.$active ? props.$activeColor : props.$color) : props.$activeColor};
cursor:${(props) => props.$disabled ? 'not-allowed' : 'pointer'};
}

.anticon {
Expand DownExpand Up@@ -131,41 +135,74 @@ function fixOldStyleData(oldData: any) {
return oldData;
}

function fixOldItemsData(oldData: any) {
if (Array.isArray(oldData)) {
return {
optionType: "manual",
manual: oldData,
};
}
if (oldData && !oldData.optionType && Array.isArray(oldData.manual)) {
return {
optionType: "manual",
manual: oldData.manual,
};
}
return oldData;
}

const childrenMap = {
logoUrl: StringControl,
logoEvent: withDefault(eventHandlerControl(logoEventHandlers), [{ name: "click" }]),
horizontalAlignment: alignWithJustifyControl(),
style: migrateOldData(styleControl(NavigationStyle, 'style'), fixOldStyleData),
animationStyle: styleControl(AnimationStyle, 'animationStyle'),
items: withDefault(navListComp(), [
{
label: trans("menuItem") + " 1",
},
]),
items: withDefault(migrateOldData(createNavItemsControl(), fixOldItemsData), {
optionType: "manual",
manual: [
{
label: trans("menuItem") + " 1",
},
],
}),
};

const NavCompBase = new UICompBuilder(childrenMap, (props) => {
const data = props.items;
const items = (
<>
{data.map((menuItem, idx) => {
const { hidden, label, items, active, onEvent } = menuItem.getView();
{data.map((menuItem: any, idx: number) => {
const isCompItem = typeof menuItem?.getView === "function";
const view = isCompItem ? menuItem.getView() : menuItem;
const hidden = !!view?.hidden;
if (hidden) {
return null;
}
const subMenuItems: Array<{ key: string; label: string }> = [];

const label = view?.label;
const active = !!view?.active;
const onEvent = view?.onEvent;
const disabled = !!view?.disabled;
const subItems = isCompItem ? view?.items : [];

const subMenuItems: Array<{ key: string; label: any; disabled?: boolean }> = [];
const subMenuSelectedKeys: Array<string> = [];
items.forEach((subItem, originalIndex) => {
if (subItem.children.hidden.getView()) {
return;
}
const key = originalIndex + "";
subItem.children.active.getView() && subMenuSelectedKeys.push(key);
subMenuItems.push({
key: key,
label: subItem.children.label.getView(),

if (Array.isArray(subItems)) {
subItems.forEach((subItem: any, originalIndex: number) => {
if (subItem.children.hidden.getView()) {
return;
}
const key = originalIndex + "";
subItem.children.active.getView() && subMenuSelectedKeys.push(key);
subMenuItems.push({
key: key,
label: subItem.children.label.getView(),
disabled: !!subItem.children.disabled.getView(),
});
});
});
}

const item = (
<Item
key={idx}
Expand All@@ -180,18 +217,23 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
$textTransform={props.style.textTransform}
$textDecoration={props.style.textDecoration}
$margin={props.style.margin}
onClick={() => onEvent("click")}
$disabled={disabled}
onClick={() => { if (!disabled && onEvent) onEvent("click"); }}
>
{label}
{items.length > 0 && <DownOutlined />}
{Array.isArray(subItems) && subItems.length > 0 && <DownOutlined />}
</Item>
);
if (subMenuItems.length > 0) {
const subMenu = (
<StyledMenu
onClick={(e) => {
const { onEvent: onSubEvent } = items[Number(e.key)]?.getView();
onSubEvent("click");
if (disabled) return;
const subItem = subItems[Number(e.key)];
const isSubDisabled = !!subItem?.children?.disabled?.getView?.();
if (isSubDisabled) return;
const onSubEvent = subItem?.getView()?.onEvent;
onSubEvent && onSubEvent("click");
}}
selectedKeys={subMenuSelectedKeys}
items={subMenuItems}
Expand All@@ -201,6 +243,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
<Dropdown
key={idx}
popupRender={() => subMenu}
disabled={disabled}
>
{item}
</Dropdown>
Expand DownExpand Up@@ -237,7 +280,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
return (
<>
<Section name={sectionNames.basic}>
{menuPropertyView(children.items)}
{children.items.propertyView()}
</Section>

{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerCont
import { list } from "comps/generators/list";
import { parseChildrenFromValueAndChildrenMap, ToViewReturn } from "comps/generators/multi";
import { withDefault } from "comps/generators/simpleGenerators";
import { hiddenPropertyView } from "comps/utils/propertyUtils";
import {disabledPropertyView,hiddenPropertyView } from "comps/utils/propertyUtils";
import { trans } from "i18n";
import _ from "lodash";
import { fromRecord, MultiBaseComp, Node, RecordNode, RecordNodeToValue } from "lowcoder-core";
Expand All@@ -14,6 +14,7 @@ const events = [clickEvent];
const childrenMap = {
label: StringControl,
hidden: BoolCodeControl,
disabled: BoolCodeControl,
active: BoolCodeControl,
onEvent: withDefault(eventHandlerControl(events), [
{
Expand All@@ -29,6 +30,7 @@ const childrenMap = {
type ChildrenType = {
label: InstanceType<typeof StringControl>;
hidden: InstanceType<typeof BoolCodeControl>;
disabled: InstanceType<typeof BoolCodeControl>;
active: InstanceType<typeof BoolCodeControl>;
onEvent: InstanceType<ReturnType<typeof eventHandlerControl>>;
items: InstanceType<ReturnType<typeof navListComp>>;
Expand All@@ -45,6 +47,7 @@ export class NavItemComp extends MultiBaseComp<ChildrenType> {
{this.children.label.propertyView({ label: trans("label") })}
{hiddenPropertyView(this.children)}
{this.children.active.propertyView({ label: trans("navItemComp.active") })}
{disabledPropertyView(this.children)}
{this.children.onEvent.propertyView({ inline: true })}
</>
);
Expand All@@ -69,6 +72,7 @@ export class NavItemComp extends MultiBaseComp<ChildrenType> {
return fromRecord({
label: this.children.label.exposingNode(),
hidden: this.children.hidden.exposingNode(),
disabled: this.children.disabled.exposingNode(),
active: this.children.active.exposingNode(),
items: this.children.items.exposingNode(),
});
Expand All@@ -78,6 +82,7 @@ export class NavItemComp extends MultiBaseComp<ChildrenType> {
type NavItemExposing = {
label: Node<string>;
hidden: Node<boolean>;
disabled: Node<boolean>;
active: Node<boolean>;
items: Node<RecordNodeToValue<NavItemExposing>[]>;
};
Expand Down
4 changes: 3 additions & 1 deletionclient/packages/lowcoder/src/i18n/locales/en.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -26,6 +26,8 @@ export const en = {
"text": "Text",
"basic": "Basic",
"label": "Label",
"hidden": "Hidden",
"disabled": "Disabled",
"layout": "Layout",
"color": "Color",
"form": "Form",
Expand DownExpand Up@@ -3204,7 +3206,7 @@ export const en = {
"logoURL": "Navigation Logo URL",
"horizontalAlignment": "Horizontal Alignment",
"logoURLDesc": "You can display a Logo on the left side by entering URI Value or Base64 String like data:image/png;base64,AAA... CCC",
"itemsDesc": "Hierarchical NavigationMenu Items"
"itemsDesc": "Menu Items"
},
"droppadbleMenuItem": {
"subMenu": "Submenu {number}"
Expand Down
Loading
[8]ページ先頭
©2009-2025 Movatter.jp