mirror of
https://github.com/BlueWallet/BlueWallet.git
synced 2024-11-19 18:00:17 +01:00
REF: useMemo
This commit is contained in:
parent
43bb572629
commit
f486533095
@ -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
|
||||
|
@ -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()
|
||||
);
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user