fix(striker-ui): pass button props in button with menu

main
Tsu-ba-me 1 year ago
parent afda1f6723
commit f0050829b4
  1. 16
      striker-ui/components/ButtonWithMenu.tsx
  2. 14
      striker-ui/components/ServerMenu.tsx
  3. 1
      striker-ui/pages/index.tsx
  4. 2
      striker-ui/types/ButtonWithMenu.d.ts

@ -9,6 +9,8 @@ import Menu from './Menu';
const ButtonWithMenu: FC<ButtonWithMenuProps> = (props) => { const ButtonWithMenu: FC<ButtonWithMenuProps> = (props) => {
const { const {
children, children,
containedButtonProps,
iconButtonProps,
muiMenuProps, muiMenuProps,
onButtonClick, onButtonClick,
onItemClick, onItemClick,
@ -38,16 +40,24 @@ const ButtonWithMenu: FC<ButtonWithMenuProps> = (props) => {
const buttonElement = useMemo(() => { const buttonElement = useMemo(() => {
if (variant === 'contained') { if (variant === 'contained') {
return ( return (
<ContainedButton onClick={buttonClickHandler}> <ContainedButton onClick={buttonClickHandler} {...containedButtonProps}>
{buttonContent} {buttonContent}
</ContainedButton> </ContainedButton>
); );
} }
return ( return (
<IconButton onClick={buttonClickHandler}>{buttonContent}</IconButton> <IconButton onClick={buttonClickHandler} {...iconButtonProps}>
{buttonContent}
</IconButton>
); );
}, [buttonClickHandler, buttonContent, variant]); }, [
buttonClickHandler,
buttonContent,
containedButtonProps,
iconButtonProps,
variant,
]);
const itemClickHandler = useCallback< const itemClickHandler = useCallback<
Exclude<MenuProps['onItemClick'], undefined> Exclude<MenuProps['onItemClick'], undefined>

@ -9,7 +9,18 @@ import { BodyText } from './Text';
import useConfirmDialog from '../hooks/useConfirmDialog'; import useConfirmDialog from '../hooks/useConfirmDialog';
const ServerMenu: FC<ServerMenuProps> = (props) => { const ServerMenu: FC<ServerMenuProps> = (props) => {
const { serverName, serverState, serverUuid } = props; const {
// Props to ignore, for now:
getItemDisabled,
items,
onItemClick,
renderItem,
// ----------
serverName,
serverState,
serverUuid,
...buttonWithMenuProps
} = props;
const { const {
confirmDialog, confirmDialog,
@ -119,6 +130,7 @@ const ServerMenu: FC<ServerMenuProps> = (props) => {
</BodyText> </BodyText>
); );
}} }}
{...buttonWithMenuProps}
/> />
{confirmDialog} {confirmDialog}
</Box> </Box>

@ -81,6 +81,7 @@ const createServerPreviewContainer = (servers: ServerListItem[]) => (
{anvilName} {anvilName}
</Link>, </Link>,
<ServerMenu <ServerMenu
iconButtonProps={{ size: 'small' }}
key={`server_${serverUUID}_power_options`} key={`server_${serverUUID}_power_options`}
serverName={serverName} serverName={serverName}
serverState={serverState} serverState={serverState}

@ -1,4 +1,6 @@
type ButtonWithMenuOptionalProps<T = unknown> = Omit<MenuProps<T>, 'open'> & { type ButtonWithMenuOptionalProps<T = unknown> = Omit<MenuProps<T>, 'open'> & {
containedButtonProps?: Partial<ContainedButtonProps>;
iconButtonProps?: Partial<import('../components/IconButton').IconButtonProps>;
onButtonClick?: import('react').MouseEventHandler<HTMLButtonElement>; onButtonClick?: import('react').MouseEventHandler<HTMLButtonElement>;
variant?: 'contained' | 'icon'; variant?: 'contained' | 'icon';
}; };

Loading…
Cancel
Save