diff --git a/src/MenuItem.tsx b/src/MenuItem.tsx new file mode 100644 index 0000000..487e2e8 --- /dev/null +++ b/src/MenuItem.tsx @@ -0,0 +1,88 @@ +import { h } from 'preact' +import type { ComponentChildren } from 'preact' + +export type MenuItemProps = { + icon?: ComponentChildren + children: ComponentChildren + onClick: () => void + disabled?: boolean +} + +export default function MenuItem ({ icon, children, onClick, disabled = false }: MenuItemProps) { + return ( +
{ + if (!disabled && (e.key === 'Enter' || e.key === ' ')) { + e.preventDefault() + onClick() + } + }} + > + {icon && ( +
+ {icon} +
+ )} +
+ {children} +
+ + +
+ ) +} diff --git a/src/ui.tsx b/src/ui.tsx index d54d2f7..9d892ae 100644 --- a/src/ui.tsx +++ b/src/ui.tsx @@ -5,7 +5,6 @@ import { Muted, VerticalSpace, Divider, - Button, Stack, Modal, IconButton, @@ -18,6 +17,7 @@ import { import { emit, on } from '@create-figma-plugin/utilities' import { h, Fragment } from 'preact' import { useState, useEffect, useRef } from 'preact/hooks' +import MenuItem from './MenuItem' const MIN_WINDOW_SIZE = { width: 320, height: 200 } // No static max: "maximize" targets the whole viewport (maxViewport from main), @@ -353,22 +353,27 @@ function Plugin () { Version {PLUGIN_VERSION} - {/* More-menu modal (opened by the three-dots button in the header) — stubs for now */} - {moreOpen && ( - - - Stub actions - - + {/* More-menu modal — old-plugin style: library Modal + Container + Stack of MenuItem */} + + + + + } + onClick={function () { setMoreOpen(false) /* stub */ }} + > + Stub action 1 + + } + onClick={function () { setMoreOpen(false) /* stub */ }} + > + Stub action 2 + - - )} + + + {/* Decorative drag-handle icon in the bottom-right corner (as in the old plugin). pointerEvents:none — the actual drag is caught by the invisible corner div. */}