Cool_Tools/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2024-11-20 14:37:06 +01:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Memoize context menu provider

Browse Source
This commit is contained in:
jeffvli 2023-07-24 14:40:03 -07:00
parent 2aaf3c34c8
commit 2072f9554e
1 changed files with 55 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
src/renderer/features/context-menu/context-menu-provider.tsx
View File

@ -83,7 +83,7 @@ const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
const remote = isElectron() ? window.electron.remote : null; const remote = isElectron() ? window.electron.remote : null;
export interface ContextMenuProviderProps { export interface ContextMenuProviderProps {
children: React.ReactNode; children: ReactNode;
} }
export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => { export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
@ -107,45 +107,57 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
const handlePlayQueueAdd = usePlayQueueAdd(); const handlePlayQueueAdd = usePlayQueueAdd();
const openContextMenu = (args: OpenContextMenuProps) => { const openContextMenu = useCallback(
const { xPos, yPos, menuItems, data, type, tableApi, dataNodes, context, resetGridCache } = (args: OpenContextMenuProps) => {
args; const {
xPos,
yPos,
menuItems,
data,
type,
tableApi,
dataNodes,
context,
resetGridCache,
} = args;
const serverType = data[0]?.serverType || useAuthStore.getState().currentServer?.type; const serverType = data[0]?.serverType || useAuthStore.getState().currentServer?.type;
let validMenuItems = menuItems; let validMenuItems = menuItems;
if (serverType === ServerType.JELLYFIN) { if (serverType === ServerType.JELLYFIN) {
validMenuItems = menuItems.filter( validMenuItems = menuItems.filter(
(item) => !JELLYFIN_IGNORED_MENU_ITEMS.includes(item.id), (item) => !JELLYFIN_IGNORED_MENU_ITEMS.includes(item.id),
); );
} }
// If the context menu dimension can't be automatically calculated, calculate it manually // If the context menu dimension can't be automatically calculated, calculate it manually
// This is a hacky way since resize observer may not automatically recalculate when not rendered // This is a hacky way since resize observer may not automatically recalculate when not rendered
const menuHeight = menuRect.height || (menuItems.length + 1) * 50; const menuHeight = menuRect.height || (menuItems.length + 1) * 50;
const menuWidth = menuRect.width || 220; const menuWidth = menuRect.width || 220;
const shouldReverseY = yPos + menuHeight > viewport.height; const shouldReverseY = yPos + menuHeight > viewport.height;
const shouldReverseX = xPos + menuWidth > viewport.width; const shouldReverseX = xPos + menuWidth > viewport.width;
const calculatedXPos = shouldReverseX ? xPos - menuWidth : xPos; const calculatedXPos = shouldReverseX ? xPos - menuWidth : xPos;
const calculatedYPos = shouldReverseY ? yPos - menuHeight : yPos; const calculatedYPos = shouldReverseY ? yPos - menuHeight : yPos;
setCtx({ setCtx({
context, context,
data, data,
dataNodes, dataNodes,
menuItems: validMenuItems, menuItems: validMenuItems,
resetGridCache, resetGridCache,
tableApi, tableApi,
type, type,
xPos: calculatedXPos, xPos: calculatedXPos,
yPos: calculatedYPos, yPos: calculatedYPos,
}); });
setOpened(true); setOpened(true);
}; },
[menuRect.height, menuRect.width, setCtx, viewport.height, viewport.width],
);
const closeContextMenu = () => { const closeContextMenu = useCallback(() => {
setOpened(false); setOpened(false);
setCtx({ setCtx({
data: [], data: [],
@ -156,7 +168,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
xPos: 0, xPos: 0,
yPos: 0, yPos: 0,
}); });
}; }, [setCtx]);
useContextMenuEvents({ useContextMenuEvents({
closeContextMenu, closeContextMenu,
@ -763,13 +775,16 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
const mergedRef = useMergedRef(ref, clickOutsideRef); const mergedRef = useMergedRef(ref, clickOutsideRef);
const providerValue = useMemo(
() => ({
closeContextMenu,
openContextMenu,
}),
[closeContextMenu, openContextMenu],
);
return ( return (
<ContextMenuContext.Provider <ContextMenuContext.Provider value={providerValue}>
value={{
closeContextMenu,
openContextMenu,
}}
>
<Portal> <Portal>
<AnimatePresence> <AnimatePresence>
{opened && ( {opened && (