2024-04-06 19:54:10 -04:00
|
|
|
import React, { useRef, useEffect, forwardRef } from 'react';
|
2021-02-10 00:18:40 -05:00
|
|
|
import PropTypes from 'prop-types';
|
2024-03-18 18:31:55 -04:00
|
|
|
import { Pressable } from 'react-native';
|
2021-10-20 08:53:17 -04:00
|
|
|
import showPopupMenu from '../blue_modules/showPopupMenu';
|
2021-02-10 00:18:40 -05:00
|
|
|
|
2024-04-06 19:54:10 -04:00
|
|
|
const BaseToolTipMenu = (props, ref) => {
|
2021-10-06 23:15:32 -04:00
|
|
|
const menuRef = useRef();
|
2021-10-26 16:47:09 -04:00
|
|
|
const disabled = props.disabled ?? false;
|
2021-09-15 20:19:06 -04:00
|
|
|
const isMenuPrimaryAction = props.isMenuPrimaryAction ?? false;
|
2024-03-18 18:31:55 -04:00
|
|
|
const enableAndroidRipple = props.enableAndroidRipple ?? true;
|
2021-09-15 20:19:06 -04:00
|
|
|
const buttonStyle = props.buttonStyle ?? {};
|
2021-02-10 00:18:40 -05:00
|
|
|
const handleToolTipSelection = selection => {
|
2021-10-06 23:15:32 -04:00
|
|
|
props.onPressMenuItem(selection.id);
|
|
|
|
};
|
|
|
|
|
|
|
|
useEffect(() => {
|
2021-10-07 01:00:20 -04:00
|
|
|
if (ref && ref.current) {
|
2021-10-06 23:15:32 -04:00
|
|
|
ref.current.dismissMenu = dismissMenu;
|
|
|
|
}
|
|
|
|
}, [ref]);
|
|
|
|
|
|
|
|
const dismissMenu = () => {
|
|
|
|
console.log('dismissMenu Not implemented');
|
2021-02-10 00:18:40 -05:00
|
|
|
};
|
|
|
|
|
|
|
|
const showMenu = () => {
|
2021-10-03 23:47:01 -04:00
|
|
|
const menu = [];
|
|
|
|
for (const actions of props.actions) {
|
|
|
|
if (Array.isArray(actions)) {
|
|
|
|
for (const actionToMap of actions) {
|
|
|
|
menu.push({ id: actionToMap.id, label: actionToMap.text });
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
menu.push({ id: actions.id, label: actions.text });
|
|
|
|
}
|
2021-08-16 00:43:04 -04:00
|
|
|
}
|
2021-10-03 23:47:01 -04:00
|
|
|
|
2021-10-06 23:15:32 -04:00
|
|
|
showPopupMenu(menu, handleToolTipSelection, menuRef.current);
|
2021-02-10 00:18:40 -05:00
|
|
|
};
|
|
|
|
|
2021-10-21 14:54:32 -04:00
|
|
|
return (
|
2024-03-18 18:31:55 -04:00
|
|
|
<Pressable
|
|
|
|
{...(enableAndroidRipple ? { android_ripple: { color: 'lightgrey' } } : {})}
|
2021-10-21 14:54:32 -04:00
|
|
|
ref={menuRef}
|
2021-10-26 16:47:09 -04:00
|
|
|
disabled={disabled}
|
2024-03-18 18:31:55 -04:00
|
|
|
style={buttonStyle}
|
2021-10-21 14:54:32 -04:00
|
|
|
{...(isMenuPrimaryAction ? { onPress: showMenu } : { onPress: props.onPress, onLongPress: showMenu })}
|
|
|
|
>
|
2021-10-26 16:47:09 -04:00
|
|
|
{props.children}
|
2024-03-18 18:31:55 -04:00
|
|
|
</Pressable>
|
2021-08-16 15:12:52 -04:00
|
|
|
);
|
2021-02-10 00:18:40 -05:00
|
|
|
};
|
|
|
|
|
2024-04-06 19:54:10 -04:00
|
|
|
const ToolTipMenu = forwardRef(BaseToolTipMenu);
|
|
|
|
|
2024-03-29 21:22:05 -04:00
|
|
|
export default ToolTipMenu;
|
2021-02-10 00:18:40 -05:00
|
|
|
ToolTipMenu.propTypes = {
|
2024-04-06 19:54:10 -04:00
|
|
|
actions: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired,
|
2024-03-29 21:22:05 -04:00
|
|
|
children: PropTypes.node,
|
2021-10-06 23:15:32 -04:00
|
|
|
onPressMenuItem: PropTypes.func.isRequired,
|
2021-09-15 20:19:06 -04:00
|
|
|
isMenuPrimaryAction: PropTypes.bool,
|
2021-10-21 14:54:32 -04:00
|
|
|
onPress: PropTypes.func,
|
2021-10-26 16:47:09 -04:00
|
|
|
disabled: PropTypes.bool,
|
2021-02-10 00:18:40 -05:00
|
|
|
};
|