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

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

@ -266,6 +266,111 @@ const LeftMainHeader: FC<OwnProps & StateProps> = ({
handleDropdownMenuTransitionEnd,
} = useLeftHeaderButtonRtlForumTransition(shouldHideSearch);
const menuItems = useMemo(() => (
<>
<MenuItem
icon="saved-messages"
onClick={handleSelectSaved}
>
{lang('SavedMessages')}
</MenuItem>
<MenuItem
icon="archive"
onClick={onSelectArchived}
>
<span className="menu-item-name">{lang('ArchivedChats')}</span>
{archivedUnreadChatsCount > 0 && (
<div className="right-badge">{archivedUnreadChatsCount}</div>
)}
</MenuItem>
<MenuItem
icon="user"
onClick={onSelectContacts}
>
{lang('Contacts')}
</MenuItem>
<MenuItem
icon="settings"
onClick={onSelectSettings}
>
{lang('Settings')}
</MenuItem>
<MenuItem
icon="darkmode"
onClick={handleDarkModeToggle}
>
<span className="menu-item-name">{lang('lng_menu_night_mode')}</span>
<Switcher
id="darkmode"
label={lang(theme === 'dark' ? 'lng_settings_disable_night_theme' : 'lng_settings_enable_night_theme')}
checked={theme === 'dark'}
noAnimation
/>
</MenuItem>
<MenuItem
icon="animations"
onClick={handleAnimationLevelChange}
>
<span className="menu-item-name capitalize">{lang('Appearance.Animations').toLowerCase()}</span>
<Switcher
id="animations"
label="Toggle Animations"
checked={animationLevel > 0}
/>
</MenuItem>
<MenuItem
icon="help"
onClick={handleOpenTipsChat}
>
{lang('TelegramFeatures')}
</MenuItem>
<MenuItem
icon="bug"
onClick={handleBugReportClick}
>
Report Bug
</MenuItem>
{IS_BETA && (
<MenuItem
icon="permissions"
onClick={handleChangelogClick}
>
Beta Changelog
</MenuItem>
)}
{withOtherVersions && (
<>
<MenuItem
icon="char-K"
href={WEBK_VERSION_URL}
onClick={handleSwitchToWebK}
>
Switch to K Version
</MenuItem>
<MenuItem
icon="char-W"
href={LEGACY_VERSION_URL}
onClick={handleSwitchToLegacy}
>
Switch to Old Version
</MenuItem>
</>
)}
{canInstall && (
<MenuItem
icon="install"
onClick={getPromptInstall()}
>
Install App
</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">
@ -281,102 +386,7 @@ const LeftMainHeader: FC<OwnProps & StateProps> = ({
positionX={shouldHideSearch && lang.isRtl ? 'right' : 'left'}
onTransitionEnd={lang.isRtl ? handleDropdownMenuTransitionEnd : undefined}
>
<MenuItem
icon="saved-messages"
onClick={handleSelectSaved}
>
{lang('SavedMessages')}
</MenuItem>
<MenuItem
icon="archive"
onClick={onSelectArchived}
>
<span className="menu-item-name">{lang('ArchivedChats')}</span>
{archivedUnreadChatsCount > 0 && (
<div className="right-badge">{archivedUnreadChatsCount}</div>
)}
</MenuItem>
<MenuItem
icon="user"
onClick={onSelectContacts}
>
{lang('Contacts')}
</MenuItem>
<MenuItem
icon="settings"
onClick={onSelectSettings}
>
{lang('Settings')}
</MenuItem>
<MenuItem
icon="darkmode"
onClick={handleDarkModeToggle}
>
<span className="menu-item-name">{lang('lng_menu_night_mode')}</span>
<Switcher
id="darkmode"
label={lang(theme === 'dark' ? 'lng_settings_disable_night_theme' : 'lng_settings_enable_night_theme')}
checked={theme === 'dark'}
noAnimation
/>
</MenuItem>
<MenuItem
icon="animations"
onClick={handleAnimationLevelChange}
>
<span className="menu-item-name capitalize">{lang('Appearance.Animations').toLowerCase()}</span>
<Switcher
id="animations"
label="Toggle Animations"
checked={animationLevel > 0}
/>
</MenuItem>
<MenuItem
icon="help"
onClick={handleOpenTipsChat}
>
{lang('TelegramFeatures')}
</MenuItem>
<MenuItem
icon="bug"
onClick={handleBugReportClick}
>
Report Bug
</MenuItem>
{IS_BETA && (
<MenuItem
icon="permissions"
onClick={handleChangelogClick}
>
Beta Changelog
</MenuItem>
)}
{withOtherVersions && (
<>
<MenuItem
icon="char-K"
href={WEBK_VERSION_URL}
onClick={handleSwitchToWebK}
>
Switch to K Version
</MenuItem>
<MenuItem
icon="char-W"
href={LEGACY_VERSION_URL}
onClick={handleSwitchToLegacy}
>
Switch to Old Version
</MenuItem>
</>
)}
{canInstall && (
<MenuItem
icon="install"
onClick={getPromptInstall()}
>
Install App
</MenuItem>
)}
{menuItems}
</DropdownMenu>
<SearchInput
inputId="telegram-search-input"

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

@ -1,6 +1,6 @@
import type { RefObject } from 'react';
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 useKeyboardListNavigation from '../../hooks/useKeyboardListNavigation';
@ -168,4 +168,4 @@ const Menu: FC<OwnProps> = ({
return menu;
};
export default Menu;
export default memo(Menu);