ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Perf] Memoize some Menu Items

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-01-22 18:12:32 +01:00
parent c34ef129ec
commit 5ee98fd33c
3 changed files with 118 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/left/NewChatButton.tsx
View File

@ -1,6 +1,6 @@
import type { FC } from '../../lib/teact/teact'; import type { FC } from '../../lib/teact/teact';
import React, { import React, {
useState, useEffect, memo, useCallback, useState, useEffect, memo, useCallback, useMemo,
} from '../../lib/teact/teact'; } from '../../lib/teact/teact';
import buildClassName from '../../util/buildClassName'; import buildClassName from '../../util/buildClassName';
@ -49,6 +49,14 @@ const NewChatButton: FC<OwnProps> = ({
setIsMenuOpen(false); setIsMenuOpen(false);
}, []); }, []);
const menuItems = useMemo(() => (
<>
<MenuItem icon="channel" onClick={onNewChannel}>{lang('NewChannel')}</MenuItem>
<MenuItem icon="group" onClick={onNewGroup}>{lang('NewGroup')}</MenuItem>
<MenuItem icon="user" onClick={onNewPrivateChat}>{lang('NewMessageTitle')}</MenuItem>
</>
), [lang, onNewChannel, onNewGroup, onNewPrivateChat]);
return ( return (
<div className={fabClassName} dir={lang.isRtl ? 'rtl' : undefined}> <div className={fabClassName} dir={lang.isRtl ? 'rtl' : undefined}>
<Button <Button
@ -69,9 +77,7 @@ const NewChatButton: FC<OwnProps> = ({
autoClose autoClose
onClose={handleClose} onClose={handleClose}
> >
<MenuItem icon="channel" onClick={onNewChannel}>{lang('NewChannel')}</MenuItem> {menuItems}
<MenuItem icon="group" onClick={onNewGroup}>{lang('NewGroup')}</MenuItem>
<MenuItem icon="user" onClick={onNewPrivateChat}>{lang('NewMessageTitle')}</MenuItem>
</Menu> </Menu>
</div> </div>
); );

40
src/components/left/main/LeftMainHeader.tsx
View File

@ -266,21 +266,8 @@ const LeftMainHeader: FC<OwnProps & StateProps> = ({
handleDropdownMenuTransitionEnd, handleDropdownMenuTransitionEnd,
} = useLeftHeaderButtonRtlForumTransition(shouldHideSearch); } = useLeftHeaderButtonRtlForumTransition(shouldHideSearch);
return ( const menuItems = useMemo(() => (
<div className="LeftMainHeader"> <>
<div id="LeftMainHeader" className="left-header">
{lang.isRtl && <div className="DropdownMenuFiller" />}
<DropdownMenu
trigger={MainButton}
footer={`${APP_NAME} ${versionString}`}
className={buildClassName(
lang.isRtl && 'rtl',
shouldHideSearch && lang.isRtl && 'right-aligned',
shouldDisableDropdownMenuTransitionRef.current && lang.isRtl && 'disable-transition',
)}
positionX={shouldHideSearch && lang.isRtl ? 'right' : 'left'}
onTransitionEnd={lang.isRtl ? handleDropdownMenuTransitionEnd : undefined}
>
<MenuItem <MenuItem
icon="saved-messages" icon="saved-messages"
onClick={handleSelectSaved} onClick={handleSelectSaved}
@ -377,6 +364,29 @@ const LeftMainHeader: FC<OwnProps & StateProps> = ({
Install App Install App
</MenuItem> </MenuItem>
)} )}
</>
), [
animationLevel, archivedUnreadChatsCount, canInstall, handleAnimationLevelChange, handleBugReportClick,
handleChangelogClick, handleDarkModeToggle, handleOpenTipsChat, handleSelectSaved, handleSwitchToLegacy,
handleSwitchToWebK, lang, onSelectArchived, onSelectContacts, onSelectSettings, theme, withOtherVersions,
]);
return (
<div className="LeftMainHeader">
<div id="LeftMainHeader" className="left-header">
{lang.isRtl && <div className="DropdownMenuFiller" />}
<DropdownMenu
trigger={MainButton}
footer={`${APP_NAME} ${versionString}`}
className={buildClassName(
lang.isRtl && 'rtl',
shouldHideSearch && lang.isRtl && 'right-aligned',
shouldDisableDropdownMenuTransitionRef.current && lang.isRtl && 'disable-transition',
)}
positionX={shouldHideSearch && lang.isRtl ? 'right' : 'left'}
onTransitionEnd={lang.isRtl ? handleDropdownMenuTransitionEnd : undefined}
>
{menuItems}
</DropdownMenu> </DropdownMenu>
<SearchInput <SearchInput
inputId="telegram-search-input" inputId="telegram-search-input"

4
src/components/ui/Menu.tsx
View File

@ -1,6 +1,6 @@
import type { RefObject } from 'react'; import type { RefObject } from 'react';
import type { FC } from '../../lib/teact/teact'; import type { FC } from '../../lib/teact/teact';
import React, { useEffect, useRef } from '../../lib/teact/teact'; import React, { memo, useEffect, useRef } from '../../lib/teact/teact';
import useShowTransition from '../../hooks/useShowTransition'; import useShowTransition from '../../hooks/useShowTransition';
import useKeyboardListNavigation from '../../hooks/useKeyboardListNavigation'; import useKeyboardListNavigation from '../../hooks/useKeyboardListNavigation';
@ -168,4 +168,4 @@ const Menu: FC<OwnProps> = ({
return menu; return menu;
}; };
export default Menu; export default memo(Menu);