REF: useMemo

This commit is contained in:
Marcos Rodriguez Velez 2024-05-18 12:56:57 -04:00
parent 43bb572629
commit f486533095
No known key found for this signature in database
GPG Key ID: 6030B2F48CCE86D7
2 changed files with 85 additions and 87 deletions

View File

@ -1,4 +1,4 @@
import React, { useRef, useEffect, forwardRef, Ref } from 'react';
import React, { useRef, useEffect, forwardRef, Ref, useMemo, useCallback } from 'react';
import { Pressable, View } from 'react-native';
import showPopupMenu, { OnPopupMenuItemSelect, PopupMenuItem } from '../blue_modules/showPopupMenu.android';
import { ToolTipMenuProps } from './types';
@ -17,23 +17,27 @@ const BaseToolTipMenu = (props: ToolTipMenuProps, ref: Ref<{ dismissMenu?: () =>
...restProps
} = props;
const handleToolTipSelection: OnPopupMenuItemSelect = (selection: PopupMenuItem) => {
if (selection.id) {
onPressMenuItem(selection.id);
}
};
const handleToolTipSelection = useCallback<OnPopupMenuItemSelect>(
(selection: PopupMenuItem) => {
if (selection.id) {
onPressMenuItem(selection.id);
}
},
[onPressMenuItem],
);
useEffect(() => {
if (ref && menuRef.current) {
(ref as React.MutableRefObject<{ dismissMenu?: () => void }>).current.dismissMenu = dismissMenu;
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [ref]);
const dismissMenu = () => {
const dismissMenu = useCallback(() => {
console.log('dismissMenu Not implemented');
};
}, []);
const showMenu = () => {
const menuItems = useMemo(() => {
const menu: { id: string; label: string }[] = [];
actions.forEach(action => {
if (Array.isArray(action)) {
@ -44,9 +48,12 @@ const BaseToolTipMenu = (props: ToolTipMenuProps, ref: Ref<{ dismissMenu?: () =>
menu.push({ id: action.id.toString(), label: action.text });
}
});
return menu;
}, [actions]);
showPopupMenu(menu, handleToolTipSelection, menuRef.current);
};
const showMenu = useCallback(() => {
showPopupMenu(menuItems, handleToolTipSelection, menuRef.current);
}, [menuItems, handleToolTipSelection]);
return (
<Pressable

View File

@ -1,11 +1,23 @@
// ToolTipMenu.ios.tsx
import React, { forwardRef, Ref } from 'react';
import React, { forwardRef, Ref, useMemo, useCallback } from 'react';
import { ContextMenuView, ContextMenuButton, RenderItem } from 'react-native-ios-context-menu';
import { TouchableOpacity } from 'react-native';
import { ToolTipMenuProps, Action } from './types';
const BaseToolTipMenu = (props: ToolTipMenuProps, ref: Ref<any>) => {
const menuItemMapped = ({ action, menuOptions }: { action: Action; menuOptions?: string[] }) => {
const {
title = '',
isButton = false,
isMenuPrimaryAction = false,
renderPreview,
disabled = false,
onPress,
onMenuWillShow,
onMenuWillHide,
buttonStyle,
onPressMenuItem,
} = props;
const menuItemMapped = useCallback(({ action, menuOptions }: { action: Action; menuOptions?: string[] }) => {
const item: any = {
actionKey: action.id.toString(),
actionTitle: action.text,
@ -19,61 +31,56 @@ const BaseToolTipMenu = (props: ToolTipMenuProps, ref: Ref<any>) => {
item.menuAttributes = ['disabled'];
}
return item;
};
}, []);
const menuItems = props.actions.map(action => {
if (Array.isArray(action)) {
const mapped = action.map(actionToMap => menuItemMapped({ action: actionToMap }));
return {
menuOptions: ['displayInline'],
menuItems: mapped,
menuTitle: '',
};
} else {
return menuItemMapped({ action });
}
});
const menuItems = useMemo(
() =>
props.actions.map(action => {
if (Array.isArray(action)) {
const mapped = action.map(actionToMap => menuItemMapped({ action: actionToMap }));
return {
menuOptions: ['displayInline'],
menuItems: mapped,
menuTitle: '',
};
} else {
return menuItemMapped({ action });
}
}),
[props.actions, menuItemMapped],
);
const {
title = '',
isButton = false,
isMenuPrimaryAction = false,
renderPreview,
disabled = false,
onPress,
onMenuWillShow,
onMenuWillHide,
buttonStyle,
} = props;
const handlePressMenuItem = useCallback(
({ nativeEvent }: { nativeEvent: { actionKey: string } }) => {
onPressMenuItem(nativeEvent.actionKey);
},
[onPressMenuItem],
);
return isButton ? (
<TouchableOpacity onPress={onPress} disabled={disabled} accessibilityRole="button" style={buttonStyle}>
<ContextMenuButton
ref={ref}
onMenuWillShow={onMenuWillShow}
onMenuWillHide={onMenuWillHide}
useActionSheetFallback={false}
onPressMenuItem={({ nativeEvent }) => {
props.onPressMenuItem(nativeEvent.actionKey);
}}
isMenuPrimaryAction={isMenuPrimaryAction}
menuConfig={{
menuTitle: title,
menuItems,
}}
>
{props.children}
</ContextMenuButton>
</TouchableOpacity>
) : props.onPress ? (
const renderContextMenuButton = () => (
<ContextMenuButton
ref={ref}
onMenuWillShow={onMenuWillShow}
onMenuWillHide={onMenuWillHide}
useActionSheetFallback={false}
onPressMenuItem={handlePressMenuItem}
isMenuPrimaryAction={isMenuPrimaryAction}
menuConfig={{
menuTitle: title,
menuItems,
}}
>
{props.children}
</ContextMenuButton>
);
const renderContextMenuView = () => (
<ContextMenuView
ref={ref}
lazyPreview
shouldEnableAggressiveCleanup
internalCleanupMode="automatic"
onPressMenuItem={({ nativeEvent }) => {
props.onPressMenuItem(nativeEvent.actionKey);
}}
onPressMenuItem={handlePressMenuItem}
useActionSheetFallback={false}
menuConfig={{
menuTitle: title,
@ -89,36 +96,20 @@ const BaseToolTipMenu = (props: ToolTipMenuProps, ref: Ref<any>) => {
}
: {})}
>
<TouchableOpacity accessibilityRole="button" onPress={props.onPress}>
<TouchableOpacity accessibilityRole="button" onPress={onPress}>
{props.children}
</TouchableOpacity>
</ContextMenuView>
);
return isButton ? (
<TouchableOpacity onPress={onPress} disabled={disabled} accessibilityRole="button" style={buttonStyle}>
{renderContextMenuButton()}
</TouchableOpacity>
) : props.onPress ? (
renderContextMenuView()
) : (
<ContextMenuView
ref={ref}
internalCleanupMode="viewController"
onPressMenuItem={({ nativeEvent }) => {
props.onPressMenuItem(nativeEvent.actionKey);
}}
lazyPreview
shouldEnableAggressiveCleanup
useActionSheetFallback={false}
menuConfig={{
menuTitle: title,
menuItems,
}}
{...(renderPreview
? {
previewConfig: {
previewType: 'CUSTOM',
backgroundColor: 'white',
},
renderPreview: renderPreview as RenderItem,
}
: {})}
>
{props.children}
</ContextMenuView>
renderContextMenuView()
);
};