mirror of
https://github.com/wavetermdev/waveterm.git
synced 2024-12-28 17:48:45 +01:00
menu (#846)
This commit is contained in:
parent
11126a4cc5
commit
5ecb285339
.storybook
frontend/app
@ -1,6 +1,7 @@
|
||||
body {
|
||||
height: 100vh;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#storybook-root {
|
||||
|
5
.storybook/preview-head.html
Normal file
5
.storybook/preview-head.html
Normal file
@ -0,0 +1,5 @@
|
||||
<link rel="stylesheet" href="/fontawesome/css/fontawesome.min.css" />
|
||||
<link rel="stylesheet" href="/fontawesome/css/brands.min.css" />
|
||||
<link rel="stylesheet" href="/fontawesome/css/solid.min.css" />
|
||||
<link rel="stylesheet" href="/fontawesome/css/sharp-solid.min.css" />
|
||||
<link rel="stylesheet" href="/fontawesome/css/sharp-regular.min.css" />
|
@ -3,6 +3,9 @@ import type { Preview } from "@storybook/react";
|
||||
import React from "react";
|
||||
import { DndProvider } from "react-dnd";
|
||||
import { HTML5Backend } from "react-dnd-html5-backend";
|
||||
import "../frontend/app/theme.less";
|
||||
import "../frontend/app/app.less";
|
||||
import "../frontend/app/reset.less";
|
||||
import "./global.css";
|
||||
|
||||
const preview: Preview = {
|
||||
|
@ -5,7 +5,7 @@
|
||||
// override default button appearance
|
||||
border: 1px solid transparent;
|
||||
outline: 1px solid transparent;
|
||||
border: none;
|
||||
border: 1px solid transparent;
|
||||
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
@ -150,8 +150,7 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
&:focus-visible {
|
||||
outline: 1px solid var(--success-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
121
frontend/app/element/button.stories.tsx
Normal file
121
frontend/app/element/button.stories.tsx
Normal file
@ -0,0 +1,121 @@
|
||||
// Copyright 2024, Command Line Inc.
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { fn } from "@storybook/test";
|
||||
import { Button } from "./button";
|
||||
|
||||
const meta = {
|
||||
title: "Elements/Button",
|
||||
component: Button,
|
||||
args: {
|
||||
children: "Click Me",
|
||||
disabled: false,
|
||||
className: "",
|
||||
onClick: fn(),
|
||||
},
|
||||
argTypes: {
|
||||
onClick: {
|
||||
action: "clicked",
|
||||
description: "Click event handler",
|
||||
},
|
||||
children: {
|
||||
description: "Content inside the button",
|
||||
},
|
||||
disabled: {
|
||||
description: "Disables the button if true",
|
||||
},
|
||||
className: {
|
||||
description: "Additional class names to style the button",
|
||||
},
|
||||
},
|
||||
} satisfies Meta<typeof Button>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {};
|
||||
|
||||
export const Disabled: Story = {
|
||||
args: {
|
||||
disabled: true,
|
||||
children: "Disabled Button",
|
||||
},
|
||||
};
|
||||
|
||||
export const GreySolid: Story = {
|
||||
args: {
|
||||
className: "solid grey",
|
||||
children: "Grey Solid Button",
|
||||
},
|
||||
};
|
||||
|
||||
export const RedSolid: Story = {
|
||||
args: {
|
||||
className: "solid red",
|
||||
children: "Red Solid Button",
|
||||
},
|
||||
};
|
||||
|
||||
export const YellowSolid: Story = {
|
||||
args: {
|
||||
className: "solid yellow",
|
||||
children: "Yellow Solid Button",
|
||||
},
|
||||
};
|
||||
|
||||
export const GreenOutlined: Story = {
|
||||
args: {
|
||||
className: "outlined green",
|
||||
children: "Green Outline Button",
|
||||
},
|
||||
};
|
||||
|
||||
export const GreyOutlined: Story = {
|
||||
args: {
|
||||
className: "outlined grey",
|
||||
children: "Grey Outline Button",
|
||||
},
|
||||
};
|
||||
|
||||
export const RedOutlined: Story = {
|
||||
args: {
|
||||
className: "outlined red",
|
||||
children: "Red Outline Button",
|
||||
},
|
||||
};
|
||||
|
||||
export const YellowOutlined: Story = {
|
||||
args: {
|
||||
className: "outlined yellow",
|
||||
children: "Yellow Outline Button",
|
||||
},
|
||||
};
|
||||
|
||||
export const GreenGhostText: Story = {
|
||||
args: {
|
||||
className: "ghost green",
|
||||
children: "Yellow Ghost Text Button",
|
||||
},
|
||||
};
|
||||
|
||||
export const GreyGhostText: Story = {
|
||||
args: {
|
||||
className: "ghost grey",
|
||||
children: "Grey Ghost Text Button",
|
||||
},
|
||||
};
|
||||
|
||||
export const RedGhost: Story = {
|
||||
args: {
|
||||
className: "ghost red",
|
||||
children: "Red Ghost Text Button",
|
||||
},
|
||||
};
|
||||
|
||||
export const YellowGhostText: Story = {
|
||||
args: {
|
||||
className: "ghost yellow",
|
||||
children: "Yellow Ghost Text Button",
|
||||
},
|
||||
};
|
@ -9,13 +9,10 @@ import "./button.less";
|
||||
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
className?: string;
|
||||
children?: ReactNode;
|
||||
target?: string;
|
||||
source?: string;
|
||||
}
|
||||
|
||||
const Button = memo(
|
||||
forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ children, disabled, source, className = "", ...props }: ButtonProps, ref) => {
|
||||
forwardRef<HTMLButtonElement, ButtonProps>(({ children, disabled, className = "", ...props }: ButtonProps, ref) => {
|
||||
const btnRef = useRef<HTMLButtonElement>(null);
|
||||
useImperativeHandle(ref, () => btnRef.current as HTMLButtonElement);
|
||||
|
||||
@ -42,8 +39,9 @@ const Button = memo(
|
||||
{childrenArray}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
)
|
||||
})
|
||||
);
|
||||
|
||||
Button.displayName = "Button";
|
||||
|
||||
export { Button };
|
||||
|
55
frontend/app/element/menu.less
Normal file
55
frontend/app/element/menu.less
Normal file
@ -0,0 +1,55 @@
|
||||
.menu {
|
||||
position: absolute;
|
||||
z-index: 1000; // TODO: put this in theme.less
|
||||
display: flex;
|
||||
width: 125px; /* Ensure the menu has a fixed width */
|
||||
padding: 2px;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
gap: 1px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
background: #212121;
|
||||
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.3);
|
||||
|
||||
.menu-item {
|
||||
padding: 4px 6px;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
letter-spacing: -0.12px;
|
||||
width: 100%;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
/* Make sure the label and the icon don't overlap */
|
||||
.label {
|
||||
flex: 1; /* Allow the label to take up available space */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-right: 8px; /* Add some space between label and icon */
|
||||
}
|
||||
|
||||
i {
|
||||
color: var(--main-text-color);
|
||||
flex-shrink: 0; /* Prevent icon from shrinking */
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background-color: var(--accent-color);
|
||||
color: var(--button-text-color);
|
||||
|
||||
i {
|
||||
color: var(--button-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
471
frontend/app/element/menu.stories.tsx
Normal file
471
frontend/app/element/menu.stories.tsx
Normal file
@ -0,0 +1,471 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { fn } from "@storybook/test";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { Button } from "./button";
|
||||
import { Menu } from "./menu";
|
||||
|
||||
const items = [
|
||||
{ label: "Fruit", onClick: (e) => console.log("Clicked Option 1") },
|
||||
{
|
||||
label: "Vegetables",
|
||||
subItems: [
|
||||
{ label: "Carrot", onClick: (e) => console.log("Clicked Option 2 -> 1") },
|
||||
{ label: "Potato", onClick: (e) => console.log("Clicked Option 2 -> 2") },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Beverages",
|
||||
subItems: [
|
||||
{ label: "Juice", onClick: (e) => console.log("Clicked Option 3 -> 1") },
|
||||
{ label: "Tea", onClick: (e) => console.log("Clicked Option 3 -> 2") },
|
||||
{
|
||||
label: "Coffee",
|
||||
subItems: [
|
||||
{ label: "Espresso", onClick: (e) => console.log("Clicked Option 3 -> 3 -> 1") },
|
||||
{ label: "Latte", onClick: (e) => console.log("Clicked Option 3 -> 3 -> 2") },
|
||||
{ label: "Cappuccino", onClick: (e) => console.log("Clicked Option 3 -> 3 -> 3") },
|
||||
{
|
||||
label: "Mocha",
|
||||
subItems: [
|
||||
{ label: "Dark Chocolate", onClick: (e) => console.log("Clicked Option 3 -> 3 -> 4 -> 1") },
|
||||
{
|
||||
label: "White Chocolate",
|
||||
onClick: (e) => console.log("Clicked Option 3 -> 3 -> 4 -> 2"),
|
||||
},
|
||||
{ label: "Milk Chocolate", onClick: (e) => console.log("Clicked Option 3 -> 3 -> 4 -> 3") },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Desserts",
|
||||
subItems: [
|
||||
{ label: "Cake", onClick: (e) => console.log("Clicked Option 4 -> 1") },
|
||||
{ label: "Ice Cream", onClick: (e) => console.log("Clicked Option 4 -> 2") },
|
||||
{ label: "Cookies", onClick: (e) => console.log("Clicked Option 4 -> 3") },
|
||||
{ label: "Brownies", onClick: (e) => console.log("Clicked Option 4 -> 4") },
|
||||
{ label: "Cupcakes", onClick: (e) => console.log("Clicked Option 4 -> 5") },
|
||||
{ label: "Donuts", onClick: (e) => console.log("Clicked Option 4 -> 6") },
|
||||
{ label: "Pie", onClick: (e) => console.log("Clicked Option 4 -> 7") },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const meta = {
|
||||
title: "Elements/Menu",
|
||||
component: Menu,
|
||||
args: {
|
||||
items: [],
|
||||
anchorRef: undefined,
|
||||
scopeRef: undefined,
|
||||
initialPosition: undefined,
|
||||
className: "",
|
||||
setVisibility: fn(),
|
||||
},
|
||||
argTypes: {
|
||||
items: {
|
||||
description: "Items of menu",
|
||||
},
|
||||
anchorRef: {
|
||||
description: "Element to attach the menu",
|
||||
},
|
||||
initialPosition: {
|
||||
description: "Initial position of the menu",
|
||||
},
|
||||
setVisibility: {
|
||||
description: "Visibility event handler",
|
||||
},
|
||||
scopeRef: {
|
||||
description: "Component that defines the boundaries of the menu",
|
||||
},
|
||||
className: {
|
||||
description: "Custom className",
|
||||
},
|
||||
},
|
||||
} satisfies Meta<typeof Menu>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const DefaultRendererLeftPositioned: Story = {
|
||||
render: (args) => {
|
||||
const anchorRef = useRef<HTMLButtonElement>(null);
|
||||
const scopeRef = useRef<HTMLDivElement>(null);
|
||||
const [isMenuVisible, setIsMenuVisible] = useState(false);
|
||||
|
||||
const handleAnchorClick = () => {
|
||||
setIsMenuVisible((prev) => !prev);
|
||||
};
|
||||
|
||||
const mapItemsWithClick = (items: any[]) => {
|
||||
return items.map((item) => ({
|
||||
...item,
|
||||
onClick: () => {
|
||||
if (item.onClick) {
|
||||
item.onClick();
|
||||
setIsMenuVisible(false);
|
||||
}
|
||||
},
|
||||
subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
|
||||
}));
|
||||
};
|
||||
|
||||
const modifiedArgs = {
|
||||
...args,
|
||||
items: mapItemsWithClick(args.items),
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={scopeRef}
|
||||
className="boundary"
|
||||
style={{ padding: "20px", height: "300px", border: "2px solid black", position: "relative" }}
|
||||
>
|
||||
<div style={{ position: "absolute", top: 0, left: 0 }}>
|
||||
<Button
|
||||
ref={anchorRef}
|
||||
className="grey border-radius-3 vertical-padding-6 horizontal-padding-8"
|
||||
style={{ borderColor: isMenuVisible ? "var(--accent-color)" : "transparent" }}
|
||||
onClick={handleAnchorClick}
|
||||
>
|
||||
Anchor Element
|
||||
<i className="fa-sharp fa-solid fa-angle-down" style={{ marginLeft: 4 }}></i>
|
||||
</Button>
|
||||
</div>
|
||||
{isMenuVisible && (
|
||||
<Menu
|
||||
{...modifiedArgs}
|
||||
setVisibility={(visible) => setIsMenuVisible(visible)}
|
||||
anchorRef={anchorRef}
|
||||
scopeRef={scopeRef}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
args: {
|
||||
items: items,
|
||||
},
|
||||
};
|
||||
|
||||
export const DefaultRendererRightPositioned: Story = {
|
||||
render: (args) => {
|
||||
const anchorRef = useRef<HTMLButtonElement>(null);
|
||||
const scopeRef = useRef<HTMLDivElement>(null);
|
||||
const [isMenuVisible, setIsMenuVisible] = useState(false);
|
||||
|
||||
const handleAnchorClick = () => {
|
||||
setIsMenuVisible((prev) => !prev);
|
||||
};
|
||||
|
||||
const mapItemsWithClick = (items: any[]) => {
|
||||
return items.map((item) => ({
|
||||
...item,
|
||||
onClick: () => {
|
||||
if (item.onClick) {
|
||||
item.onClick();
|
||||
}
|
||||
setIsMenuVisible(false);
|
||||
},
|
||||
subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
|
||||
}));
|
||||
};
|
||||
|
||||
const modifiedArgs = {
|
||||
...args,
|
||||
items: mapItemsWithClick(args.items),
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={scopeRef}
|
||||
className="boundary"
|
||||
style={{ padding: "20px", height: "300px", border: "2px solid black", position: "relative" }}
|
||||
>
|
||||
<div style={{ position: "absolute", top: 0, right: 0 }}>
|
||||
<Button
|
||||
ref={anchorRef}
|
||||
className="grey border-radius-3 vertical-padding-6 horizontal-padding-8"
|
||||
style={{ borderColor: isMenuVisible ? "var(--accent-color)" : "transparent" }}
|
||||
onClick={handleAnchorClick}
|
||||
>
|
||||
Anchor Element
|
||||
<i className="fa-sharp fa-solid fa-angle-down" style={{ marginLeft: 4 }}></i>
|
||||
</Button>
|
||||
</div>
|
||||
{isMenuVisible && (
|
||||
<Menu
|
||||
{...modifiedArgs}
|
||||
setVisibility={(visible) => setIsMenuVisible(visible)}
|
||||
anchorRef={anchorRef}
|
||||
scopeRef={scopeRef}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
args: {
|
||||
items: items,
|
||||
},
|
||||
};
|
||||
|
||||
export const DefaultRendererBottomRightPositioned: Story = {
|
||||
render: (args) => {
|
||||
const anchorRef = useRef<HTMLButtonElement>(null);
|
||||
const scopeRef = useRef<HTMLDivElement>(null);
|
||||
const [isMenuVisible, setIsMenuVisible] = useState(false);
|
||||
|
||||
const handleAnchorClick = () => {
|
||||
setIsMenuVisible((prev) => !prev);
|
||||
};
|
||||
|
||||
const mapItemsWithClick = (items: any[]) => {
|
||||
return items.map((item) => ({
|
||||
...item,
|
||||
onClick: () => {
|
||||
if (item.onClick) {
|
||||
item.onClick();
|
||||
}
|
||||
setIsMenuVisible(false);
|
||||
},
|
||||
subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
|
||||
}));
|
||||
};
|
||||
|
||||
const modifiedArgs = {
|
||||
...args,
|
||||
items: mapItemsWithClick(args.items),
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={scopeRef}
|
||||
className="boundary"
|
||||
style={{ padding: "20px", height: "300px", border: "2px solid black", position: "relative" }}
|
||||
>
|
||||
<div style={{ position: "absolute", bottom: 0, left: 0 }}>
|
||||
<Button
|
||||
ref={anchorRef}
|
||||
className="grey border-radius-3 vertical-padding-6 horizontal-padding-8"
|
||||
style={{ borderColor: isMenuVisible ? "var(--accent-color)" : "transparent" }}
|
||||
onClick={handleAnchorClick}
|
||||
>
|
||||
Anchor Element
|
||||
<i className="fa-sharp fa-solid fa-angle-down" style={{ marginLeft: 4 }}></i>
|
||||
</Button>
|
||||
</div>
|
||||
{isMenuVisible && (
|
||||
<Menu
|
||||
{...modifiedArgs}
|
||||
setVisibility={(visible) => setIsMenuVisible(visible)}
|
||||
anchorRef={anchorRef}
|
||||
scopeRef={scopeRef}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
args: {
|
||||
items: items,
|
||||
},
|
||||
};
|
||||
|
||||
export const DefaultRendererBottomLeftPositioned: Story = {
|
||||
render: (args) => {
|
||||
const anchorRef = useRef<HTMLButtonElement>(null);
|
||||
const scopeRef = useRef<HTMLDivElement>(null);
|
||||
const [isMenuVisible, setIsMenuVisible] = useState(false);
|
||||
|
||||
const handleAnchorClick = () => {
|
||||
setIsMenuVisible((prev) => !prev);
|
||||
};
|
||||
|
||||
const mapItemsWithClick = (items: any[]) => {
|
||||
return items.map((item) => ({
|
||||
...item,
|
||||
onClick: () => {
|
||||
if (item.onClick) {
|
||||
item.onClick();
|
||||
}
|
||||
setIsMenuVisible(false);
|
||||
},
|
||||
subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
|
||||
}));
|
||||
};
|
||||
|
||||
const modifiedArgs = {
|
||||
...args,
|
||||
items: mapItemsWithClick(args.items),
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={scopeRef}
|
||||
className="boundary"
|
||||
style={{ padding: "20px", height: "300px", border: "2px solid black", position: "relative" }}
|
||||
>
|
||||
<div style={{ position: "absolute", bottom: 0, right: 0 }}>
|
||||
<Button
|
||||
ref={anchorRef}
|
||||
className="grey border-radius-3 vertical-padding-6 horizontal-padding-8"
|
||||
style={{ borderColor: isMenuVisible ? "var(--accent-color)" : "transparent" }}
|
||||
onClick={handleAnchorClick}
|
||||
>
|
||||
Anchor Element
|
||||
<i className="fa-sharp fa-solid fa-angle-down" style={{ marginLeft: 4 }}></i>
|
||||
</Button>
|
||||
</div>
|
||||
{isMenuVisible && (
|
||||
<Menu
|
||||
{...modifiedArgs}
|
||||
setVisibility={(visible) => setIsMenuVisible(visible)}
|
||||
anchorRef={anchorRef}
|
||||
scopeRef={scopeRef}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
args: {
|
||||
items: items,
|
||||
},
|
||||
};
|
||||
|
||||
export const CustomRenderer: Story = {
|
||||
render: (args) => {
|
||||
const anchorRef = useRef<HTMLButtonElement>(null);
|
||||
const scopeRef = useRef<HTMLDivElement>(null);
|
||||
const [isMenuVisible, setIsMenuVisible] = useState(false);
|
||||
|
||||
const handleAnchorClick = () => {
|
||||
setIsMenuVisible((prev) => !prev);
|
||||
};
|
||||
|
||||
const mapItemsWithClick = (items: any[]) => {
|
||||
return items.map((item) => ({
|
||||
...item,
|
||||
onClick: () => {
|
||||
if (item.onClick) {
|
||||
item.onClick();
|
||||
}
|
||||
setIsMenuVisible(false);
|
||||
},
|
||||
subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
|
||||
}));
|
||||
};
|
||||
|
||||
const renderMenuItem = (item: any, props: any) => (
|
||||
<div {...props}>
|
||||
<strong>{item.label}</strong>
|
||||
{item.subItems && <span style={{ marginLeft: "10px", color: "#888" }}>▶</span>}
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderMenu = (subMenu: JSX.Element) => <div>{subMenu}</div>;
|
||||
|
||||
const modifiedArgs = {
|
||||
...args,
|
||||
items: mapItemsWithClick(args.items),
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={scopeRef}
|
||||
className="boundary"
|
||||
style={{ padding: "20px", height: "300px", border: "2px solid black" }}
|
||||
>
|
||||
<div style={{ height: "400px" }}>
|
||||
<Button
|
||||
ref={anchorRef}
|
||||
className="grey border-radius-3 vertical-padding-6 horizontal-padding-8"
|
||||
style={{ borderColor: isMenuVisible ? "var(--accent-color)" : "transparent" }}
|
||||
onClick={handleAnchorClick}
|
||||
>
|
||||
Anchor Element
|
||||
<i className="fa-sharp fa-solid fa-angle-down" style={{ marginLeft: 4 }}></i>
|
||||
</Button>
|
||||
</div>
|
||||
{isMenuVisible && (
|
||||
<Menu
|
||||
{...modifiedArgs}
|
||||
setVisibility={(visible) => setIsMenuVisible(visible)}
|
||||
anchorRef={anchorRef}
|
||||
scopeRef={scopeRef}
|
||||
renderMenu={renderMenu}
|
||||
renderMenuItem={renderMenuItem}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
args: {
|
||||
items: items,
|
||||
},
|
||||
};
|
||||
|
||||
export const ContextMenu: Story = {
|
||||
render: (args) => {
|
||||
const scopeRef = useRef<HTMLDivElement>(null);
|
||||
const [isMenuVisible, setIsMenuVisible] = useState(false);
|
||||
const [menuPosition, setMenuPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
|
||||
|
||||
const handleBlockRightClick = (e: MouseEvent) => {
|
||||
e.preventDefault(); // Prevent the default context menu
|
||||
setMenuPosition({ top: e.clientY, left: e.clientX });
|
||||
setIsMenuVisible(true);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const blockElement = scopeRef.current;
|
||||
if (blockElement) {
|
||||
blockElement.addEventListener("contextmenu", handleBlockRightClick);
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (blockElement) {
|
||||
blockElement.removeEventListener("contextmenu", handleBlockRightClick);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const mapItemsWithClick = (items: any[]) => {
|
||||
return items.map((item) => ({
|
||||
...item,
|
||||
onClick: () => {
|
||||
if (item.onClick) {
|
||||
item.onClick();
|
||||
setIsMenuVisible(false);
|
||||
}
|
||||
},
|
||||
subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
|
||||
}));
|
||||
};
|
||||
|
||||
const modifiedArgs = {
|
||||
...args,
|
||||
items: mapItemsWithClick(args.items),
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={scopeRef}
|
||||
className="boundary"
|
||||
style={{ padding: "20px", height: "300px", border: "2px solid black" }}
|
||||
>
|
||||
{isMenuVisible && (
|
||||
<Menu
|
||||
{...modifiedArgs}
|
||||
setVisibility={(visible) => setIsMenuVisible(visible)}
|
||||
initialPosition={menuPosition}
|
||||
scopeRef={scopeRef}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
args: {
|
||||
items: items,
|
||||
},
|
||||
};
|
438
frontend/app/element/menu.tsx
Normal file
438
frontend/app/element/menu.tsx
Normal file
@ -0,0 +1,438 @@
|
||||
// Copyright 2024, Command Line Inc.
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
import { useHeight } from "@/app/hook/useHeight";
|
||||
import { useWidth } from "@/app/hook/useWidth";
|
||||
import clsx from "clsx";
|
||||
import React, { memo, useEffect, useLayoutEffect, useRef, useState } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
|
||||
import "./menu.less";
|
||||
|
||||
type MenuItem = {
|
||||
label: string;
|
||||
subItems?: MenuItem[];
|
||||
onClick?: (e) => void;
|
||||
};
|
||||
|
||||
const SubMenu = memo(
|
||||
({
|
||||
subItems,
|
||||
parentKey,
|
||||
subMenuPosition,
|
||||
visibleSubMenus,
|
||||
hoveredItems,
|
||||
subMenuRefs,
|
||||
handleMouseEnterItem,
|
||||
handleOnClick,
|
||||
renderMenu,
|
||||
renderMenuItem,
|
||||
}: {
|
||||
subItems: MenuItem[];
|
||||
parentKey: string;
|
||||
subMenuPosition: {
|
||||
[key: string]: { top: number; left: number; label: string };
|
||||
};
|
||||
visibleSubMenus: { [key: string]: any };
|
||||
hoveredItems: string[];
|
||||
subMenuRefs: React.MutableRefObject<{ [key: string]: React.RefObject<HTMLDivElement> }>;
|
||||
handleMouseEnterItem: (
|
||||
event: React.MouseEvent<HTMLDivElement, MouseEvent>,
|
||||
parentKey: string | null,
|
||||
index: number,
|
||||
item: MenuItem
|
||||
) => void;
|
||||
handleOnClick: (e: React.MouseEvent<HTMLDivElement>, item: MenuItem) => void;
|
||||
renderMenu?: (subMenu: JSX.Element, props: any) => JSX.Element;
|
||||
renderMenuItem?: (item: MenuItem, props: any) => JSX.Element;
|
||||
}) => {
|
||||
subItems.forEach((_, idx) => {
|
||||
const newKey = `${parentKey}-${idx}`;
|
||||
if (!subMenuRefs.current[newKey]) {
|
||||
subMenuRefs.current[newKey] = React.createRef<HTMLDivElement>();
|
||||
}
|
||||
});
|
||||
|
||||
const position = subMenuPosition[parentKey];
|
||||
const isPositioned = position && position.top !== undefined && position.left !== undefined;
|
||||
|
||||
const subMenu = (
|
||||
<div
|
||||
className="menu sub-menu"
|
||||
ref={subMenuRefs.current[parentKey]}
|
||||
style={{
|
||||
top: position?.top || 0,
|
||||
left: position?.left || 0,
|
||||
position: "absolute",
|
||||
zIndex: 1000,
|
||||
visibility: visibleSubMenus[parentKey]?.visible && isPositioned ? "visible" : "hidden",
|
||||
}}
|
||||
>
|
||||
{subItems.map((item, idx) => {
|
||||
const newKey = `${parentKey}-${idx}`;
|
||||
const isActive = hoveredItems.includes(newKey);
|
||||
|
||||
const menuItemProps = {
|
||||
className: clsx("menu-item", { active: isActive }),
|
||||
onMouseEnter: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
|
||||
handleMouseEnterItem(event, parentKey, idx, item),
|
||||
onClick: (e: React.MouseEvent<HTMLDivElement>) => handleOnClick(e, item),
|
||||
};
|
||||
|
||||
const renderedItem = renderMenuItem ? (
|
||||
renderMenuItem(item, menuItemProps) // Remove portal here
|
||||
) : (
|
||||
<div key={newKey} {...menuItemProps}>
|
||||
<span className="label">{item.label}</span>
|
||||
{item.subItems && <i className="fa-sharp fa-solid fa-chevron-right"></i>}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<React.Fragment key={newKey}>
|
||||
{renderedItem}
|
||||
{visibleSubMenus[newKey]?.visible && item.subItems && (
|
||||
<SubMenu
|
||||
subItems={item.subItems}
|
||||
parentKey={newKey}
|
||||
subMenuPosition={subMenuPosition}
|
||||
visibleSubMenus={visibleSubMenus}
|
||||
hoveredItems={hoveredItems}
|
||||
handleMouseEnterItem={handleMouseEnterItem}
|
||||
handleOnClick={handleOnClick}
|
||||
subMenuRefs={subMenuRefs}
|
||||
renderMenu={renderMenu}
|
||||
renderMenuItem={renderMenuItem}
|
||||
/>
|
||||
)}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
|
||||
return ReactDOM.createPortal(renderMenu ? renderMenu(subMenu, { parentKey }) : subMenu, document.body);
|
||||
}
|
||||
);
|
||||
|
||||
const Menu = memo(
|
||||
({
|
||||
items,
|
||||
anchorRef,
|
||||
scopeRef,
|
||||
initialPosition,
|
||||
className,
|
||||
setVisibility,
|
||||
renderMenu,
|
||||
renderMenuItem,
|
||||
}: {
|
||||
items: MenuItem[];
|
||||
anchorRef: React.RefObject<any>;
|
||||
scopeRef?: React.RefObject<HTMLElement>;
|
||||
initialPosition?: { top: number; left: number };
|
||||
className?: string;
|
||||
setVisibility: (_: boolean) => void;
|
||||
renderMenu?: (subMenu: JSX.Element, props: any) => JSX.Element;
|
||||
renderMenuItem?: (item: MenuItem, props: any) => JSX.Element;
|
||||
}) => {
|
||||
const [visibleSubMenus, setVisibleSubMenus] = useState<{ [key: string]: any }>({});
|
||||
const [hoveredItems, setHoveredItems] = useState<string[]>([]);
|
||||
const [subMenuPosition, setSubMenuPosition] = useState<{
|
||||
[key: string]: { top: number; left: number; label: string };
|
||||
}>({});
|
||||
const [position, setPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
|
||||
const menuRef = useRef<HTMLDivElement>(null);
|
||||
const subMenuRefs = useRef<{ [key: string]: React.RefObject<HTMLDivElement> }>({});
|
||||
|
||||
const width = useWidth(scopeRef);
|
||||
const height = useHeight(scopeRef);
|
||||
|
||||
items.forEach((_, idx) => {
|
||||
const key = `${idx}`;
|
||||
if (!subMenuRefs.current[key]) {
|
||||
subMenuRefs.current[key] = React.createRef<HTMLDivElement>();
|
||||
}
|
||||
});
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const shadowOffset = 10; // Adjust for box shadow space
|
||||
|
||||
if (initialPosition) {
|
||||
// Adjust position if initialPosition is provided
|
||||
let { top, left } = initialPosition;
|
||||
|
||||
const scrollTop = window.scrollY || document.documentElement.scrollTop;
|
||||
const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
|
||||
|
||||
const menuWidth = menuRef.current?.offsetWidth || 0;
|
||||
const menuHeight = menuRef.current?.offsetHeight || 0;
|
||||
|
||||
const boundaryTop = 0;
|
||||
const boundaryLeft = 0;
|
||||
const boundaryRight = window.innerWidth + scrollLeft;
|
||||
const boundaryBottom = window.innerHeight + scrollTop;
|
||||
|
||||
// Adjust if the menu overflows the right boundary
|
||||
if (left + menuWidth > boundaryRight) {
|
||||
left = boundaryRight - menuWidth - shadowOffset; // Shift left more for shadow
|
||||
}
|
||||
|
||||
// Adjust if the menu overflows the bottom boundary: move the menu upwards so its bottom edge aligns with the initial position
|
||||
if (top + menuHeight > boundaryBottom) {
|
||||
top = initialPosition.top - menuHeight - shadowOffset; // Shift up for shadow
|
||||
}
|
||||
|
||||
// Adjust if the menu overflows the left boundary
|
||||
if (left < boundaryLeft) {
|
||||
left = boundaryLeft + shadowOffset; // Add shadow offset from the left edge
|
||||
}
|
||||
|
||||
// Adjust if the menu overflows the top boundary
|
||||
if (top < boundaryTop) {
|
||||
top = boundaryTop + shadowOffset; // Add shadow offset from the top edge
|
||||
}
|
||||
|
||||
setPosition({ top, left });
|
||||
} else if (anchorRef.current && menuRef.current) {
|
||||
// Calculate position based on anchorRef if it exists
|
||||
const anchorRect = anchorRef.current.getBoundingClientRect();
|
||||
const scrollTop = window.scrollY || document.documentElement.scrollTop;
|
||||
const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
|
||||
|
||||
let top = anchorRect.bottom + scrollTop;
|
||||
let left = anchorRect.left + scrollLeft;
|
||||
|
||||
const menuWidth = menuRef.current.offsetWidth;
|
||||
const menuHeight = menuRef.current.offsetHeight;
|
||||
|
||||
const boundaryTop = 0;
|
||||
const boundaryLeft = 0;
|
||||
const boundaryRight = window.innerWidth + scrollLeft;
|
||||
const boundaryBottom = window.innerHeight + scrollTop;
|
||||
|
||||
// Adjust if the menu overflows the right boundary
|
||||
if (left + menuWidth > boundaryRight) {
|
||||
left = boundaryRight - menuWidth;
|
||||
}
|
||||
|
||||
// Adjust if the menu overflows the bottom boundary: move the menu upwards so its bottom edge aligns with the anchor top
|
||||
if (top + menuHeight > boundaryBottom) {
|
||||
top = anchorRect.top + scrollTop - menuHeight;
|
||||
}
|
||||
|
||||
// Adjust if the menu overflows the left boundary
|
||||
if (left < boundaryLeft) {
|
||||
left = boundaryLeft;
|
||||
}
|
||||
|
||||
// Adjust if the menu overflows the top boundary
|
||||
if (top < boundaryTop) {
|
||||
top = boundaryTop;
|
||||
}
|
||||
|
||||
setPosition({ top, left });
|
||||
} else {
|
||||
console.warn("Neither initialPosition nor anchorRef provided. Defaulting to { top: 0, left: 0 }.");
|
||||
}
|
||||
}, [width, height, initialPosition]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
const isClickInsideDropdown = menuRef.current && menuRef.current.contains(event.target as Node);
|
||||
|
||||
const isClickInsideAnchor = anchorRef?.current
|
||||
? anchorRef.current.contains(event.target as Node)
|
||||
: false;
|
||||
|
||||
const isClickInsideSubMenus = Object.keys(subMenuRefs.current).some(
|
||||
(key) =>
|
||||
subMenuRefs.current[key]?.current &&
|
||||
subMenuRefs.current[key]?.current.contains(event.target as Node)
|
||||
);
|
||||
|
||||
if (!isClickInsideDropdown && !isClickInsideAnchor && !isClickInsideSubMenus) {
|
||||
setVisibility(false);
|
||||
}
|
||||
};
|
||||
|
||||
scopeRef?.current?.addEventListener("mousedown", handleClickOutside);
|
||||
|
||||
return () => {
|
||||
scopeRef?.current?.removeEventListener("mousedown", handleClickOutside);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Position submenus based on available space and scroll position
|
||||
const handleSubMenuPosition = (
|
||||
key: string,
|
||||
itemRect: DOMRect,
|
||||
parentRef: React.RefObject<HTMLDivElement>,
|
||||
label: string
|
||||
) => {
|
||||
setTimeout(() => {
|
||||
const subMenuRef = subMenuRefs.current[key]?.current;
|
||||
if (!subMenuRef) return;
|
||||
|
||||
const scrollTop = window.scrollY || document.documentElement.scrollTop;
|
||||
const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
|
||||
|
||||
const submenuWidth = subMenuRef.offsetWidth;
|
||||
const submenuHeight = subMenuRef.offsetHeight;
|
||||
|
||||
let left = itemRect.right + scrollLeft - 2; // Adjust for horizontal scroll
|
||||
let top = itemRect.top - 2 + scrollTop; // Adjust for vertical scroll
|
||||
|
||||
// Adjust to the left if overflowing the right boundary
|
||||
if (left + submenuWidth > window.innerWidth + scrollLeft) {
|
||||
left = itemRect.left + scrollLeft - submenuWidth;
|
||||
}
|
||||
|
||||
// Adjust if the submenu overflows the bottom boundary
|
||||
if (top + submenuHeight > window.innerHeight + scrollTop) {
|
||||
top = window.innerHeight + scrollTop - submenuHeight - 10;
|
||||
}
|
||||
|
||||
setSubMenuPosition((prev) => ({
|
||||
...prev,
|
||||
[key]: { top, left, label },
|
||||
}));
|
||||
}, 0);
|
||||
};
|
||||
|
||||
const handleMouseEnterItem = (
|
||||
event: React.MouseEvent<HTMLDivElement, MouseEvent>,
|
||||
parentKey: string | null,
|
||||
index: number,
|
||||
item: MenuItem
|
||||
) => {
|
||||
event.stopPropagation();
|
||||
|
||||
const key = parentKey ? `${parentKey}-${index}` : `${index}`;
|
||||
|
||||
setVisibleSubMenus((prev) => {
|
||||
const updatedState = { ...prev };
|
||||
updatedState[key] = { visible: true, label: item.label };
|
||||
|
||||
const ancestors = key.split("-").reduce((acc, part, idx) => {
|
||||
if (idx === 0) return [part];
|
||||
return [...acc, `${acc[idx - 1]}-${part}`];
|
||||
}, [] as string[]);
|
||||
|
||||
ancestors.forEach((ancestorKey) => {
|
||||
if (updatedState[ancestorKey]) {
|
||||
updatedState[ancestorKey].visible = true;
|
||||
}
|
||||
});
|
||||
|
||||
for (const pkey in updatedState) {
|
||||
if (!ancestors.includes(pkey) && pkey !== key) {
|
||||
updatedState[pkey].visible = false;
|
||||
}
|
||||
}
|
||||
|
||||
return updatedState;
|
||||
});
|
||||
|
||||
const newHoveredItems = key.split("-").reduce((acc, part, idx) => {
|
||||
if (idx === 0) return [part];
|
||||
return [...acc, `${acc[idx - 1]}-${part}`];
|
||||
}, [] as string[]);
|
||||
|
||||
setHoveredItems(newHoveredItems);
|
||||
|
||||
const itemRect = event.currentTarget.getBoundingClientRect();
|
||||
handleSubMenuPosition(key, itemRect, menuRef, item.label);
|
||||
};
|
||||
|
||||
const handleOnClick = (e: React.MouseEvent<HTMLDivElement>, item: MenuItem) => {
|
||||
e.stopPropagation();
|
||||
item.onClick && item.onClick(e);
|
||||
};
|
||||
|
||||
// const handleKeyDown = useCallback(
|
||||
// (waveEvent: WaveKeyboardEvent): boolean => {
|
||||
// if (keyutil.checkKeyPressed(waveEvent, "ArrowDown")) {
|
||||
// setFocusedIndex((prev) => (prev + 1) % items.length); // Move down
|
||||
// return true;
|
||||
// }
|
||||
// if (keyutil.checkKeyPressed(waveEvent, "ArrowUp")) {
|
||||
// setFocusedIndex((prev) => (prev - 1 + items.length) % items.length); // Move up
|
||||
// return true;
|
||||
// }
|
||||
// if (keyutil.checkKeyPressed(waveEvent, "ArrowRight")) {
|
||||
// if (items[focusedIndex].subItems) {
|
||||
// setSubmenuOpen(focusedIndex); // Open the submenu
|
||||
// }
|
||||
// return true;
|
||||
// }
|
||||
// if (keyutil.checkKeyPressed(waveEvent, "ArrowLeft")) {
|
||||
// if (submenuOpen !== null) {
|
||||
// setSubmenuOpen(null); // Close the submenu
|
||||
// }
|
||||
// return true;
|
||||
// }
|
||||
// if (keyutil.checkKeyPressed(waveEvent, "Enter") || keyutil.checkKeyPressed(waveEvent, " ")) {
|
||||
// if (items[focusedIndex].onClick) {
|
||||
// items[focusedIndex].onClick(); // Trigger click
|
||||
// }
|
||||
// return true;
|
||||
// }
|
||||
// if (keyutil.checkKeyPressed(waveEvent, "Escape")) {
|
||||
// setVisibility(false); // Close the menu
|
||||
// return true;
|
||||
// }
|
||||
// return false;
|
||||
// },
|
||||
// [focusedIndex, submenuOpen, items, setVisibility]
|
||||
// );
|
||||
|
||||
const menuMenu = (
|
||||
<div className={clsx("menu", className)} ref={menuRef} style={{ top: position.top, left: position.left }}>
|
||||
{items.map((item, index) => {
|
||||
const key = `${index}`;
|
||||
const isActive = hoveredItems.includes(key);
|
||||
|
||||
const menuItemProps = {
|
||||
className: clsx("menu-item", { active: isActive }),
|
||||
onMouseEnter: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
|
||||
handleMouseEnterItem(event, null, index, item),
|
||||
onClick: (e: React.MouseEvent<HTMLDivElement>) => handleOnClick(e, item),
|
||||
};
|
||||
|
||||
const renderedItem = renderMenuItem ? (
|
||||
renderMenuItem(item, menuItemProps)
|
||||
) : (
|
||||
<div key={key} {...menuItemProps}>
|
||||
<span className="label">{item.label}</span>
|
||||
{item.subItems && <i className="fa-sharp fa-solid fa-chevron-right"></i>}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<React.Fragment key={key}>
|
||||
{renderedItem}
|
||||
{visibleSubMenus[key]?.visible && item.subItems && (
|
||||
<SubMenu
|
||||
subItems={item.subItems}
|
||||
parentKey={key}
|
||||
subMenuPosition={subMenuPosition}
|
||||
visibleSubMenus={visibleSubMenus}
|
||||
hoveredItems={hoveredItems}
|
||||
handleMouseEnterItem={handleMouseEnterItem}
|
||||
handleOnClick={handleOnClick}
|
||||
subMenuRefs={subMenuRefs}
|
||||
renderMenu={renderMenu}
|
||||
renderMenuItem={renderMenuItem}
|
||||
/>
|
||||
)}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
|
||||
return ReactDOM.createPortal(renderMenu ? renderMenu(menuMenu, { parentKey: null }) : menuMenu, document.body);
|
||||
}
|
||||
);
|
||||
|
||||
export { Menu };
|
@ -1,3 +1,6 @@
|
||||
// Copyright 2024, Command Line Inc.
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
import { Input } from "@/app/element/input";
|
||||
import { InputDecoration } from "@/app/element/inputdecoration";
|
||||
import { useDimensions } from "@/app/hook/useDimensions";
|
||||
|
Loading…
Reference in New Issue
Block a user