mirror of
https://github.com/wavetermdev/waveterm.git
synced 2025-02-12 01:01:50 +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;
|
||||
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 = {
|
||||
render: (args) => {
|
||||
const scopeRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user