mirror of
https://github.com/wavetermdev/waveterm.git
synced 2025-02-16 01:41:23 +01:00
context menu stories cleanup
This commit is contained in:
Red Adaya
parent
f7d8ff3665
commit
4b8520b9fa
@ -91,322 +91,6 @@ const meta = {
|
|||||||
export default meta;
|
export default meta;
|
||||||
type Story = StoryObj<typeof 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 RightClickMenu: Story = {
|
export const RightClickMenu: Story = {
|
||||||
render: (args) => {
|
render: (args) => {
|
||||||
const scopeRef = useRef<HTMLDivElement>(null);
|
const scopeRef = useRef<HTMLDivElement>(null);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user