Convert DropdownMenu to typescript

app/soapbox/components/status_action_bar.tsx

@@ -24,6 +24,7 @@ import { IconButton, Hoverable } from './ui';
 
 import type { History } from 'history';
 import type { AnyAction, Dispatch } from 'redux';
+import type { Menu } from 'soapbox/components/dropdown_menu';
 import type { RootState } from 'soapbox/store';
 import type { Status } from 'soapbox/types/entities';
 import type { Features } from 'soapbox/utils/features';
@@ -367,7 +368,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
     const ownAccount = status.getIn(['account', 'id']) === me;
     const username = String(status.getIn(['account', 'username']));
 
-    const menu = [];
+    const menu: Menu = [];
 
     menu.push({
       text: intl.formatMessage(messages.open),
@@ -487,13 +488,13 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
           text: intl.formatMessage(messages.admin_account, { name: username }),
           href: `/pleroma/admin/#/users/${status.getIn(['account', 'id'])}/`,
           icon: require('@tabler/icons/icons/gavel.svg'),
-          action: (event: Event) => event.stopPropagation(),
+          action: (event) => event.stopPropagation(),
         });
         menu.push({
           text: intl.formatMessage(messages.admin_status),
           href: `/pleroma/admin/#/statuses/${status.get('id')}/`,
           icon: require('@tabler/icons/icons/pencil.svg'),
-          action: (event: Event) => event.stopPropagation(),
+          action: (event) => event.stopPropagation(),
         });
       }
 
@@ -607,13 +608,11 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
       reblogButton = (
         <DropdownMenuContainer
           items={reblogMenu}
-          // @ts-ignore
           disabled={!publicStatus}
-          active={status.get('reblogged')}
-          pressed={status.get('reblogged')}
+          active={status.reblogged}
+          pressed={status.reblogged}
           title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)}
           src={reblogIcon}
-          direction='right'
           onShiftClick={this.handleReblogClick}
         />
       );
@@ -714,11 +713,9 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
         <StatusAction>
           <DropdownMenuContainer
             items={menu}
-            // @ts-ignore
             title={intl.formatMessage(messages.more)}
             status={status}
             src={require('@tabler/icons/icons/dots.svg')}
-            direction='right'
           />
         </StatusAction>
       </div>

app/soapbox/components/ui/icon-button/icon-button.tsx

@@ -4,15 +4,10 @@ import InlineSVG from 'react-inlinesvg';
 
 import Text from '../text/text';
 
-interface IIconButton {
-  alt?: string,
-  className?: string,
+interface IIconButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   iconClassName?: string,
-  disabled?: boolean,
   src: string,
-  onClick?: React.EventHandler<React.MouseEvent>,
   text?: string,
-  title?: string,
   transparent?: boolean
 }
 

app/soapbox/containers/dropdown_menu_container.ts

@@ -0,0 +1,38 @@
+import { connect } from 'react-redux';
+
+import { openDropdownMenu, closeDropdownMenu } from '../actions/dropdown_menu';
+import { openModal, closeModal } from '../actions/modals';
+import DropdownMenu from '../components/dropdown_menu';
+import { isUserTouching } from '../is_mobile';
+
+import type { Dispatch } from 'redux';
+import type { DropdownPlacement, IDropdown } from 'soapbox/components/dropdown_menu';
+import type { RootState } from 'soapbox/store';
+
+const mapStateToProps = (state: RootState) => ({
+  isModalOpen: Boolean(state.modals.size && state.modals.last().modalType === 'ACTIONS'),
+  dropdownPlacement: state.dropdown_menu.get('placement'),
+  openDropdownId: state.dropdown_menu.get('openId'),
+  openedViaKeyboard: state.dropdown_menu.get('keyboard'),
+});
+
+const mapDispatchToProps = (dispatch: Dispatch, { status, items }: Partial<IDropdown>) => ({
+  onOpen(
+    id: number,
+    onItemClick: React.EventHandler<React.MouseEvent | React.KeyboardEvent>,
+    dropdownPlacement: DropdownPlacement,
+    keyboard: boolean,
+  ) {
+    dispatch(isUserTouching() ? openModal('ACTIONS', {
+      status,
+      actions: items,
+      onClick: onItemClick,
+    }) : openDropdownMenu(id, dropdownPlacement, keyboard));
+  },
+  onClose(id: number) {
+    dispatch(closeModal('ACTIONS'));
+    dispatch(closeDropdownMenu(id));
+  },
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(DropdownMenu);