2021-08-16 00:43:04 -04:00
|
|
|
import React, { useRef, cloneElement } from 'react';
|
2021-02-10 00:18:40 -05:00
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import showPopupMenu from 'react-native-popup-menu-android';
|
2021-08-16 00:43:04 -04:00
|
|
|
import { Pressable } from 'react-native';
|
2021-02-10 00:18:40 -05:00
|
|
|
|
2021-08-16 00:43:04 -04:00
|
|
|
const ToolTipMenu = props => {
|
|
|
|
const ref = useRef();
|
2021-02-10 00:18:40 -05:00
|
|
|
const handleToolTipSelection = selection => {
|
2021-08-16 00:43:04 -04:00
|
|
|
props.onPress(selection.id);
|
2021-02-10 00:18:40 -05:00
|
|
|
};
|
|
|
|
|
|
|
|
const showMenu = () => {
|
2021-08-16 00:43:04 -04:00
|
|
|
let actions = props.actions.map(action => ({ id: action.id, label: action.text }));
|
|
|
|
if (props.submenu) {
|
|
|
|
actions = actions.concat(props.submenu.menuItems.map(action => ({ id: action.actionKey, label: action.actionTitle })));
|
|
|
|
}
|
|
|
|
showPopupMenu(actions, handleToolTipSelection, ref.current);
|
2021-02-10 00:18:40 -05:00
|
|
|
};
|
|
|
|
|
2021-08-16 00:43:04 -04:00
|
|
|
const child = (Array.isArray(props.children) ? props.children[0] : props.children) || null;
|
2021-02-10 00:18:40 -05:00
|
|
|
|
2021-08-16 15:12:52 -04:00
|
|
|
return (
|
|
|
|
<Pressable ref={ref} onLongPress={showMenu}>
|
|
|
|
{child && cloneElement(child, { onLongPress: showMenu })}
|
|
|
|
</Pressable>
|
|
|
|
);
|
2021-02-10 00:18:40 -05:00
|
|
|
};
|
|
|
|
|
2021-08-16 00:43:04 -04:00
|
|
|
export default ToolTipMenu;
|
2021-02-10 00:18:40 -05:00
|
|
|
ToolTipMenu.propTypes = {
|
|
|
|
actions: PropTypes.arrayOf(PropTypes.shape).isRequired,
|
2021-08-17 10:03:55 -04:00
|
|
|
children: PropTypes.node.isRequired,
|
2021-08-16 00:43:04 -04:00
|
|
|
submenu: PropTypes.any,
|
2021-08-16 13:14:47 -04:00
|
|
|
onPress: PropTypes.func.isRequired,
|
2021-02-10 00:18:40 -05:00
|
|
|
};
|