Merge pull request #31053 from software-mansion-labs/ts-migration/bas…

…e-mini-context-menu-item-component

[TS migration] Migrate 'BaseMiniContextMenuItem.js' component to TypeScript

src/components/BaseMiniContextMenuItem.js → src/components/BaseMiniContextMenuItem.tsx

@@ -1,7 +1,5 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import {View} from 'react-native';
-import _ from 'underscore';
+import React, {ForwardedRef} from 'react';
+import {PressableStateCallbackType, View} from 'react-native';
 import DomUtils from '@libs/DomUtils';
 import getButtonState from '@libs/getButtonState';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
@@ -11,95 +9,77 @@ import variables from '@styles/variables';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 import Tooltip from './Tooltip/PopoverAnchorTooltip';
 
-const propTypes = {
+type BaseMiniContextMenuItemProps = {
     /**
      * Text to display when hovering the menu item
      */
-    tooltipText: PropTypes.string.isRequired,
+    tooltipText: string;
 
     /**
      * Callback to fire on press
      */
-    onPress: PropTypes.func.isRequired,
+    onPress: () => void;
 
     /**
      * The children to display within the menu item
      */
-    children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+    children: React.ReactNode | ((state: PressableStateCallbackType) => React.ReactNode);
 
     /**
      * Whether the button should be in the active state
      */
-    isDelayButtonStateComplete: PropTypes.bool,
-
-    /**
-     * A ref to forward to the Pressable
-     */
-    innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-};
-
-const defaultProps = {
-    isDelayButtonStateComplete: true,
-    innerRef: () => {},
+    isDelayButtonStateComplete: boolean;
 };
 
 /**
  * Component that renders a mini context menu item with a
  * pressable. Also renders a tooltip when hovering the item.
- * @param {Object} props
- * @returns {JSX.Element}
  */
-function BaseMiniContextMenuItem(props) {
+function BaseMiniContextMenuItem({tooltipText, onPress, children, isDelayButtonStateComplete = true}: BaseMiniContextMenuItemProps, ref: ForwardedRef<View>) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     return (
-        <Tooltip text={props.tooltipText}>
+        <Tooltip
+            text={tooltipText}
+            shouldRender
+        >
             <PressableWithoutFeedback
-                ref={props.innerRef}
-                onPress={props.onPress}
-                onMouseDown={(e) => {
+                ref={ref}
+                onPress={onPress}
+                onMouseDown={(event) => {
                     if (!ReportActionComposeFocusManager.isFocused() && !ReportActionComposeFocusManager.isEditFocused()) {
-                        DomUtils.getActiveElement().blur();
+                        const activeElement = DomUtils.getActiveElement();
+                        if (activeElement instanceof HTMLElement) {
+                            activeElement?.blur();
+                        }
                         return;
                     }
 
                     // Allow text input blur on right click
-                    if (!e || e.button === 2) {
+                    if (!event || event.button === 2) {
                         return;
                     }
 
                     // Prevent text input blur on left click
-                    e.preventDefault();
+                    event.preventDefault();
                 }}
-                accessibilityLabel={props.tooltipText}
+                accessibilityLabel={tooltipText}
                 style={({hovered, pressed}) => [
                     styles.reportActionContextMenuMiniButton,
-                    StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, props.isDelayButtonStateComplete)),
-                    props.isDelayButtonStateComplete && styles.cursorDefault,
+                    StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, isDelayButtonStateComplete)),
+                    isDelayButtonStateComplete && styles.cursorDefault,
                 ]}
             >
                 {(pressableState) => (
                     <View style={[StyleUtils.getWidthAndHeightStyle(variables.iconSizeNormal), styles.alignItemsCenter, styles.justifyContentCenter]}>
-                        {_.isFunction(props.children) ? props.children(pressableState) : props.children}
+                        {typeof children === 'function' ? children(pressableState) : children}
                     </View>
                 )}
             </PressableWithoutFeedback>
         </Tooltip>
     );
 }
 
-BaseMiniContextMenuItem.propTypes = propTypes;
-BaseMiniContextMenuItem.defaultProps = defaultProps;
 BaseMiniContextMenuItem.displayName = 'BaseMiniContextMenuItem';
 
-const BaseMiniContextMenuItemWithRef = React.forwardRef((props, ref) => (
-    <BaseMiniContextMenuItem
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        innerRef={ref}
-    />
-));
-
-BaseMiniContextMenuItemWithRef.displayName = 'BaseMiniContextMenuItemWithRef';
-
-export default BaseMiniContextMenuItemWithRef;
+export default React.forwardRef(BaseMiniContextMenuItem);