2024-05-18 12:56:57 -04:00
|
|
|
import React, { useRef, useEffect, forwardRef, Ref, useMemo, useCallback } from 'react';
|
2024-05-18 12:48:03 -04:00
|
|
|
import { Pressable, View } from 'react-native';
|
|
|
|
import showPopupMenu, { OnPopupMenuItemSelect, PopupMenuItem } from '../blue_modules/showPopupMenu.android';
|
|
|
|
import { ToolTipMenuProps } from './types';
|
|
|
|
|
|
|
|
const BaseToolTipMenu = (props: ToolTipMenuProps, ref: Ref<{ dismissMenu?: () => void }>) => {
|
|
|
|
const menuRef = useRef<View>(null);
|
|
|
|
const {
|
|
|
|
actions,
|
|
|
|
children,
|
|
|
|
onPressMenuItem,
|
|
|
|
isMenuPrimaryAction = false,
|
|
|
|
buttonStyle = {},
|
|
|
|
enableAndroidRipple = true,
|
|
|
|
disabled = false,
|
|
|
|
onPress,
|
|
|
|
...restProps
|
|
|
|
} = props;
|
|
|
|
|
2024-05-18 12:56:57 -04:00
|
|
|
const handleToolTipSelection = useCallback<OnPopupMenuItemSelect>(
|
|
|
|
(selection: PopupMenuItem) => {
|
|
|
|
if (selection.id) {
|
|
|
|
onPressMenuItem(selection.id);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
[onPressMenuItem],
|
|
|
|
);
|
2024-05-18 12:48:03 -04:00
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (ref && menuRef.current) {
|
|
|
|
(ref as React.MutableRefObject<{ dismissMenu?: () => void }>).current.dismissMenu = dismissMenu;
|
|
|
|
}
|
2024-05-18 12:56:57 -04:00
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
2024-05-18 12:48:03 -04:00
|
|
|
}, [ref]);
|
|
|
|
|
2024-05-18 12:56:57 -04:00
|
|
|
const dismissMenu = useCallback(() => {
|
2024-05-18 12:48:03 -04:00
|
|
|
console.log('dismissMenu Not implemented');
|
2024-05-18 12:56:57 -04:00
|
|
|
}, []);
|
2024-05-18 12:48:03 -04:00
|
|
|
|
2024-05-18 12:56:57 -04:00
|
|
|
const menuItems = useMemo(() => {
|
2024-05-18 12:48:03 -04:00
|
|
|
const menu: { id: string; label: string }[] = [];
|
|
|
|
actions.forEach(action => {
|
|
|
|
if (Array.isArray(action)) {
|
|
|
|
action.forEach(actionToMap => {
|
|
|
|
menu.push({ id: actionToMap.id.toString(), label: actionToMap.text });
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
menu.push({ id: action.id.toString(), label: action.text });
|
|
|
|
}
|
|
|
|
});
|
2024-05-18 12:56:57 -04:00
|
|
|
return menu;
|
|
|
|
}, [actions]);
|
2024-05-18 12:48:03 -04:00
|
|
|
|
2024-05-18 12:56:57 -04:00
|
|
|
const showMenu = useCallback(() => {
|
|
|
|
showPopupMenu(menuItems, handleToolTipSelection, menuRef.current);
|
|
|
|
}, [menuItems, handleToolTipSelection]);
|
2024-05-18 12:48:03 -04:00
|
|
|
|
|
|
|
return (
|
|
|
|
<Pressable
|
|
|
|
{...(enableAndroidRipple ? { android_ripple: { color: 'lightgrey' } } : {})}
|
|
|
|
ref={menuRef}
|
|
|
|
disabled={disabled}
|
|
|
|
style={buttonStyle}
|
|
|
|
{...(isMenuPrimaryAction ? { onPress: showMenu } : { onPress, onLongPress: showMenu })}
|
|
|
|
{...restProps}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</Pressable>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const ToolTipMenu = forwardRef(BaseToolTipMenu);
|
|
|
|
|
|
|
|
export default ToolTipMenu;
|