88 lines
2.1 KiB
TypeScript
88 lines
2.1 KiB
TypeScript
import type { FC } from '../../lib/teact/teact';
|
|
import React, {
|
|
useCallback, useEffect, useMemo, useState,
|
|
} from '../../lib/teact/teact';
|
|
|
|
import buildClassName from '../../util/buildClassName';
|
|
|
|
import useOldLang from '../../hooks/useOldLang';
|
|
|
|
import Button from '../ui/Button';
|
|
import Menu from '../ui/Menu';
|
|
import MenuItem from '../ui/MenuItem';
|
|
|
|
import './NewChatButton.scss';
|
|
|
|
type OwnProps = {
|
|
isShown: boolean;
|
|
onNewPrivateChat: () => void;
|
|
onNewChannel: () => void;
|
|
onNewGroup: () => void;
|
|
};
|
|
|
|
const NewChatButton: FC<OwnProps> = ({
|
|
isShown,
|
|
onNewPrivateChat,
|
|
onNewChannel,
|
|
onNewGroup,
|
|
}) => {
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!isShown) {
|
|
setIsMenuOpen(false);
|
|
}
|
|
}, [isShown]);
|
|
|
|
const lang = useOldLang();
|
|
|
|
const fabClassName = buildClassName(
|
|
'NewChatButton',
|
|
isShown && 'revealed',
|
|
isMenuOpen && 'menu-is-open',
|
|
);
|
|
|
|
const toggleIsMenuOpen = useCallback(() => {
|
|
setIsMenuOpen(!isMenuOpen);
|
|
}, [isMenuOpen]);
|
|
|
|
const handleClose = useCallback(() => {
|
|
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
|
|
round
|
|
color="primary"
|
|
className={isMenuOpen ? 'active' : ''}
|
|
onClick={toggleIsMenuOpen}
|
|
ariaLabel={lang(isMenuOpen ? 'Close' : 'NewMessageTitle')}
|
|
tabIndex={-1}
|
|
>
|
|
<i className="icon icon-new-chat-filled" />
|
|
<i className="icon icon-close" />
|
|
</Button>
|
|
<Menu
|
|
isOpen={isMenuOpen}
|
|
positionX={lang.isRtl ? 'left' : 'right'}
|
|
positionY="bottom"
|
|
autoClose
|
|
onClose={handleClose}
|
|
>
|
|
{menuItems}
|
|
</Menu>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NewChatButton;
|