[Perf] Memoize some Menu Items
This commit is contained in:
Alexander Zinchuk
parent
c34ef129ec
commit
5ee98fd33c
@ -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>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -266,6 +266,111 @@ const LeftMainHeader: FC<OwnProps & StateProps> = ({
|
|||||||
handleDropdownMenuTransitionEnd,
|
handleDropdownMenuTransitionEnd,
|
||||||
} = useLeftHeaderButtonRtlForumTransition(shouldHideSearch);
|
} = 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 (
|
return (
|
||||||
<div className="LeftMainHeader">
|
<div className="LeftMainHeader">
|
||||||
<div id="LeftMainHeader" className="left-header">
|
<div id="LeftMainHeader" className="left-header">
|
||||||
@ -281,102 +386,7 @@ const LeftMainHeader: FC<OwnProps & StateProps> = ({
|
|||||||
positionX={shouldHideSearch && lang.isRtl ? 'right' : 'left'}
|
positionX={shouldHideSearch && lang.isRtl ? 'right' : 'left'}
|
||||||
onTransitionEnd={lang.isRtl ? handleDropdownMenuTransitionEnd : undefined}
|
onTransitionEnd={lang.isRtl ? handleDropdownMenuTransitionEnd : undefined}
|
||||||
>
|
>
|
||||||
<MenuItem
|
{menuItems}
|
||||||
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>
|
|
||||||
)}
|
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
<SearchInput
|
<SearchInput
|
||||||
inputId="telegram-search-input"
|
inputId="telegram-search-input"
|
||||||
|
|||||||
@ -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);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user