2021-10-21 14:54:32 -04:00
|
|
|
import React, { useRef, useEffect, forwardRef } from 'react';
|
2021-02-10 00:18:40 -05:00
|
|
|
import PropTypes from 'prop-types';
|
2021-10-21 14:54:32 -04:00
|
|
|
import { TouchableOpacity } 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
|
|
|
|
2021-10-06 23:15:32 -04:00
|
|
|
const ToolTipMenu = (props, ref) => {
|
|
|
|
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;
|
|
|
|
// eslint-disable-next-line react/prop-types
|
|
|
|
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 (
|
|
|
|
<TouchableOpacity
|
|
|
|
style={buttonStyle}
|
|
|
|
ref={menuRef}
|
2021-10-26 16:47:09 -04:00
|
|
|
disabled={disabled}
|
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}
|
2021-09-15 20:19:06 -04:00
|
|
|
</TouchableOpacity>
|
2021-08-16 15:12:52 -04:00
|
|
|
);
|
2021-02-10 00:18:40 -05:00
|
|
|
};
|
|
|
|
|
2021-10-06 23:15:32 -04:00
|
|
|
export default forwardRef(ToolTipMenu);
|
2021-02-10 00:18:40 -05:00
|
|
|
ToolTipMenu.propTypes = {
|
2021-10-26 22:52:20 -04:00
|
|
|
actions: PropTypes.object.isRequired,
|
2021-08-17 10:03:55 -04:00
|
|
|
children: PropTypes.node.isRequired,
|
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
|
|
|
};
|